标签 网页 下的文章

学习这个 Python 教程,轻松提取网页的有关信息。

浏览网页可能占了你一天中的大部分时间。然而,你总是需要手动浏览,这很讨厌,不是吗?你必须打开浏览器,然后访问一个网站,单击按钮,移动鼠标……相当费时费力。如果能够通过代码与互联网交互,岂不是更好吗?

在 Python 的 requests 模块的帮助下,你可以使用 Python 从互联网中获取数据:

import requests

DATA = "https://opensource.com/article/22/5/document-source-code-doxygen-linux"
PAGE = requests.get(DATA)

print(PAGE.text)

在以上代码示例中,你首先导入了 requests 模块。接着,你创建了两个变量:其中一个叫做 DATA,它用来保存你要下载的 URL。在之后的代码中,你将能够在每次运行应用程序时提供不同的 URL。不过,就目前而言,最简单的方法是“硬编码”一个测试 URL,以达到演示目的。

另一个变量是 PAGE。代码读取了存储在 DATA 中的 URL,然后把它作为参数传入 requests.get 函数,最后用变量 PAGE 来接收函数的返回值。requests 模块及其 .get 函数的功能是:“读取”一个互联网地址(一个 URL)、访问互联网,并下载位于该地址的任何内容。

当然,其中涉及到很多步骤。幸运的是,你不必自己弄清楚,这也正是 Python 模块存在的原因。最后,你告诉 Python 打印 requests.get 存储在 PAGE 变量的 .text 字段中的所有内容。

Beautiful Soup

如果你运行上面的示例代码,你会得到示例 URL 的所有内容,并且,它们会不加选择地输出到你的终端里。这是因为在代码中,你对 requests 收集到的数据所做的唯一事情,就是打印它。然而,解析文本才是更加有趣的。

Python 可以通过其最基本的功能来“读取”文本,但解析文本允许你搜索模式、特定单词、HTML 标签等。你可以自己解析 requests 返回的文本,不过,使用专门的模块会容易得多。针对 HTML 和 XML 文本,我们有 Beautiful Soup 库。

下面这段代码完成了同样的事情,只不过,它使用了 Beautiful Soup 来解析下载的文本。因为 Beautiful Soup 可以识别 HTML 元素,所以你可以使用它的一些内置功能,让输出对人眼更友好。

例如,在程序的末尾,你可以使用 Beautiful Soup 的 .prettify 函数来处理文本(使其更美观),而不是直接打印原始文本:

from bs4 import BeautifulSoup
import requests

PAGE = requests.get("https://opensource.com/article/22/5/document-source-code-doxygen-linux")
SOUP = BeautifulSoup(PAGE.text, 'html.parser')

# Press the green button in the gutter to run the script.
if __name__ == '__main__':
    # do a thing here
    print(SOUP.prettify())

通过以上代码,我们确保了每个打开的 HTML 标签都输出在单独的一行,并带有适当的缩进,以帮助说明标签的继承关系。实际上,Beautiful Soup 能够通过更多方式来理解 HTML 标签,而不仅仅是将它打印出来。

你可以选择打印某个特定标签,而不是打印整个页面。例如,尝试将打印的选择器从 print(SOUP.prettify()) 更改为:

print(SOUP.p)

这只会打印一个 <p> 标签。具体来说,它只打印遇到的第一个 <p> 标签。要打印所有的 <p> 标签,你需要使用一个循环。

循环

使用 Beautiful Soup 的 find_all 函数,你可以创建一个 for 循环,从而遍历 SOUP 变量中包含的整个网页。除了 <p> 标签之外,你可能也会对其他标签感兴趣,因此最好将其构建为自定义函数,由 Python 中的 def 关键字(意思是 “定义” define )指定。

def loopit():
    for TAG in SOUP.find_all('p'):
        print(TAG)

你可以随意更改临时变量 TAG 的名字,例如 ITEMi 或任何你喜欢的。每次循环运行时,TAG 中都会包含 find_all 函数的搜索结果。在此代码中,它搜索的是 <p> 标签。

函数不会自动执行,除非你显式地调用它。你可以在代码的末尾调用这个函数:

# Press the green button in the gutter to run the script.
if __name__ == '__main__':
    # do a thing here
    loopit()

运行代码以查看所有的 <p> 标签和它们的内容。

只获取内容

你可以通过指定只需要 “ 字符串 string ”(它是 “ 单词 words ” 的编程术语)来排除打印标签。

def loopit():
    for TAG in SOUP.find_all('p'):
        print(TAG.string)

当然,一旦你有了网页的文本,你就可以用标准的 Python 字符串库进一步解析它。例如,你可以使用 lensplit 函数获得单词个数:

def loopit():
    for TAG in SOUP.find_all('p'):
        if TAG.string is not None:
            print(len(TAG.string.split()))

这将打印每个段落元素中的字符串个数,省略那些没有任何字符串的段落。要获得字符串总数,你需要用到变量和一些基本数学知识:

def loopit():
    NUM = 0
    for TAG in SOUP.find_all('p'):
        if TAG.string is not None:
            NUM = NUM + len(TAG.string.split())
    print("Grand total is ", NUM)

Python 作业

你可以使用 Beautiful Soup 和 Python 提取更多信息。以下是有关如何改进你的应用程序的一些想法:

  • 接受输入,这样你就可以在启动应用程序时,指定要下载和分析的 URL。
  • 统计页面上图片(<img> 标签)的数量。
  • 统计另一个标签中的图片(<img> 标签)的数量(例如,仅出现在 <main> div 中的图片,或仅出现在 </p> 标签之后的图片)。

via: https://opensource.com/article/22/6/analyze-web-pages-python-requests-beautiful-soup

作者:Seth Kenlon 选题:lkxed 译者:lkxed 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

设想一下,你正忙于一项任务且需要在浏览器中打开超过 20 个页面,大多数页面都和工作有关。

还有一些是 YouTube 或其他音乐流媒体网站。

完成任务后需要关闭浏览器,但这会将包括工作相关和听音乐的网页等所有网页一起关掉。

然后你需要再次打开这些网页并登录账号以回到原来的进度。

这看起来令人沮丧,对吧?Linux Mint 理解你的烦恼,因此有了下面这个新项目帮助你应对这些问题。

最近的一篇文章中,Linux Mint 团队披露了正在开发一个名叫“ 网页应用管理器 Web App Manager ”的新工具。

该工具让你能够像使用桌面程序那样以独立窗口运行你最喜爱的网页。

在将网页添加为网页应用程序的时候,你可以给这个程序取名字并添加图标。也可以将它添加到不同的分类,以便在菜单中搜索这个应用。还可以指定用什么浏览器打开应用。启用/禁用导航栏的选项也有。

在 Linux Mint 中添加网页应用程序

例如,将 YouTube 添加为网页应用程序:

Linux Mint 中的网页应用程序

运行 YouTube 程序将通过你所使用的浏览器打开一个独立的页面。

YouTube 网页应用程序

网页应用程序拥有常规桌面应用程序有的大多数功能特点,如使用 Alt+Tab 切换。

使用 Alt+Tab 切换网页应用

甚至还能将应用固定到面板/任务栏方便打开。

添加到面板的 YouTube 网页应用

该管理器目前处于 beta 开发阶段,但已经使用起来已经相对比较稳定了。不过目前还没有面向大众发放,因为翻译工作还未完成。

如果你在使用 Linux Mint 并想尝试这个工具,可在下方下载 beta 版本的 deb 文件:

网页应用的好处

有读者问到这个网页应用管理器与 Chrome 和其他一些网页浏览器中已有的其他类似功能相比的好处。让我来展开一下这个话题。

  • 你可以使用 URL 的特定部分(example.com/tool 而不是 example.com)作为应用程序。
  • 添加自定义图标的可能性对于没有清晰的 favicon 的网站来说非常方便。
  • 你可以使用一个没有任何扩展的轻量级浏览器来打开网页应用,而不是像 Chrome/Chromium 这样的常规网页浏览器。它的速度应该更快。
  • 你的网页应用可以被整合到应用菜单中。你可以像其他应用程序一样搜索它。

网页应用程序在桌面环境的 Linux 中不是什么新事物

网页应用程序不是由 Linux Mint 独创的,而是早在大约 10 年前就有了。

你可能还记得 Ubuntu 在 2013-2014 年向 Unity 桌面中加入了网页应用程序这项特性。

轻量级 Linux 发行版 PeppermintOS 自 2010 年起就将 ICE(网页应用程序工具)列为其主要特色之一。实际上,Linux Mint 的网页应用程序管理器也是基于 ICE 的。

我个人喜欢网页应用程序,因为有用。

你怎么看 Linux Mint 中的网页应用程序呢,这是你期待使用的吗?欢迎在下方评论。


via: https://itsfoss.com/web-app-manager-linux-mint/

作者:Abhishek Prakash 选题:lujun9972 译者:koolape 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

欢迎回到我们为了构建更快网页所写的系列文章。上一篇文章讨论了只通过图片压缩实现这个目标的方法。这个例子从一开始有 1.2MB 的“浏览器脂肪”,然后它减轻到了 488.9KB 的大小。但这还不够快!那么本文继续来给浏览器“减肥”。你可能在这个过程中会认为我们所做的事情有点疯狂,但一旦完成,你就会明白为什么要这么做了。

准备工作

本文再次从对网页的分析开始。使用 Firefox 内置的截图功能来对整个页面进行截图。你还需要用 sudo 来安装 Inkscape:

$ sudo dnf install inkscape

如果你想了解 Inkscape 的用法,Fedora 杂志上有几篇现成的文章。本文仅会介绍一些基本的 SVG 优化方法以供 Web 使用。

分析

我们再来用 getfedora.org 的网页来举例。

Getfedora 的页面,对其中的图片做了标记

这次分析以图形方式完成更好,这也就是它从屏幕截图开始的原因。上面的截图标记了页面中的所有图形元素。Fedora 网站团队已经针对两种情况措施(也有可能是四种,这样更好)来替换图像了。社交媒体的图标变成了字体的字形,而语言选择器变成了 SVG.

我们有几个可以替换的选择:

  • CSS3
  • 字体
  • SVG
  • HTML5 Canvas

HTML5 Canvas

简单来说,HTML5 Canvas 是一种 HTML 元素,它允许你借助脚本语言(通常是 JavaScript)在上面绘图,不过它现在还没有被广泛使用。因为它可以使用脚本语言来绘制,所以这个元素也可以用来做动画。这里有一些使用 HTML Canvas 实现的实例,比如三角形模式动态波浪字体动画。不过,在这种情况下,似乎这也不是最好的选择。

CSS3

使用层叠式样式表,你可以绘制图形,甚至可以让它们动起来。CSS 常被用来绘制按钮等元素。然而,使用 CSS 绘制的更复杂的图形通常只能在技术演示页面中看到。这是因为使用视觉来制作图形依然要比使用代码来的更快一些。

字体

另外一种方式是使用字体来装饰网页,Fontawesome 在这方面很流行。比如,在这个例子中你可以使用字体来替换“Flavor”和“Spin”的图标。这种方法有一个负面影响,但解决起来很容易,我们会在本系列的下一部分中来介绍。

SVG

这种图形格式已经存在了很长时间,而且它总是在浏览器中被使用。有很长一段时间并非所有浏览器都支持它,不过现在这已经成为历史了。所以,本例中图形替换的最佳方法是使用 SVG.

为网页优化 SVG

优化 SVG 以供互联网使用,需要几个步骤。

SVG 是一种 XML 方言。它用节点来描述圆形、矩形或文本路径等组件。每个节点都是一个 XML 元素。为了保证代码简洁,SVG 应该包含尽可能少的元素。

我们选用的 SVG 实例是带有一个咖啡杯的圆形图标。你有三种选项来用 SVG 描述它。

一个圆形元素,上面有一个咖啡杯

<circle
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:9.51950836;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
id="path36"
cx="68.414307"
cy="130.71523"
r="3.7620001" />

一个圆形路径,上面有一个咖啡杯

<path
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z"
id="path20" />

单一路径

<path
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z m -1.21542,0.92656 h 2.40554 c 0.0913,0.21025 0.18256,0.42071 0.27387,0.63097 h 0.47284 v 0.60099 h -0.17984 l -0.1664,1.05989 h 0.24961 l -0.34779,1.96267 -0.21238,-0.003 -0.22326,1.41955 h -2.12492 l -0.22429,-1.41955 -0.22479,0.003 -0.34829,-1.96267 h 0.26304 l -0.16692,-1.05989 h -0.1669 v -0.60099 h 0.44752 c 0.0913,-0.21026 0.18206,-0.42072 0.27336,-0.63097 z m 0.12608,0.19068 c -0.0614,0.14155 -0.12351,0.28323 -0.185,0.42478 h 2.52336 c -0.0614,-0.14155 -0.12248,-0.28323 -0.18397,-0.42478 z m -0.65524,0.63097 v 0.21911 l 0.0594,5.2e-4 h 3.35844 l 0.0724,-5.2e-4 v -0.21911 z m 0.16846,0.41083 0.1669,1.05937 h 2.80603 l 0.16693,-1.05937 -1.57046,0.008 z m -0.061,1.25057 0.27956,1.5782 1.34411,-0.0145 1.34567,0.0145 0.28059,-1.5782 z m 1.62367,1.75441 -1.08519,0.0124 0.19325,1.2299 h 1.79835 l 0.19328,-1.2299 z"
id="path2714"
inkscape:connector-curvature="0" />

你应该可以看出,代码变得越来越复杂,需要更多的字符来描述它。当然,文件中包含更多的字符,就会导致更大的尺寸。

节点清理

如果你在 Inkscape 中打开了实例 SVG 按下 F2,就会激活一个节点工具。你应该看到这样的界面:

Inkscape - 激活节点工具

这个例子中有五个不必要的节点——就是直线中间的那些。要删除它们,你可以使用已激活的节点工具依次选中它们,并按下 Del 键。然后,选中这条线的定义节点,并使用工具栏的工具把它们重新做成角。

Inkscape - 将节点变成角的工具

如果不修复这些角,我们还有方法可以定义这条曲线,这条曲线会被保存,也就会增加文件体积。你可以手动清理这些节点,因为它无法有效的自动完成。现在,你已经为下一阶段做好了准备。

使用“另存为”功能,并选择“优化的 SVG”。这会弹出一个窗口,你可以在里面选择移除或保留哪些成分。

Inkscape - “另存为”“优化的 SVG”

虽然这个 SVG 实例很小,但它还是从 3.2KB 减小到了 920 字节,不到原有的三分之一。

回到 getfedora 的页面:页面主要部分的背景中的灰色沃罗诺伊图,在经过本系列第一篇文章中的优化处理之后,从原先的 211.12 KB 减小到了 164.1 KB.

页面中导出的原始 SVG 有 1.9 MB 大小。经过这些 SVG 优化步骤后,它只有 500.4 KB 了。太大了?好吧,现在的蓝色背景的体积是 564.98 KB。SVG 和 PNG 之间只有很小的差别。

压缩文件

$ ls -lh
insgesamt 928K
-rw-r--r--. 1 user user 161K 19. Feb 19:44 grey-pattern.png
-rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz
-rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg
-rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz

这是我为可视化这个主题所做的一个小测试的输出。你可能应该看到光栅图形——PNG——已经被压缩,不能再被压缩了。而 SVG,它是一个 XML 文件正相反。它是文本文件,所以可被压缩至原来的四分之一不到。因此,现在它的体积要比 PNG 小 50 KB 左右。

现代浏览器可以以原生方式处理压缩文件。所以,许多 Web 服务器都打开了 mod\_deflate (Apache) 和 gzip (Nginx) 模式。这样我们就可以在传输过程中节省空间。你可以在这儿看看你的服务器是不是启用了它。

生产工具

首先,没有人希望每次都要用 Inkscape 来优化 SVG. 你可以在命令行中脱离 GUI 来运行 Inkscape,但你找不到选项来将 Inkscape SVG 转换成优化的 SVG. 用这种方式只能导出光栅图像。但是我们替代品:

  • SVGO (看起来开发过程已经不活跃了)
  • Scour

本例中我们使用 scour 来进行优化。先来安装它:

$ sudo dnf install scour

要想自动优化 SVG 文件,请运行 scour,就像这样:

[user@localhost ]$ scour INPUT.svg OUTPUT.svg -p 3 --create-groups --renderer-workaround --strip-xml-prolog --remove-descriptive-elements --enable-comment-stripping --disable-embed-rasters --no-line-breaks --enable-id-stripping --shorten-ids

这就是第二部分的结尾了。在这部分中你应该学会了如何将光栅图像替换成 SVG,并对它进行优化以供使用。请继续关注 Feroda 杂志,第三篇即将出炉。


via: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/

作者:Sirko Kemter 选题:lujun9972 译者:StdioA 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

很多 Web 开发者都希望做出加载速度很快的网页。在移动设备浏览占比越来越大的背景下,使用响应式设计使得网站在小屏幕下看起来更漂亮只是其中一个方面。Browser Calories 可以展示网页的加载时间 —— 这不单单关系到用户,还会影响到通过加载速度来进行评级的搜索引擎。这个系列的文章介绍了如何使用 Fedora 提供的工具来给网页“瘦身”。

准备工作

在你开始缩减网页之前,你需要明确核心问题所在。为此,你可以使用 Browserdiet. 这是一个浏览器插件,适用于 Firefox、Opera、 Chrome 和其它浏览器。它会对打开的网页进行性能分析,这样你就可以知道应该从哪里入手来缩减网页。

然后,你需要一些用来处理的页面。下面的例子是针对 getferoda.org 的测试截图。一开始,它看起来非常简单,也符合响应式设计。

Browser Diet - getfedora.org 的评分

然而,BroserDiet 的网页分析表明,这个网页需要加载 1.8MB 的文件。所以,我们现在有活干了!

Web 优化

网页中包含 281 KB 的 JavaScript 文件、203 KB 的 CSS 文件,还有 1.2 MB 的图片。我们先从最严重的问题 —— 图片开始入手。为了解决问题,你需要的工具集有 GIMP、ImageMagick 和 optipng. 你可以使用如下命令轻松安装它们:

sudo dnf install gimp imagemagick optipng

比如,我们先拿到这个 6.4 KB 的文件

首先,使用 file 命令来获取这张图片的一些基本信息:

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced

这张只由白色和灰色构成的图片使用 8 位 / RGBA 模式来存储。这种方式并没有那么高效。

使用 GIMP,你可以为这张图片设置一个更合适的颜色模式。在 GIMP 中打开 cinnamon.png。然后,在“图片 > 模式”菜单中将其设置为“灰度模式”。将这张图片以 PNG 格式导出。导出时使用压缩因子 9,导出对话框中的其它配置均使用默认选项。

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced

输出显示,现在这个文件现在处于 8 位 / 灰阶 + aplha 模式。文件大小从 6.4 KB 缩小到了 2.8 KB. 这已经是原来大小的 43.75% 了。但是,我们能做的还有很多!

你可以使用 ImageMagick 工具来查看这张图片的更多信息。

$ identify cinnamon2.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000

它告诉你,这个文件的大小为 2831 字节。我们回到 GIMP,重新导出文件。在导出对话框中,取消存储时间戳和 alpha 通道色值,来让文件更小一点。现在文件输出显示:

$ identify cinnamon.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000

下面,用 optipng 来无损优化你的 PNG 图片。具有相似功能的工具有很多,包括 advdef(这是 advancecomp 的一部分),pngquantpngcrush

对你的文件运行 optipng。 注意,这个操作会覆盖你的原文件:

$ optipng -o7 cinnamon.png
** Processing: cinnamon.png
60x60 pixels, 2x8 bits/pixel, grayscale+alpha
Reducing image to 8 bits/pixel, grayscale
Input IDAT size = 2720 bytes
Input file size = 2812 bytes

Trying:
 zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920

Selecting parameters:
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920

Output IDAT size = 1920 bytes (800 bytes decrease)
Output file size = 2012 bytes (800 bytes = 28.45% decrease)

-o7 选项处理起来最慢,但最终效果最好。于是你又将文件缩小了 800 字节,现在它只有 2012 字节了。

要压缩文件夹下的所有 PNG,可以使用这个命令:

$ optipng -o7 -dir=<directory> *.png

-dir 选项用来指定输出文件夹。如果不加这个选项,optipng 会覆盖原文件。

选择正确的文件格式

当涉及到在互联网中使用的图片时,你可以选择:

JPG-LS 和 JPG 2000 没有得到广泛使用。只有一部分数码相机支持这些格式,所以我们可以忽略它们。aPNG 是动态的 PNG 格式,也没有广泛使用。

可以通过更改压缩率或者使用其它文件格式来节省下更多字节。我们无法在 GIMP 中应用第一种方法,因为现在的图片已经使用了最高的压缩率了。因为我们的图片中不再包含 aplha 通道,你可以使用 JPG 类型来替代 PNG。 现在,使用默认值:90% 质量 —— 你可以将它减小至 85%,但这样会导致可见的叠影。这样又省下一些字节:

$ identify cinnamon.jpg
cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000

只将这张图转成正确的色域,并使用 JPG 作为文件格式,就可以将它从 23 KB 缩小到 12.3 KB,减少了近 50%.

PNG vs JPG: 质量和压缩率

那么,剩下的文件我们要怎么办呢?除了 Fedora “风味”图标和四个特性图标之外,此方法适用于所有其他图片。我们能够处理的图片都有一个白色的背景。

PNG 和 JPG 的一个主要区别在于,JPG 没有 alpha 通道。所以,它没有透明度选项。如果你使用 JPG 并为它添加白色背景,你可以将文件从 40.7 KB 缩小至 28.3 KB.

现在又有了四个可以处理的图片:背景图。对于灰色背景,你可以再次使用灰阶模式。对更大的图片,我们就可以节省下更多的空间。它从 216.2 KB 缩小到了 51 KB —— 基本上只有原图的 25% 了。整体下来,你把这些图片从 481.1 KB 缩小到了 191.5 KB —— 只有一开始的 39.8%.

质量 vs 大小

PNG 和 JPG 的另外一个区别在于质量。PNG 是一种无损压缩光栅图形格式。但是 JPG 虽然使用压缩来缩小体积,可是这会影响到质量。不过,这并不意味着你不应该使用 JPG,只是你需要在文件大小和质量中找到一个平衡。

成就

这就是第一部分的结尾了。在使用上述技术后,得到的结果如下:

你将一开始 1.2 MB 的图片体积缩小到了 488.9 KB. 只需通过 optipng 进行优化,就可以达到之前体积的三分之一。这可能使得页面更快地加载。不过,要是使用蜗牛到超音速来对比,这个速度还没到达赛车的速度呢!

最后,你可以在 Google Insights 中查看结果,例如:

在移动端部分,这个页面的得分提升了 10 分,但它依然处于“中等”水平。对于桌面端,结果看起来完全不同,从 62/100 分提升至了 91/100 分,等级也达到了“好”的水平。如我们之前所说的,这个测试并不意味着我们的工作就做完了。通过参考这些分数可以让你朝着正确的方向前进。请记住,你正在为用户体验来进行优化,而不是搜索引擎。


via: https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/

作者:Sirko Kemter 选题:lujun9972 译者:StdioA 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

一款为了满足高手级用户的需要而定制的全新网页浏览器已然来临—而且它已经可以在Linux上使用了。

Vivaldi就是这个新浏览器的名字,而且它还面向64位Linux、Windows 和 Mac 机发布了技术预览版(注解:无责任测试版)。它是建立在已测试过的Chromium开源框架,Blink和Google的开源V8 JavaScript引擎(以及其他项目)的基础上。

这个世界真的还需要一个浏览器吗?Opera软件前首席执行官Jon S.von Tetzchner的构想——Vivaldi不怎么关注所要,更关注所需。

Vivaldi被制造成带有着偏向于键盘操作的tab键痴迷者所需的那种功能。并没有为那些认为Firefox复杂或是批评Chrome改动了书签按钮的用户而进行修改。

这也并不是什么俗气的营销噱头。尽管它带有‘技术预览版’标签,Vivaldi已经有了明显偏向于高手级用户们的功能。

相当多的人觉得自己被其他软件公司所生产的简化的,配对后发行的产品遗弃了、糊弄了。Vivaldi——即使在这个过渡期的早期——看起来适逢其会,可以打败其他产品。

Vivaldi功能

以下是几个Vivaldi已展示过的关键功能:

快捷命令 (Ctrl + Q)是个内置的HUD应用,它可以让你快速过滤设置、选项和功能,用它打开一个书签或是隐藏状态栏,只需用你的键盘,无需鼠标点击。

标签堆 让你可以通过把多个不同标签分到一组来清理你的工作区,然后可以通过键盘命令或者可预览标签选择器在标签组之间进行切换。

一个可折叠的侧边栏藏有额外功能(就像旧Opera)包括一个(目前还不能工作的)邮箱客户端,链接,书签浏览器和可以让你截屏并做注释的笔记专区。

还提供了一大堆其他的功能,包括设置键盘快捷键,一个可以被设置在浏览器任何一个边(或完全隐藏)的标签栏,隐私选项和一个快速打开文件夹的功能。

Opera二代的印记

把Vivaldi当作Opera post-Presto(Opera拥有版权的旧引擎)的真正继承者并不是什么值得惊奇的事。当Opera(今天也推出了一个小更新)追求一个更轻、更好管理的一套功能时,已经剔除了它很多“高手级用户”功能。

Vivaldi想要捡起Opera曾急于脱手的负担。虽然这么做没有帮它抓住什么预期的市场份额,但是它吸引了高手级用户的眼球。他们大多数无疑已经在使用Linux了。

下载

有兴趣尝尝鲜?完全可以。Vivaldi可以下载到Windows,Mac以及64位Linux版本。不久的将来你还能选择Debian或RPM安装器。

请记住,它还没有完成,而且更多的功能(包括扩展、同步等等)正计划着在将来加入。


via: http://www.omgubuntu.co.uk/2015/01/vivaldi-web-browser-linux-download-power-users

作者:Joey-Elijah Sneddon 译者:H-mudcup 校对:Caroline

本文由 LCTT 原创翻译,Linux中国 荣誉推出

将一个特定页面抓取为一张png图片的最简单的方法是使用CutyCapt,这是一种在Linux下的方便地将HTML网页转化成矢量图形和位图图像格式的命令行工具(比如,SVG, PDF, PS, PNG, JPEG, TIFF, GIF)。CutyCapt内部使用WebKit渲染引擎来导出网页渲染输出到图片文件中。它使用Qt构建,CutyCapt实际上是一个也可以在Windows上使用的跨平台应用。(译注:也有一个基于IE内核的 IECapt 可以作此用途)

在本篇教程中,我会描述如何将一个HTML网页使用CutyCapt转化成png图片

在Linux上安装 CutyCapt

这是在特定Linux发行版上的安装命令。

在Debian, Ubuntu 或者 Linux Mint 安装 CutyCapt

$ sudo apt-get install cutycapt 

在Fedora上安装 CutyCapt

$ sudo yum install subversion qt-devel qtwebkit-devel gcc-c++ make
$ svn co svn://svn.code.sf.net/p/cutycapt/code/ cutycapt
$ cd cutycapt/CutyCapt 

在Fedora上编译前,你需要在源码上打上补丁

使用文本编辑器打开CutyCapt.hpp,并且加入在文件的开头加上下面的两行。

#include 
#include 

最后,如下编译并安装CutyCapt。

$ qmake-qt4
$ make
$ sudo cp CutyCapt /usr/local/bin/cutycapt 

在CentOS 或者 RHEL安装 CutyCapt

首先在你的Linux上启用EPEL仓库。接着和在Fedora上一样使用相同的步骤编译安装。

使用CutyCapt将 HTML 转化成 PNG

将一个HTML页面截图成一个png图片,只要使用下面的格式运行CutyCapt。

$ cutycapt --url=http://www.cnn.com --out=cnn.png

要将HTML页面保存成不同的格式(比如,PDF),只要适当地指定输出文件。

$ cutycapt --url=http://www.cnn.com --out=cnn.pdf

下图显示了CutyCapt命令选项。

在一台不含X的服务器上使用CutyCapt将HTML转换成PNG

虽然CutyCapt是一个命令行工具,但是它需要X服务运行。如果你尝试在不含X服务的机器上运行,你会得到下面这个错误:

cutycapt: cannot connect to X server :0

如果你要不含X的服务器上运行CutyCapt,你可以在服务器上安装Xvfb(轻量级“假的”X11 服务)。这样CutyCapt就不会报错了。

要在Debian, Ubuntu 或者 Linux Mint 上安装Xvfb:

$ sudo apt-get install xvfb 

要在Fedora, CentOS 或者 RHEL 上安装Xvfb:

$ sudo yum install xvfb 

在安装Xvfb之后,接下来像这样运行CutyCapt。

$ xvfb-run --server-args="-screen 0, 1280x1200x24" cutycapt --url=http://www.cnn.com --out=cnn.png 

它首先会运行Xbfb服务,接着使用CutyCapt来抓取网页。因此它可能会花费更长的时间。如果你想要截图多张截图,你可能事先需要将Xvfb作为后台守护进程启动。


via: http://xmodulo.com/2014/02/convert-html-web-page-png-image-linux.html

译者:geekpi 校对:wxy

本文由 LCTT 原创翻译,Linux中国 荣誉推出