澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:Web前端开发Chrome插件,2

2019-07-14 作者:澳门新萄京赌场网址   |   浏览(189)

Web 的现状:网页性能提升指南

2017/09/21 · 基础技术 · 性能

原文出处: Karolina Szczur   译文出处:碧青_Kwok   

互联网发展非常迅速,所以我们创造了Web平台。通常我们会忽视连通性等问题,但用户们却不会视而不见。一瞥万维网的现状,可以发现我们并没有用同情心、变通意识去构建它,更不要说性能了。

所以,今天的Web是什么状态呢?

在这个星球上的74亿人中,只有46%可以上网。平均网络速度上限为7Mb/s。更重要的是,有93%的互联网用户正在通过移动设备进行访问——若不适配移动设备将引起用户反感。通常情况下,数据比我们假设的更昂贵——可能需要1到13小时才能购买500MB的数据包(德国 vs. 巴西;更有趣的统计数据参见 Ben Schwarz 的 Beyond the Bubble: The Real World Performance)。

我们的网站也不是完美的——平均网站是原始Doom游戏的大小(约3 MB)(请注意,为了统计准确,应使用中位数,阅读 Ilya Grigorik 的优秀“平均页面”是一个神话,中档网站大小目前为1.4MB)。图像可以轻松占用1.7 MB的带宽,而JavaScript平均值也有400KB的体积。这不仅是Web平台的问题,原生应用程序可能更糟,还记得为了获取错误修复版本,而下载200MB安装包的情景吗?

技术人员经常会发现自己处于特权状态。随着最新的高端笔记本电脑、手机和快速有线互联网连接,很容易让我们忘记,这些并不是每个人都有的条件(实际上,真的很少)。

如果我们从特权和缺乏同情的角度来构建网络平台,那么将导致排他性的糟糕体验。

考虑到设计和开发的性能,我们怎样才能做得更好?


从案例分析如何优化前端性能

2016/08/30 · 基础技术 · 性能

原文出处: css-tricks   译文出处:王下邀月熊   

在 De Voorhoede工作的日子里,我们一直在追寻为用户构建高性能的前端解决方案。不过并不是每个客户会乐于遵循我们的性能指南,以至于我们必须一遍又一遍地跟他们解释那些保证他们能够战胜竞争对手的性能策略的重要性。最近我们也重构了自己的官方主页,使其能够拥有更快地响应速度与更好地性能表现。
澳门新萄京官方网站 1

网络性能优化实战

2017前端性能优化清单

2017/04/10 · 基础技术 · 性能

原文出处: Xsu Edwan   

你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shakingcode-splitting两个工具?有没有用过Brotli、Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?了解IPv6,HTTP/2和Service Worker这些协议吗?

回想那些年,大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后来做,所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在,技术已经有了翻天覆地的变化。

一个项目的性能是非常重要的,除了要在技术层面上注意,更要在项目的设计之初就开始考虑,这样才可以使性能的各种隐形需求完美的整合到项目中,随着项目一起推进。性能最好具有可量化、可监测以及可改动的特性。网络越来越复杂,对网络的监控也变得越来越难,因为监测的过程会受到包括设备、浏览器、协议、网络类型以及其他技术(CDN,ISP,缓存,代理服务器,防火墙,负载均衡器和服务器对性能的影响都很大)的很大影响。

下文是一份2017年的前端性能优化清单,阐述了作为前端开发人员,为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。

(你也可以下载checklist PDF或者check in Apple Pages。优化万岁!)

越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊。

优化所有资源

理解浏览器如何分析和处理资源,是显著提高性能的最强大但未充分利用的方式之一。事实证明,浏览器在嗅探资源方面非常出色,同时解析并确定其优先级。这里是关键请求的来源。

如果请求中包含用户视口中呈现内容所必需的资源,则该请求至关重要。

对于大多数网站,它将是HTML、必要的CSS、logo、网络字体,也可能是图片。在许多情况下,几十个其他不相关的资源(JavaScript、跟踪代码、广告等)影响了关键请求。幸运的是,我们能够通过仔细挑选重要资源并调整优先级来控制这种行为。

通过``我们可以手动强制调高资源的优先级,确保所需的内容按时呈现。这种技术可以显著改善“交互时间”指标,从而使最佳的用户体验成为可能。

澳门新萄京官方网站 2

关键请求对许多人来说,似乎仍然是一个黑匣子,可共享资料的缺乏并不能改变现状。幸运的是,Ben Schwarz
发表了关于这个问题的非常全面并平易近人的文章——关键请求。另外,请参阅Addy的文章,在Chrome中的预加载、预取和优先级(Preload, Prefetch and Priorities in Chrome)。

澳门新萄京官方网站 3

[在Chrome开发人员工具中启用优先级]

要跟踪在请求优先级处理方面的情况,请使用Lighthouse性能工具和关键请求链审核工具,或查看Chrome开发人员工具中“网络”选项卡下的请求优先级。

性能调优始于设计

在前端项目中,我们常常与产品经理以及UI设计讨论如何在美感与性能之间达到平衡,我们坚信更快地内容呈现是好的用户体验的不可分割的一部分。在我们自己的网站中,我们是以性能优于美感。好的内容、布局、图片与交互都是构成你网站吸引力的不可或缺的部分,不过这些复杂的元素的使用往往也意味着页面加载速度的增加。设计的核心即在于决定我们网站需要呈现哪些内容,往往这里的内容会指图片、字体这样的偏静态的部分,我们首先也从对于静态内容的优化开始。

首屏一秒渲染原则

对于APP里面的H5页面首屏渲染时间不能超过1秒,首屏不要加载太多资源。Google提出了1秒钟完成首屏页面的渲染!

澳门新萄京官方网站 4

  1. 服务器响应必须小于200ms
  2. 尽量少的重定向
  3. 尽量少的第一次渲染请求数
  4. 避免过多阻塞的JS、CSS
  5. 给浏览器留200ms的渲染时间
  6. 优化我们的JS执行效率和渲染时间

正文

微优化是保持性能最好的办法,但是又不能有太过明确的优化目标,因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型,请按照自己舒服的顺序阅读。

Postman - REST Client

通用性能清单

  1. 积极地缓存
  2. 启用压缩
  3. 优化关键资源的优先级
  4. 使用CDN(Content Delivery Networks)

Static Site Generator

为了演示与测试方便,我们基于NodeJS搭建了一个混合使用MarkDown与JSON作为配置的静态网站生成器,其中一个简单的博客类型的网站的配置信息如下:

JavaScript

{ "keywords": ["performance", "critical rendering path", "static site", "..."], "publishDate": "2016-08-12", "authors": ["Declan"] }

1
2
3
4
5
{
  "keywords": ["performance", "critical rendering path", "static site", "..."],
  "publishDate": "2016-08-12",
  "authors": ["Declan"]
}

而其内容为:

JavaScript

# A case study on boosting front-end performance At [De Voorhoede]() we try to boost front-end performance... ## Design for performance In our projects we have daily discussions...

1
2
3
4
# A case study on boosting front-end performance
At [De Voorhoede](https://www.voorhoede.nl/en/) we try to boost front-end performance...
## Design for performance
In our projects we have daily discussions...

下面,我们就这个静态网站,进行一些讨论。

加载优化

请准备好然后定下目标!

Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求。它还支持认证,比如简单的用户名/密码,或者Oauth1.0。Rest Console也是一个不错的选择。

图片优化

图片通常占网页传输的大部分有效载荷,因此图片优化可以带来最大的性能提升。有许多现有的策略和工具可以帮助我们删除额外的字节,但是首先应考虑的问题是:“图片对于我想传达的信息和效果至关重要吗?”。如果可以消除它,不仅可以节省带宽,而且还节省了请求。

在某些情况下,可以通过不同的技术实现类似的结果。比如CSS就具有艺术方向的一系列属性,例如阴影、渐变、动画及形状,允许我们构造适当风格的DOM元素。

Image Delivery

图片是网站的不可或缺的部分,其能够大大提升网站的表现力与视觉效果,而目前平均大小为2406KB的网页中就有1535KB是图片资源,可见图片占据了静态资源多么大的一个比重,这也是我们需要重点优化的部分。
澳门新萄京官方网站 5

减少HTTP请求

尽量减少页面对后台的请求数,能合并的合并。

  • 合并CSS、JavaScript等代码
  • 合并小图片,使用雪碧图

1. 比你最强的竞争对手快20%

根据一个心理学研究,你的网站最少在速度上比别人快20%,才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间,而是开始加载渲染的时间,首次有效渲染时间(例如页面需要加载主要内容的时间),或者交互时间(指的是页面或者应用中主要的页面加载完成,并主备好与用户进行交互的时间)。

在Moto G(或中端三星设备)和Nexus 4(比较主流的设备)上衡量开始渲染时间(用WebPagetest)以及首页有效渲染时间(用Lighthouse),最好是在一个开放的实验室中,使用规范的3G,4G和Wi-Fi链接。

澳门新萄京官方网站 6
Lighthouse,一个Google开发的新的性能审查工具

你可以通过你的分析报告看看你的用户处在哪个阶段,选取其中前90%的用户体验来做测试。接着收集数据,建一个表格,筛去20%的数据并预设一个目标(如:性能预算)。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间,那么上述方法就是合理可行的。

澳门新萄京官方网站 7
由Brad Frost创建的性能分析

和你的同事分享这份清单。首先要确保团队中的每个人都熟悉这份清单。项目中每一个决定都会影响性能,如果前端工程师们都在积极的参与项目概念,UX以及视觉设计的决定,这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念,所以他在这份清单内的顺序有待考虑。

Edit This Cookie

选择正确的格式

如果不能舍弃图片,确定哪种格式更合适就很重要了。首先要在矢量和光栅图形之间做出选择:

  • 矢量图形:分辨率独立,通常体积更小。非常适合logo、icon和简单的图形,包括基本形状(线,多边形,圆和点)。
  • 光栅图形:呈现更详细的信息,比较适合相片。

做出首个决定后,可以选择以下几种格式:JPEG、GIF、PNG–8、PNG–24,或最新的 WEBP 与 JPEG-XR 格式。有了这么多的选项,如何确保我们做出正确的选择?以下是找出最佳格式的基本方法:

  • JPEG:颜色非常丰富的图片(例如照片)
  • PNG–8:色彩相对单一的图片
  • PNG–24:局部透明的图片
  • GIF:动图

Photoshop可以通过各种设置,例如降低质量、降低噪音或色彩数量来优化以上每一种格式。确保设计师了解上述性能实践,并能够使用正确的方式优化相应格式的图片。如果您想了解更多如何处理图片,请阅读 Lara Hogan 的好文 Designing for Performance。

WebP

WebP 是面向现代网页的高压缩低损失的图片格式,通常会比JPEG小25%左右。然后WebP目前被很多人忽视,也不常使用。截止到本文撰写的时候,WebP目前只能够在Chrome, Opera and Android (大概占用户数的 50%)这些浏览器中使用,不过我们还是有办法以JPG/PNG来弥补部分浏览器中不支持WebP的缺憾。

使用响应性网页设计,避免重定向

响应性网页设计是指通过同一网址提供相同HTML代码的网站设计方法,使用户不用考虑所使用的是PC、Pad、APP设备,自动适应所使用的设备屏幕。

2. 反应时间为100毫秒,帧数是每秒60帧

RAIL性能模型会为你提供一个优秀的目标,既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标,页面需要放弃权限,并将权限在50毫秒内交回给主线程。对于像动画一样的高压点,最好的方法就是什么都不做,因为你永远无法达到最小绝对值。
同理,动画的每一帧都需要在16毫秒内完成,这样才能保证每秒60帧(一秒/60=16.6毫秒),如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧,而且你的代码需要在16.6毫秒内完成执行。要注意,上述目标应用于衡量项目的运行性能,而非加载性能。

这是一个强大的cookie管理器。你可以添加、删除、编辑、搜索、保护和阻止cookies。Cookies也是一个非常强大的Cookie工具。

试用新格式

图像格式有几个较新的玩家,即WebP、JPEG 2000 和 JPEG-XR。它们都是由浏览器厂商开发的:Google 的 WebP,Apple 的 JPEG 2000 和 Microsoft 的 JPEG-XR。

WebP 是最受欢迎的竞争者,支持无损和有损压缩,这使得它非常灵活。无损的 WebP 比 PNG 小26%,比 JPG 小25-34%。WebP 有着74%的浏览器支持,它可以安全地进行降级,最多可节省1/3的传输字节。JPG 和 PNG 可以在 Photoshop 和其他图像处理应用程序以及命令行界面(brew install webp)中转换为WebP。

如果你想探索其他格式之间的视觉差异,推荐 Github 上这个很赞的 Demo。

picture标签

使用picture标签可以方便的对于WebP格式不支持的情况下完成替换:

XHTML

<picture> <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)"> <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)"> <source type="image/webp" srcset="image-s.webp"> <source srcset="image-l.jpg" media="(min-width: 640px)"> <source srcset="image-m.jpg" media="(min-width: 320px)"> <source srcset="image-s.jpg"> <img alt="Description of the image" src="image-l.jpg"> </picture>

1
2
3
4
5
6
7
8
9
<picture>
  <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)">
  <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)">
  <source type="image/webp" srcset="image-s.webp">
  <source srcset="image-l.jpg" media="(min-width: 640px)">
  <source srcset="image-m.jpg" media="(min-width: 320px)">
  <source srcset="image-s.jpg">
  <img alt="Description of the image" src="image-l.jpg">
</picture>

这里我们使用了 picturefill by Scott Jehl作为Polyfill库来保证低版本的浏览器中能够支持picture标签,并且保证跨浏览器的功能一致性。并且我们还使用了img标签来保证那些不支持picture的浏览器能够正常工作。

使用浏览器缓存

使用浏览器缓存减少对服务器的请求,所有可缓存静态资源(JS、CSS、图像、媒体文件、PDF文件)都应该在服务器端启用浏览器缓存(缓存一切可以缓存的资源)。注: HTML不是静态资源。

  • 设置Expires报头为将来某个时间,比如设置为1周。则浏览器在这一周内访问将使用已经缓存的资源,不会发出GET请求去网络查看资源是否发生改变。除非用户手动清除了缓存。

澳门新萄京官方网站 8

对于设置了缓存的网络请求我大致画了一个流程图如下:

澳门新萄京官方网站 9

  • 上面提到的使用外联式引用CSS、JavaScript可以启动浏览器的缓存功能

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

纵使这个目标实现起来非常困难,你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000(在网速快的地方)。对于首次有效渲染时间,上限最好是1250毫秒。对于移动端,3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系,但千万别高太多。

Web Developer

用工具和算法进行优化

即使使用了高效的图像格式,也不应跳过后处理优化。这一步很重要。

如果您选择了尺寸相对较小的 SVG,它们也是可以再次压缩的。SVGO 是一个命令行工具,可以通过剥离不必要的元数据来快速优化 SVG。另外,如果您喜欢Web界面或受操作系统的限制,请使用 Jake Archibald 的 SVGOMG。因为 SVG 是基于 XML 的格式,它也可以在服务器端进行 GZIP 压缩。

ImageOptim 是大多其他图像类型的最好选择。包括 pngcrush、pngquant、MozJPEG、Google Zopfli等,它在一个全面的开源包中捆绑了一大堆优秀的工具。ImageOptim 可以以 Mac OS 应用程序、命令行界面和 Sketch 插件形式,轻松地实现到现有的工作流程中。对于那些在 Linux 或 Windows 上的场景,大多数 ImageOptim 的 CLI 都可以在您的平台上使用。

如果您倾向于尝试新兴的编码器,Google 今年早些时候发布了 Guetzli——源自 WebP 和 Zopfli 的开源算法。Guetzli 可以比任何其他可用的压缩方法生成35%更小体积的 JPEG。唯一的缺点是:处理时间慢(CPU 每处理百万像素需要1分钟)。

选择工具时,请确保它们生成所需的结果并适应团队的工作流程。理想情况是,将优化过程自动化,这样就不会产生漏掉的情况。

图片多格式生成

现在我们已经可以通过设置不同的图片尺寸、格式来保证图片的分发优化,不过我们总不希望每次要用一张图片的时候就去生成6个不同的尺寸/实例。我们希望有一种抽象的方法可以帮我们自动完成这一步,为我们自动生成不同的格式/尺寸,然后自动插入合适的picture元素,在我们的静态网站生成器中是这么做的:

  • 首先是要gulp responsive来生成不同尺寸的图片,该插件同样会输出WebP格式的图片
  • 压缩生成好的图片
  • 用户只需要在MarkDown中编写![Description of the image](image.jpg)即可
  • 我们自定义的MarkDown渲染引擎会在处理过程中自动使用picture元素替换这些img标签

启用压缩、合并功能

通过对HTML、CSS、JavaScript等资源进行压缩合并。并在服务器端设置GZip。

  • 文件资源压缩:将多余的空格、换行符、缩进、注释等不必要的字节去掉从而提高下载、解析、执行速度,这一类的在线工具比较多,这里列举几个如下:

    • 在线JS/CSS/HTML压缩
    • Minify your JavaScript
    • YUI Compressor
  • 合并文件:每一个CSS、JS文件都是一个HTTP请求,适当将相关的多份文件合并成一个文件以减少HTTP的请求数。

    • minify
  • 启动网络服务器压缩功能:Apache、Nginx、IIS都支持配置压缩功能。

由于我们后台项目采用了.NET架构,所以我们在此针对IIS进行压缩功能的配置。IIS默认是启动压缩功能的,IIS支持“静态内容压缩”和“动态内容压缩”两种,如下图,

澳门新萄京官方网站 10

另外微软为我们提供了一份很好的文档:Configuring HTTP Compression in IIS 7.aspx)

定义你所需要的环境

安装Web Developer扩展后,会在浏览器的工具栏中添加一个按钮,点击该按钮,会弹出各种Web开发工具。此扩展工具的作者同时也是非常流行的Firefox扩展Web Developer extension for Firefox的作者。。

响应式图片

十年前,我们使用一种分辨率,就可以为所有人服务,但时代变化太快,现今的响应式 Web 已非往日可比。这也是为什么我们必须要特别留心,去精心优化视觉资源,确保它们适应各种视口设备。幸运的是,感谢 Responsive Images 社区小组,我们可以完美使用 picture 元素和 srcset 属性(二者都有85% 支持率)。

SVG Animation

我们的网站中也存在着很多的Icon以及动画性质图片,这里我们是选择SVG作为Icon与Animation的格式,主要考虑有下:

  • SVG是矢量表示,往往比位图文件更小
  • SVG自带响应式功效,能够根据容器大小进行自动缩放,因此我们不需要再为了picture元素生成不同尺寸的图片
  • 最重要的一点是我们可以使用CSS去改变其样式或者添加动画效果,关于这一点可以参考CodePen上的这个演示 点击预览 。
    澳门新萄京官方网站 11

首屏加载、按需加载、预加载

首屏应该尽量控制在1秒之内;对于相当屏幕不用的资源应该放到用户需要的时候再加载(延迟加载、上拉滚屏加载);可感知和不可感知的加载(Loading加载进度条、提前加载下一页)。

4. 选择和安装你的开发环境

不要过多的关注当下最流行的工具,坚持选择适合自己开发环境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者组合起来的工具。只要这个工具运行的速度够快,而且没有给你的维护带来太大问题,这就够了。

澳门新萄京官方网站,JSON Lint

srcset 属性

srcset在分辨率切换方案中效果最佳——即当我们需要根据用户的屏幕密度和大小显示图像时。基于srcsetsize属性中的一组预定义规则,浏览器将选择最佳图片,相应地提供给视口。这项技术可以带来很大的带宽和请求节省,特别是对于移动用户。
澳门新萄京官方网站 12
[srcset 使用示例]

Custom Web Fonts

我们首先回顾下浏览器是如何使用自定义字体的,当浏览器识别到用户在CSS中基于@font-size定义的字体时,会尝试下载该字体文件。而在下载的过程中,浏览器是不会展示该字体所属的文本内容,最终导致了所谓的Flash of Invisible Text现象。现在很多的网站都存在这个问题,这也是导致用户体验差的一个重要原因,即会影响用户最主要的内容浏览这一操作。而我们的优化点即在于首先将字体设置为默认字体,而后在自定义的Web Font下载完毕之后对标准字体再进行替换操作,并且重新渲染整个文本块。而如果自定义的字体下载失败,整个内容还是能保证基本的可读性,不会对用户体验造成毁灭性的打击。
澳门新萄京官方网站 13

首先,我们会为需要使用到的Web Fonts创建最小子集,即只将那些需要使用的字体提取出来,而并不需要让用户下载整个字体集,这里推荐使用Font squirrel webfont generator。另外,我们还需要为字体的下载设置监视器,即保证能够在字体下载完毕之后自动回调,这里我们使用的是fontfaceobserver,它会为页面自动创建一个监视器,在侦测到所有的自定义Web Fonts下载完毕后,会为整个页面添加默认的类名:

CSS

html {font-family: Georgia, serif;} html.fonts-loaded {font-family: Noto, Georgia, serif;}

1
2
html {font-family: Georgia, serif;}
html.fonts-loaded {font-family: Noto, Georgia, serif;}

不过现在CSS的font-display属性也原生提供了我们这种替换功能,更多详情可见font-display属性。

渲染优化

5. 渐进增强(progressive enhancement)

在构建前端结构的时候,应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验,随后再完善那些为高性能浏览器设计的高级特性的相关体验,创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快,那么在光纤高配电脑上它只会运行的更快。

一个在线验证和格式化JSON文件的应用。

picture 元素

picture元素和media属性旨在使艺术设计变得容易。通过为不同情形提供不同图片(通过媒体查询进行测试),无论什么分辨率,我们都能始终将图像中最重要的元素保持在焦点。
澳门新萄京官方网站 14
[picture 元素使用示例]

请务必阅读 Jason Grigsby 的 Responsive Images 101指南,以便对这两种方法进行彻底的阐述。

JS 与 CSS 的懒加载

总的来说我们希望所有的资源能够尽可能快地加载完毕,不过往往为了保证首页加载的速度,我们会考虑将部分非首屏需要的JS/CSS文件进行延迟加载,或者对于重复的视图使用浏览器本地缓存。

HTML中添加Viewport来加速页面的渲染

<meta name="viewport" content="width=device-width, initial-scale=1">

6. Angular,React,Ember等

最好使用那些支持服务器端渲染的框架。在使用某个框架钱,先记录服务器和客户端的引导时间,记得要在移动设备上测试,最终才能使用某个框架(因为面对的是性能问题,如果在使用某个框架后,再做修改是非常困难的)。如果你使用JavaScript框架,要保证你的选择是被广泛使用并且经过考验的。不同框架对性能有着不同程度的影响,同时对应着不同的优化策略,所以最好可以清楚的了解你要用的框架的每个方面。在写网页应用时可以先看看PRPL pattern和application shell architecture。

澳门新萄京官方网站 15
本图描述了PRPL pattern

澳门新萄京官方网站 16
上图是application shell,是一个小型的、由HTML,CSS和JavaScript构成的用户界面

网页截图

使用图片 CDN 进行分发

视觉优化的最后一步是分发。所有资源都可以从使用 内容分发网络 中受益,但还有一些针对图片优化的特定工具,例如 Cloudinary 和 imgx。使用这些服务的好处远远超过了减少服务器上的流量,并显着降低了响应延迟。

CDN可以很好的解决重图片网站的复杂度,包括响应式服务与图片优化。虽然产品不同(价格也是如此),但是大多数方案都是根据设备和浏览器,调整大小、裁剪来确定哪种格式最适合用户。甚至更多——它们可以压缩、检测像素密度、水印、识别面部,并允许后置处理能力。借助这些强大的功能,和将参数附加到URL的能力,以用户为中心的图片服务变得十分容易。

Lazy Load JS

目前来说,我们的网站都是偏向于静态,并不需要太多的JavaScript介入,不过考虑到日后的扩展空间,我们还是构建了一套完整的JS的工作流。众所周知,如果将JS直接放置到head标签中,其会阻塞整个页面的渲染。对于该点,最简单的方式就是将会阻塞渲染的JS脚本移动到页面的尾部,在整个首屏渲染完毕之后再进行加载。另一个常用的手段就是依然保持JS文件位于head标签中,不过为其添加一个defer的属性,这保证了浏览器只会先将该脚本下载下来,然后等到整个页面加载完毕再执行该脚本。
另一个需要注意的是,因为我们并不使用类似于jQuery这样的第三方依赖库,而更多的依赖于浏览器原生的特性,因此我们希望在合适的浏览器内加载合适版本的JS代码,其效果大概如下:

XHTML

<script> // Mustard Cutting if ('querySelector' in document && 'addEventListener' in window) { document.write('<script src="index.js" defer></script>'); } </script>

1
2
3
4
5
6
<script>
// Mustard Cutting
if ('querySelector' in document && 'addEventListener' in window) {
  document.write('<script src="index.js" defer></script>');
}
</script>

减少DOM节点

DOM节点太多会影响页面的渲染,尽量减少DOM节点

7. AMP还是Instant Articles?

根据你整体组织结构的优先顺序和策略,你可以考虑使用Google的AMP或Facebook的Instant Articles。要知道没有这些你也可以达到不错的性能,但是AMP可以提供一个性能不错的免费的内容分发网络框架(CDN),Instant Articles可以在Facebook上促进你的性能。你也可以建立progressive web AMP。

截取网页为图片,支持窗口截图,区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页,新版引进自动截图保存功能。截图后,可以利用图片编辑工具编辑图片,然后将编辑后的图片保存为PNG格式的图片文件,并且提供了高亮工具,涂改工具和文字添加工具。

图像性能清单

  1. 选择正确的图片格式
  2. 尽可能使用矢量图形
  3. 如果变化不明显,则降低图片质量
  4. 使用新格式图片
  5. 使用工具与算法优化
  6. 学习srcsetpicture
  7. 使用图片 CDN

Lazy Load CSS

正如上文所述,我们的网站偏向于静态展示,因此首屏的最大问题就是CSS文件的加载问题。浏览器会在head标签中声明的所有CSS文件下载完毕之前一直处于阻塞状态,这种机制很是明智的,不然的话浏览器在加载多个CSS文件的时候会进行重复的布局与渲染,这更是对于性能的浪费。
为了避免非首屏的CSS文件阻塞页面渲染,我们使用loadCSS这个小的工具库来进行异步的CSS文件加载,它会在CSS文件加载完毕后执行回调。不过,异步加载CSS也会带来一个新的问题,如果我们将所有的CSS全部设置为了异步加载,那么用户会首先看到单纯的HTML页面,这也会给用户不好的体验。那么我们就需要在异步加载与首屏渲染之间找到一个平衡点,即首先加载那些必要的CSS文件。
我们一般将首屏渲染中必要的CSS文件成为Critical CSS,即关键的CSS文件,代指在保证页面的可读性的前提下需要加载的最少的CSS文件数目。Critical CSS的选定会是一个非常耗时的过程,特别是我们网站本身的CSS样式设置也在不停变更,我们不可能完全依赖于人工去提取出关键的CSS文件,这里推荐Critical这个辅助工具能够帮你自动提取压缩Critical CSS。下图的一个对比即是仅加载Critical CSS与加载全部CSS的区别:

澳门新萄京官方网站 17

上图中红色的线,即是所谓的折叠分割点。

动画优化

  • 尽量使用CSS3动画
  • 合理使用requestAnimationFrame动画代替setTimeout
  • 适当使用Canvas动画 5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)

8. 选择适合你的CDN

根据你的动态数据量,可以将一部分内容外包给静态网站生成工具,将它置于CDN上,从中生成一个静态版本,从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台,通过交互组件丰富你的页面(JAMStack)。

注意CDN是否可以很好的处理(或分流)动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化,检查智能HTTP/2传输和缓存服务器(ESI),注意哪些静态或动态的部分处在CDN的边缘(最接近用户的服务器)。

YSlow

Web 字体优化

自定义字体是一项非常强大的设计工具。但是能力伴随着很多责任。现有68%的网站在使用 Web字体,这种类型的资源是性能杀手之一(平均轻松可达100KB,取决于变体和字体的数量)。

即使体积不是最大的问题,不可见文本闪动(FOIT)也算是。当Web字体加载中或加载失败时,会发生FOIT,这会让空白页面,从而导致内容无法访问。首先仔细检查我们是否需要Web字体可能是值得的。如果真是这样,有一些策略可以帮助我们减轻对业务的负面影响。

服务端与缓存

高性能的前端离不开服务端的支持,在我们的实践中也发现不同的服务端配置同样会影响到前端的性能。目前我们主要使用Apache Web Server作为中间件,并且通过HTTPS来安全地传递内容。

CSS优化

开始优化

YSlow可以分析网页,并为改善网页性能提出修改建议,这些功能基于高性能网页的规则集。YSlow可以根据预定义的三个规则集或用户自定义规则集来对网页进行分级。,PageSpeed Insights是谷歌开发的类似功能的插件。

选择正确的格式

有4种网络字体格式:EOT、TTF、WOFF 和最近的 WOFF2。TTF 和 WOFF 被广泛使用,拥有超过90%的浏览器支持率。根据支持情况,最有可能安全地使用WOFF2,并在旧版浏览器降级使用 WOFF。使用WOFF2的优点是,一套定制的预处理和压缩算法(如Brotli),并有大约30%的文件大小减少和改进的解析能力。

@font-face中定义网页字体的来源时,请使用format()提示来指定应使用哪种格式。

如果您使用 Google Fonts 或 Typekit 来提供字体,这两种工具都实施了一些策略来优化其性能。Typekit 现在可以异步地为所有套件提供服务,防止 FOIT 以及允许其JavaScript套件代码的10天延长缓存期限(而不是默认10分钟)。Google Fonts 可以根据用户设备自动提供最小的文件。

Configuration

我们首先对于合适的服务端配置做了些调研,这里推荐是使用H5BP Boilerplate Apache Configuration作为配置模板,它是个不错的兼顾了性能与安全性的配置建议。同样地它也提供了面向其他服务端环境的配置。我们对于大部分的HTML、CSS以及JavaScript都开启了GZip压缩选项,并且对于大部分的资源都设置了缓存策略,详见下文的File Level Caching章节。

避免内联式和嵌入式代码(CSS)

  • 避免在HTML标签中写style属性(内联式)
  • 避免在<style>标签中定义CSS(嵌入式)

9. 直接确定优化顺序

首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件(JavaScript,图片,字体,第三方script文件以及页面中重要的模块,例如轮播,复杂信息图标和多媒体内容),并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容,哪些部分属于为高性能浏览器设计的升级体验,哪些是附加内容(那些不必要或者可以被延时加载的部分,例如字体,不必要的样式,轮播组件,播放器,社交网站入口,很大的图片)。更详细的细节请参考文章”Improving Smashing Magazine’s Performance‘’。

ColorZilla

审核字体范围

无论是否自主托管,字体数量、字体体积和样式,都将显著影响您的性能预算。

理想情况下,我们只需要一种包括常规和粗体的字体。如果您不确定如何选择字体范围,请参考 Lara Hogan 的 Weighing Aesthetics and Performance。

HTTPS

使用HTTPS可以保证站点的安全性,但是也会影响到你网站的性能表现,性能损耗主要发生在建立SSL握手协议的时候,这会导致很多的延迟,不过我们同样可以通过某些设置来进行优化。

  • 设置HTTP Strict Transport Security请求头可以让服务端告诉浏览器其只允许通过HTTPS进行交互,这就避免了浏览器从HTTP再重定向到HTTPS的时间消耗。
  • 设置TLS false start允许客户端在第一轮TLS中就能够立刻传递加密数据。握手协议余下的操作,譬如确认没有人进行中间人监听可以同步进行,这一点也能节约部分时间。
  • 设置TLS Session Resumption,当浏览器与服务端曾经通过TLS进行过通信,那么浏览器会自动记录下Session Identifier,当下次需要重新建立连接的时候,其可以复用该Identifier,从而解决了一轮的时间。

这里推荐扩展阅读下Mythbusting HTTPS: Squashing security’s urban legends by Emily Stark。

使用<link>将CSS写在头部<head>标签中,而不要使用@import

10. 使用符合标准的技术

使用符合标准的技术向过时的浏览器提供核心体验,向老式浏览器提供增强体验, 同时对所加载的内容要有严格的把控。即首要加载核心体验部分,将增强部分放在DomContentLoaded,把额外内容发在load事件中。

以前我们可以通过浏览器的版本推断出设备的性能,但现在我们已经无法推测了。因为现在市场上很多廉价的安卓手机都不考虑内存限制和CPU性能,直接使用高版本的Chrome浏览器。一定要注意,在我们没有其他选择的时候,我们选择的技术同时可能成为我们的限制。

可以从页面上任何一点获取颜色,维护获取历史等。

使用Unicode范围子集

Unicode范围子集允许将大字体分割成较小的集合。这是一个相对先进的策略,特别是在处理亚洲语言的时候,可能会带来显着的节省(你知道中文字体有平均数为 20,000 个字形吗?)。第一步是将字体限制为必要的语言集,例如拉丁语,希腊语或西里尔语。如果仅使用Web字体做Logo类使用,则应使用Unicode范围描述符,来选择特定字符。

Filament Group 发布了一个开源命令行工具,可以根据文件或URL生成必要字形列表的 glyph hanger。或者,基于 Web 的 Font Squirrel Web Font Generator 提供高级子集和优化选项。如果在字体选择器界面中内置了使用Google Fonts 或 Typekit 选择语言子集,则使基本子集更容易。

Cookies

我们并没有使用某个服务端框架,而是直接使用了静态的Apache Web Server,不过Apache Web Server也是能够读取Cookie并且进行些简单的操作。譬如在下面这个例子中我们将CSS缓存信息存放在了Cookie中,然后交付Apache进行判断是否需要重复加载CSS文件:

XHTML

<!-- #if expr="($HTTP_COOKIE!=/css-loaded/) || ($HTTP_COOKIE=/.*css-loaded=([^;] );?.*/ && ${1} != '0d82f.css' )"--> <noscript><link rel="stylesheet" href="0d82f.css"></noscript> <script> (function() { function loadCSS(url) {...} function onloadCSS(stylesheet, callback) {...} function setCookie(name, value, expInDays) {...} var stylesheet = loadCSS('0d82f.css'); onloadCSS(stylesheet, function() { setCookie('css-loaded', '0d82f', 100); }); }()); </script> <style>/* Critical CSS here */</style> <!-- #else --> <link rel="stylesheet" href="0d82f.css"> <!-- #endif -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- #if expr="($HTTP_COOKIE!=/css-loaded/) || ($HTTP_COOKIE=/.*css-loaded=([^;] );?.*/ && ${1} != '0d82f.css' )"-->
 
<noscript><link rel="stylesheet" href="0d82f.css"></noscript>
<script>
(function() {
  function loadCSS(url) {...}
  function onloadCSS(stylesheet, callback) {...}
  function setCookie(name, value, expInDays) {...}
 
  var stylesheet = loadCSS('0d82f.css');
  onloadCSS(stylesheet, function() {
    setCookie('css-loaded', '0d82f', 100);
  });
}());
</script>
 
<style>/* Critical CSS here */</style>
 
<!-- #else -->
<link rel="stylesheet" href="0d82f.css">
<!-- #endif -->

这里Apache Server中的逻辑控制代码就是有点类似于注释形式的<!-- #,其主要包含以下步骤:

  • $HTTP_COOKIE!=/css-loaded/ 检测是否有设置过CSS缓存相关的Cookie
  • $HTTP_COOKIE=/.*css-loaded=([^;] );?.*/ && ${1} != '0d82f.css'检测缓存的CSS版本是否为当前版本
  • If <!-- #if expr="..." --> 值为true 我们便能假设该用户是第一次访问该站点
  • 如果用户是首次浏览,我们添加了一个<noscript>标签,里面还包含了一个阻塞型的<link rel="stylesheet">标签。添加该标签的意义在于我们在下面是使用JavaScript来异步加载CSS文件,而在用户禁止JavaScript的情况下也能保证可以通过该标签来正常加载CSS文件。
  • <!-- #else --> 表达式在用户二次访问该页面时,我们可以认为CSS文件已经被加载过了,因此可以直接从本地缓存中加载而不需要重复请求。

上述策略同样可以应用于Web Fonts的加载,最终的Cookie如下所示:
澳门新萄京官方网站 18

合并CSS以减少文件个数** 每一个文件就是一个HTTP请求

11. 考虑微优化和渐进启动

在一些应用中,可以在渲染页面前先初始化应用。最好先显示框架,而不是一个进度条或指示器。使用可以加速初始渲染时间的模块或技术(例如tree-shaking和code-splitting),因为大部分性能问题来自于应用引导程序的初始分析时间。还可以在服务器上提前编译,从而减轻部分客户端的渲染过程,从而快速输出结果。最后,考虑使用Optimize.js来加快初始加载速度,它的原理是包装优先级高的调用函数(虽然现在已经没什么必要了)。

澳门新萄京官方网站 19
渐进启动指的是使用服务器端渲染,从而快速得到首次有效渲染,这个渲染过程也包括小部分的JavaScript文件,目的是使交互时间尽可能的接近首次有效渲染时间。

到底采用客户端渲染还是服务器端渲染?不论哪种做法,我们的目标都是建立渐进启动:使用服务器端渲染可以得到很短的首次有效渲染时间,这个渲染过程也包括小部分的JavaScript文件,目的是使交互时间尽可能的接近首次有效渲染时间。接下来,尽可能的增加一些应用的非必要功能。不幸的是,正如Paul Lewis所说,框架基本上对开发者是没有优先级的概念的,因此渐进启动在很多库和框架上是很难实施的。如果你有时间的话,还是考虑使用策略去优化你的性能吧。

Measure It!

建立字体加载策略

字体是阻塞渲染的——因为浏览器必须首先构建 DOM 和 CSSOM;在使用与现有节点相匹配的CSS选择器之前,浏览器并不会下载Web字体。这种行为会明显延迟文本呈现,通常会导致前面提到的不可见文本闪动(FOIT)。在较慢的网络和移动设备上,FOIT会更加显着。

实施字体加载策略,可防止用户无法访问您的内容。通常,选择无样式文本闪动(FOUT)是最简单和最有效的解决方案。

font-display是提供非 JavaScript 依赖解决方案的新 CSS 属性。不幸的是,它仅有部分支持(Chrome 和 Opera),目前正在 Firefox 和 WebKit 中开发。尽管如此,它可以并且应该与其他字体加载机制结合使用。
澳门新萄京官方网站 20
[font-display 属性实践]

幸运的是,Typekit 的 Web Font Loader 和 Bram Stein 的 Font Face Observer 可以帮助管理字体加载行为。此外,网页字体性能专家 Zach Leatherman 发布了字体加载策略综合指南,这将有助于为您的项目选择正确的方法。

File Level Caching

在上文可以发现,我们严重依赖于浏览器缓存来处理用户重复访问时资源加载的问题,理想情况下我们肯定希望能够永久地缓存CSS、JS、Fonts以及图片文件,然后在某个文件发生变化的时候将缓存设置为失效。这里我们设置了以https://www.voorhoede.nl/assets/css/main.css?v=1.0.4形式,即在请求路径上加上版本号的方式进行缓存。不过这种方式的缺陷在于如果我们更换了资源文件的存放地址,那么所有的缓存也就自然失效了。这里我们使用了gulp-rev以及gulp-rev-replace来为文件添加Hash值,从而保证了仅当文件内容发生变化的时候文件请求路径才会发生改变,即将每个文件的缓存验证独立开来。

避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染,请避免CSS表达式

12. HTTP的缓存头使用的合理吗?

仔细检查一下例如expirescache-controlmax-age以及其他HTTP缓存头是否被正确的使用。一般来说,资源不论在短时间(如果它会被频繁改动)还是不确定的时间内(如果它是静态的)都是可缓存的——你大可在需要的时候在URL中成改版本。

如果可能,使用为指纹静态资源设计的Cache-control:immutable,从而避免二次验证(2016年12月,只有FireFox在https://处理中支持)。你可以使用,Heroku的primer on HTTP caching headers,Jake Archibald的 ”Caching Best Practices”,还有IIya Grigorik的HTTP caching primer作为指导。

MeasureIt! 给你测量一个网站中的任何元素的尺寸。Page Ruler也是一个不错的选择。

字体性能清单

  1. 选择正确的格式
  2. 审核字体范围
  3. 使用Unicode范围子集
  4. 建立字体加载策略

Result

上面我们介绍了很多的优化手段,这里我们以实验的形式来对优化的结果与效果进行分析。我们可以用类似于PageSpeed Insights或者WebPagetest来进行性能测试或者网络分析。我觉得最好的测试你站点渲染性能的方式就是在限流的情况下观察页面的呈现效果,Google Chrome内置了限流的功能:
澳门新萄京官方网站 21
这里我们将我们的网络环境设置为了50KB/S的GPRS网络环境,我们总共花费了2.27秒完成了首屏渲染。上图中黄线左侧的时间即指明了从HTML文件开始下载到下载完成所耗费的时间,该HTML文件中已经包含了关键的CSS代码,因此整个页面已经保证了基本的可用性与可交互型。而剩下的比较大的资源都会进行延时加载,这正是我们想要达到的目标。我们也可以使用PageSpeed来测试下网站的性能,可以看出我们得分很不错:
澳门新萄京官方网站 22
而在WebPagetest中,我们看出了如下的结果:
澳门新萄京官方网站 23

移除空的CSS规则

空的CSS规则增加CSS文件的大小,影响CSS树的执行,需要移除空的CSS规则

13. 减少使用第三方库,加载JavaScript异步操作

当用户请求页面时,浏览器会抓取HTML同时生成DOM,然后抓取CSS并建立CSS对象模型,最后通过匹配DOM和CSS对象生成渲染树。在需要处理的JavaScript文件被解决之前,浏览器不会开始对页面进行渲染。作为开发者,我们要明确的告诉浏览器不要等待,直接开始渲染。具体方法是使用HTML中的deferasync两个属性。

事实上,defer更好一些(因为对于IE9及以下用户对于IE9及以下用户,很有可能会中断脚本)。同时,减少第三方库和脚本的使用,尤其是社交网站的分享按键和嵌入(比如地图)。你可以使用静态的社交网站分享按键(例如SSBG的)和指向交互地图的静态链接去代替他们。

JavaScript Errors Notifier

JavaScript 优化

目前,JavaScript 的平均大小为446 KB,已经使其成为第二大的资源类型(第一为图片)。

我们可能没有意识到,我们所爱的JavaScript隐藏着更加严峻的性能瓶颈。

Roadmap

优化之路漫漫,永无止境,我们在未来也会关注以下几个方面:

  • HTTP/2:我们目前已经开始尝试使用HTTP/2,而本篇文章中提到的很多的优化的要点都是面向HTTP/1.1的。简言之,HTTP/1.1诞生之初还是处于Table布局与行内样式流行的时代,它并没有考虑到现在所面对的2.6MB大小,包含200多个网络请求的页面。为了弥合这老的协议的缺陷,我们不得不连接JS与CSS文件、使用行内样式、对于小图片使用Data URL等等。这些操作都是为了节约请求次数,而HTTP/2中允许在同一个TCP请求中进行多个并发的请求,这样就会允许我们不需要再去进行大量的文件合并操作。
  • Service Workers:这是现代浏览器提供的后台工作线程,可以允许我们为网站添加譬如离线支持、推送消息、后台同步等等很多复杂的操作。
  • CDN:目前我们是自己维护网站,而在真实的应用场景下可以考虑使用CDN服务来减少服务端与客户端之间的物理距离,从而减少传输时延。

    2 赞 5 收藏 评论

澳门新萄京官方网站 24

尽量少用Web字体

Web字体需要下载,解析,重绘当面页面

14. 图片是否被正确优化?

尽可能的使用带有srcsetsizes还有元素的[响应式图片](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/)。你也可以利用元素的WebP格式,用JPEG格式作为替补(参见Andreas Bovens的code snippet)或是使用内容协商(使用接受头)。Sketch原本就支持WebP,WebP图片可以直接被Photoshop的WebP plugin导出。当然也有很多其他方法。

澳门新萄京官方网站 25
响应图片断点生成器可自动处理图片

你也可以使用客户端提示,现在浏览器也可以做到。在用来生成响应图片的源文件过少时,使用响应图片断点生成器或类似Cloudinary的服务自动的优化图片。在很多案例中,单独使用sresetsizes都带来了很大的收益。在本网站上,我们给文件添加-opt后缀——例如brotli-compression-opt.png;这样团队的每一个人就知道这些带着后最的图片是被优化过的。

安装该扩展后,会在Chrome地址栏中以图标形式提示JavaScript错误,因为Chrome默认只有打开console才会显示错误。

监控JavaScript的流量

优化交付只是解决网页膨胀的第一步。JavaScript 下载后,必须由浏览器进行解析、编译和运行。快速浏览一些流行的网站,显而易见的是,gzip 压缩的 JS 在解压之后至少变大三倍。事实上,我们正在发送一大堆代码。
澳门新萄京官方网站 26
1MB JavaScript 在不同设备上的解析时间。图片由 Addy Osmani 和他的 JavaScript Start-up Performance 文章提供。

分析解析和编译时间,对于理解应用程序是否准备好进行交互至关重要。这些耗时根据用户设备的硬件能力而异。解析和编译会很容易在低端手机上高出2-5倍。Addy的研究证实,在常规手机上,一个应用程序将需要16秒才能达到交互式状态,而在桌面电脑上为8秒。分析这些指标至关重要,幸运的是,我们可以通过 Chrome DevTools 来完成。
澳门新萄京官方网站 27
[在 Chrome 开发工具中查看解析和编译过程]

请务必阅读 Addy Osmani 对 JavaScript 启动性能的详细说明。

不声明过多的Font-Size

过多的Font-Size引发CSS树的效率

15. 图片的进一步优化

当你在编写登陆界面的时候,发现页面上的图片加载的特别快,这时你需要确认一下JPEG格式文件是否已经通过mozJPEG(它可以操作扫描等级从而提高渲染时间)优化和压缩,PNG格式对应Pingo,GIF需要用到Lossy GIF,SVG要使用SVGOMG。对图片不重要的部分进行模糊处理(使用高斯模糊过滤器处理他们),从而减少文件大小,最后你可能还要去彩色化使图片变成黑白,从而减少更多的容量。对于背景图片,使用Photoshop保持0到10%的质量输出是绝对可以接受的。

如果你还觉得不够,那你可以通过多重背景图片技术来提高图片的感知性能。

Window Resizer

摆脱不必要的依赖

现代软件包管理器的工作方式,可以轻而易举地掩盖依赖关系的数量和大小。webpack-bundle-analyzer 和 Bundle Buddy 是很好的可视化工具,帮助识别出代码重复、最大性能问题和过时的、不必要的依赖。

图 webpack bundle analyzer 实践(译者注:原gif太大,只能用外链了)

通过 VS Code 和 Atom 中的Import Cost扩展,我们可以使导入依赖成本更加明显。

图 VS Code Import Code扩展

值为0时不需要任何单位

16. 网页字体优化了吗?

你用来修饰网页字体的服务很有可能毫无用处,包括字形和额外的特性。如果你在使用开源的字体,尝试用字体库中某一个小的子集或是自己归类一个小的子集从而压缩文件大小(例如通过一些特殊的注音符号引用Latin)。WOFF2 support是个非常不错的选择,如果浏览器不支持,那你可以将WOFF和OTF作为备用。你也可以从Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”一文中选择一个合适的策略,然后使用服务器来缓存字体。如果想要快速入门,Pixel Ambacht的教程与案例会让你的字体变得尽然有序。

澳门新萄京官方网站 28
Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”提供了一打可以让字体传输变得更好的选项

如果你用的是第三方服务器主机,没办法自己在服务器上对字体进行操作,一定看看Web Font Loader。FOUT is better than FOIT中提到,在备选情况下立即渲染文本,并且异步加载字体——你也可以使用loadCSS实现这个。你可能也会避免本地OS上安装字体。

此扩展可以调整浏览器窗口的大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同的屏幕分辨率下测试网站布局。

实现代码分割

只要有可能,我们就应只提供用户体验所必需的资源。向用户发送一个完整的
bundle.js 文件,包括他们可能永远看不到的交互效果处理代码,并不太理想(假设在访问着陆页时,去下载处理整个应用程序的 JavaScript)。同样,我们不应普遍提供针对特定浏览器或用户代理的代码。

Webpack,最受欢迎的模块打包器之一,天生具备代码分割支持。最简单的代码分割可以按页面实现(如用于着陆页的home.js,联系人页面的contact.js等),Webpack 还提供了一些高级策略,如动态导入及延迟加载,值得一看。

JavaScript执行优化

17. 快速执行关键部分的CSS

为了确保浏览器尽可能快的渲染你的页面,先收集页面首次可见部分的CSS文件(也叫决定性CSS或上半版CSS)进行渲染,然后将它加入页面的部分,从而避免重复操作。因为慢启动阶段对交换包大小的限制,你关键CSS文件的大小也被限制在14KB左右。如果高于这个值,浏览器需要重复一些步骤来获取更多的样式。关键CSS是允许你这样做的。可能对每个模板都需要这个操作。如果可能,考虑一下用Fiament Group用的条件内敛方法。

通过HTTP/2,关键CSS可以单独存为CSS文件,通过服务器传输,而且可以避免HTML膨胀。服务器传输缺乏连续支持,并且存在一些超高速缓存的问题(Hooman Beheshti演示的前144页)。事实上,这样会导致网络缓冲区膨胀。因为TCP的慢启动,服务器传输在稳定的连接下会更有效率。所以你可能需要建立带有缓存的HTTP/2服务器传输机制。但请记住,新的cache-digest规则会否定手动建立的需要缓存的服务器的请求。

Firebug Lite

考虑框架选择

JavaScript 前端框架日新月异。根据2016年的 JavaScript 调查,React 是最受欢迎的选择。仔细审视架构选择,可能会发现,您可以使用更为轻量级的替代方案,例如 Preact(请注意,Preact 并不是一个完整的 React 重新实现,只是一个高性能,功能更轻的虚拟 DOM 库)。类似地,我们可以将较大的库更换成更小的版本——moment.js换成date-fns(或者在特定情况,删除moment.js中未使用的 locales)。

在开始一个新项目之前,有必要确定什么样的功能是必需的,并为您的需求和目标选择最具性能的框架。有时这可能意味着选择写更多的原生 JavaScript。

避免内联式和嵌入式代码(JS)

  • 避免在HTML标签中写类似于onclick这类属性(内联式)
  • 尽量避免使用<script>标签定义JS代码(嵌入式)

18. 通过tree-shaking和code-splitting减少净负载

Tree-shaking是通过保留那些在项目过程中真正需要的代码从而清理你的构建过程的一种方式。你可以用Webpack 2来提出那些没用的住配置文件,用UnCSS或Helium从CSS中取出不需要的样式。同理,也可以考虑学习一下如何编写高效的CSS选择器,以及如何避免膨胀和高费的样式。

Code-splitting是另一个Webpack特性,它可以根据按需加载的块将你的代码分开。只要你在代码中定义了分离点,Webpack便会处理好相关的输出文件。它基本上能保证你初始下载的内容很小,而且在需求被添加时按需请求代码。

Rollup所展示的结果要比Browserify配置文件所显示的好得多。所以当我们想使用类似工具的时候,或许应该看看Rollupify,它将ECMAScript2015模块变成了一个更大的CommonJS模块——因为小模块没准有出乎意料的高性能成本,这源自于你对打包工具模块系统的选择。

Firebug的精简版允许您检查的HTML,CSS和JavaScript代码,生活在任何页面。 你也可以编辑代码,立即测试新的变化。 这是一个开发者最喜欢的Firefox扩展Firebug的精简版。

JavaScript 性能清单

  1. 监控 JavaScript 流量
  2. 摆脱不必要的依赖
  3. 实现代码分割
  4. 考虑框架选择

JavaScript写在尾部或异步

  • 优先考虑在<script>标签中使用src属性引入外部JS文件
  • 能够异步延迟加载的JS尽量放到首屏加载完成之后加载,避免因为要下载、解析、执行再去渲染HTML造成页面的阻塞:
    <script async src="async.js">

// 如何异步加载多个第三方JS组件
// https://gist.github.com/zenorocha/5161860
(function() {
   var script,
       scripts = document.getElementsByTagName('script')[0];

    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }

    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');
}());

19. 提升渲染性能

使用类似CSS containment的方法对高消耗组建进行隔离,从而限制浏览器样式的范围,可以作用在为无canvas的浏览工作的布局和装饰工作中,或是用在第三方工具上。要确保页面滚动和出现动画效果时没有延迟,别忘了之前提到过的每秒60帧的原则。如果没办法做到,那就尽可能保证每秒帧数的大致范围在15到60帧。使用CSS中的will-change通知浏览器哪些元素和属性发生了变化。

也记得要衡量渲染执行中的性能(可以用DevTools)。可以参照Udacity上Paul Lewis的免费课程——浏览器渲染优化,作为入门。还有一篇Sergey Chikuyonok的文章讲了如何正确的用GPU动画。

JQuery 扩展

性能追踪,前进之路

我们已经讨论了一些策略,在大多数情况下会对我们正在建立的产品用户体验产生积极的变化。性能可能是一个棘手的问题,有必要长期地跟踪我们调整的结果。

减少重绘(外观发生变化)和回流(布局发生变化

避免不必要的DOM操作,尽量改变Class而不是Style

20. 预热网络连接,加快传输速度

使用页面框架,对高消耗组建延迟加载(字体,JS文件,循环播放,视频和内嵌框架)。使用资源提示来节省在dns-prefetch(指的是在后台执行DNS检索),preconnect(指要求浏览器在后台进行握手链接(DNS,TCP,TLS)),prerender(指要求浏览器在后台对特定页面进行渲染),preload(指的是提前取出暂不执行的源文件)。根据你浏览器的支持情况,尽量使用preconnect来代替dns-prefetch,而且在使用prefetchprerender要特别小心——后者(prerender)只有在你非常确信用户下一步操作的情况下再去使用(比如购买流程中)。

jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。

以用户为中心的性能指标

卓越的性能指标,旨在尽可能接近描绘用户体验。以往的onLoadonContentLoadedSpeedIndex对「用户多快能与页面交互」给出的信息非常少。当聚焦到传输资源时,量化地感知性能十分困难。好在,有一些时间可以全面地描述内容的可视性和互动性。

这些指标是首次渲染(First Paint),首次有意义渲染(First Meaningful Paint),视觉完整(Visually Complete)和可交互时间(Time to Interactive)。

澳门新萄京官方网站 29

  • 首次渲染:浏览器从白色屏幕到第一次视觉呈现的变化。
  • 首次有意义渲染:文字,图像和主要内容都已可见。
  • 视觉完整:视口中的所有内容都可见。
  • 可交互时间:视口中的所有内容都是可见的,可以与之进行交互(JavaScript 主线程停止活动)。

这些时间直接对应于用户的实际体验,因此可以作为重点进行追踪。如果可能,将它们记录全部,否则选择一两个来更好地监控性能。其他指标也需要留意,特别是我们发送的字节数(优化和解压缩)。

缓存DOM选择和列表.length

每次DOM选择和列表length都要计算,特别是在for循环里面使用时,请用一个变量保存这个值以减少每次for循环时的重新计算

HTTP/2

Pretty Beautiful Javascript

设置性能预算

所有这些上报数字可能会很快变得混乱和不易理解。没有可操作的目标和对象,很容易迷失我们最初的目的。几年前,Tim Kadlec 写过关于性能预算的概念。

遗憾的是,并没有一个万能的神奇公式。性能预算通常归结为竞争分析和产品目标,而这是每个业务所各异的。

设定预算时,重要的是要达到明显的差异,通常是至少改善20%。实践和迭代您的预算,利用 Lara Hogan 的方法新设计与性能预算作为参考。

试用性能预算计算器或Chrome扩展浏览器卡路里,以帮助创建预算。

尽量使用ID选择器

ID选择器是最快的

21. 准备好使用HTTP/2

Google开始向着更安全网页的方向努力,并且将所有Chrome上的HTTP网页定义为“不安全”时,你或许应该考虑是继续使用HTTP/1.1,还是将目光转向HTTP/2环境。虽然初期投入比较大,但是使用HTTP/是大趋势,而且在熟练掌握之后,你可以使用service worker和服务器推送技术让行性能再提升一大截。

澳门新萄京官方网站 30
现在,Google计划把所有HTTP页面标记为不安全,并且将HTTP安全指示器设置为与Chrome用来拦截HTTPS的红色三角相同的图标。

使用HTTP/2的环境的缺点在于你要转移到HTTPS上,并且根据你HTTP/1.1用户的数量(主要指使用过时操作系统和过时浏览器的用户),你需要适应不同的建构过程,才能发送不同的建构。注意:不论是迁移还是新的构建过程都可能非常棘手而且耗时很多。

该扩展可以使Javascript文件更容易阅读。其整合了Beautifier和Prettify的功能,可以为代码添加语法高亮。用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能,也就是点击"{ }"图标。

持续监控

监控性能不应该是手动的。市面上有很多强大的工具,还可以提供全面的报告。

Google Lighthouse 是一个可以审核性能、可访问性、渐进式网络应用程序等的开源项目。您可以在命令行中或直接在 Chrome Developer Tools 中使用Lighthouse。
澳门新萄京官方网站 31
[Lighthouse 运行一次性能审查]

对于持续的追踪,选择选择 Calibre,它可以提供性能预算、设备仿真、分布式监控和许多其他功能,无需我们仔细构建自己的性能套件即可获得。
澳门新萄京官方网站 32
[Calibre 报表]

无论您在追踪什么,请确保使整个团队或组织能够透明地访问数据。

性能是一项分担责任,远远超过开发人员团队——我们都应对所创建的用户体验负责,不管是什么角色或职级。

倡导速度和建立协作流程,以便在产品决策或设计早期阶段,尽早暴露可能遇到的瓶颈,是非常重要的。

图片优化

22. 适当部署HTTP/2

重申,使用HTTP/2协议之前,你需要彻底排查目前为止你所使用协议的情况。你需要在打包组建和同时加载很多小组间之间找到平衡。

一方面,你可能想要避免将很多资源链式链接,与其将你全部的界面分割成许多小模块,不如将他们压缩使之成为建构过程的一部分,之后给它们赋予可检索的信息并加载它们。这样的话,对一个文件将不再需要重新下载整个样式清单或JavaScript文件。

另一方面,封装是很有必要的,因为一次向浏览器发送太多JavaScript文件会出问题。首先,压缩会造成损坏。得益于dictionary reuse,压缩大文件不会对文件造成损害,压缩小文件则不然。确实有方法可以解决这个问题,但这不是本文讨论的范畴。其次,浏览器还没有优化到可以对类似工作流进行优化。例如,Chrome会引发进程间通信(IPCs),这些通信的数量与资源的数量成正比,而这成百上千个资源将会消耗大量的浏览器的执行时间。

澳门新萄京官方网站 33
Chrome的Jake Archibald建议,为了用HTTP/2达到最好的效果,考虑一下逐步加载CSS文件

当然你可以考虑逐步加载CSS文件。很显然,你这样做对HTTP/1.1的用户非常不利,所以你可能需要根据不同的浏览器建立多个版本来应对你的调度过程,这样就会使过程略微复杂。你也可以避免HTTP/2连接的合并,同时受益于HTTP/2来使用域名碎片,但是实现起来有些困难。

我们到底应该做什么呢?如果你粗略的用过HTTP/2,似乎成功的发送过10个左右的包(在老是浏览器上运行的也不错)。那你就能着手开始试验并且为你的网站找到平衡点。

WhatFont

建立性能意识和同情心

关心性能不仅仅是一个业务目标(但是如果您需要通过销售统计数据来进行销售,那么可以通过PWA统计)。这是关于基本的同情和用户体验放在第一位。

澳门新萄京官方网站:Web前端开发Chrome插件,2017前端性能优化清单。作为技术专家,我们的责任是,不要让用户的注意力和时间放在等待页面上,而已可以更开心地花费在其他地方。我们的目标是建立意识到时间和人们关注的工具。

提倡性能意识应该是每个人的目标。让我们抱着性能和同情心,为大家建立一个更好、更有意义的未来吧。

1 赞 1 收藏 评论

澳门新萄京官方网站 34

优先考虑其它图片代替方案

网络上往往最耗流量的就是图片,特别是用户在手机上访问,优先考虑有没有其它的方案可以代替图片,比如:

  • CSS3
  • SVG,是一个XML文件,在任何屏幕分辨率上任意缩放都是边缘清晰的,清晰度不会被破坏。比GIF和JPEG格式的文件要小很多
  • IconFont,阿里巴巴矢量图标库
  • Srcset(响应式图片)

23. 确保服务器安全可靠

所有的浏览器都支持HTTP/2并且使用TLS,这是有你可能想要避免安全警告,并删除页面上没用的元素。好好检查你的安全头部是否设置正确,排除已知的缺陷并检查证书。

如果还没有迁移到HTTP, 你那可以先看看HTTPS准则(The HTTPS-Only Standard)。确保所有外部插件和监视脚本都能被HTTPS正确加载,确保没有跨站脚本出现,HTTP脚本传输的安全头和内容安全头也都设置正确。

用于查看当前页面使用了哪些字体,Firebug和Webkit Inspector也可以查看字体,但是远没有WebFont方便,WebFont可以通过把鼠标悬停在元素上来查看字体。同时还支持查看网络字体,如Typekit和Google Font API。

压缩图片

可以使用图片压缩工具对图片进行压缩使图片尽可能小

  • 使用图片压缩工具,比如腾讯智图

24. 你的服务器和CDN支持HTTP/2吗?

不同服务器和CDN对HTTP/2的兼容性不同,你可以使用TLS够快吗?一文来查看你有什么选择。

澳门新萄京官方网站 35
Is TLS Fast Yet?让你能看看你的服务器和CDN在使用HTTP/2的时候你能使用的工具

IE Tab

选择适当的图片格式

WebP优于JPG,PNG8优于GIF;请勿使用BMP和TIFF格式.这里借用Google的一张图片格式选择方案:

澳门新萄京官方网站 36

WebP是一种加快图片加载速度的图片格式,图片压缩体积只有JPEG的2/3,目前Facebook,Google、taobao等知名公司都在自己的应用里面使用
WebP格式的图片。

澳门新萄京官方网站 37


目前Chrome、Android可以很好地支持WebP格式,iOS可以通过第三方方案来支持WebP。

25. Brotli和Zopfli两种压缩算法还在用吗?

2015年,Google介绍了Brotli,一个新的开源无损数据格式,它已经被Chrome,Firefox和Opera很好的兼容了。具体使用时,Brotli所显示出的效率要远高于Gzip和Deflate。它根据不同的配置可能压缩的时候会比较慢,但是压缩速度慢最后会让压缩效率提高。而且解压起来非常快。因为这个算法来自Google,所以浏览器只在用户通过HTTPS访问网页的时候使用它,这个事情就不奇怪了。Brotli的隐患是它没办法在目前大部分服务器上预设,而且如果没有NGINX或者Ubuntu,部署起来还是有难度的。但其实你是可以在不支持它的CDN上使用Brotli(通过service worker)。

你可以看看Zopfli压缩算法作为备选,它将数据编码为Deflate,Gzip和Zlib格式。任何规范的Gzip压缩资源都受益于Zopfli改进了Deflate编码,因为文件会比Zlib压缩的最大文件小3%-8%。问题在于文件会消耗大概80倍的时间去压缩。这就是为什么在不怎么会变得资源上使用Zopfli是不错的选择,这样的文件一般都压缩一次,下载多次。

在Chrome中打开IE浏览器标签页,你可以打开一个标签来运行Internet Explorer,让你看到的网页在IE浏览器看起来如何。

使用CSS Sprite雪碧图

将多个图片整合到一个图片中,再利用CSS属性(background-imagebackground-positionbackground-repeat)来精确定位要显示的图片,减少了HTTP的请求数和请求大小。

26. OCSP装订是否可以使用?

让服务器使用OCSP装订,可以提升你TLS握手的速度。线证书状态协议(OCSP)是作为证书废置列表协议的代替品被创造出来的。两个协议都可以用来检测SSL证书是否被取消。然而,OCSP不需要浏览器花时间下载和扫描证书信息的列表,所以它可以减少握手时间。

感谢阅读

避免图片和iframe等的空的Src

空Src会重新加载当前页面,影响速度和效率。
相关网址:Empty image src can destroy your site

27. 你是否开始使用IPv6?

因为我们已经没什么IPv4的地址可用了,而且移动网络大都开始使用IPv6(美国已经有50%的入口采用IPv6),将你的DNS升级到IPv6为以后作打算是个不错的选择。要确保通网络可以支持双栈协议——它需要允许IPv6和IPv4同时运行。毕竟IPv6不只是做为后备计划的。而且研究显示,伴随邻居发现(NDP)和路由优化,使用IPv6的网站要比普通网站快10%到15%。

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

CDN加速

通过CDN来加速是一项相对而言成本比较高的优化手段,所以这些把它放在所有优化方法的最后,但它是一项非常有效的优化方案

CDN(Content Delivery Network)即内容分发网络,将源站内容分发至全国所有的节点,缩短用户查看对象的延迟,提高用户访问网站的响应速度与网站的可用性,解决网络带宽小、用户访问量大、网点分布不均等问题。

28. 是否使用HPACK?

如果你在使用HTTP/2,看看你的服务器有没有执行HPACK对HTTP的响应头进行压缩,来减少不必要的消耗。因为HTTP/2服务器相对较新,所以有些像HPACK这样的规格目前还没有被支持。我们可以用H2spec来检查HPACK是否在工作。

澳门新萄京官方网站 38
H2spec的截图

在线工具

  • PageSpeed Insights
  • GTmetrix tells you a lot about your website performance
  • 改善 UI 响应能力.aspx)
  • Chrome DevTools

29. service workers是否为超高速缓存和网络提供预设机制?

没有经过优化的网络可以比用户机器的本地缓存跑得更快。如果你的网站在HTTPS上运行,你可以参考“实用主义者的service workers手册”,然后把静态资源存在service worker的缓存中,把离线预设(甚至离线页面)存在用户机器方便检索,这样比多次进行网络连接更有效。你还可以参考Jake的离线使用手册和免费的Udactiy课程“离线网络应用”。如果浏览器支持,那就再好不过了,预设就能在任何地方代替网络了。

参考资料

  • Improving the Performance of your HTML5 App
  • High Performance Animations
  • A new image format for the Web
  • WEBP - ADVANCED IMAGE OPTIMIZATION USING ASP.NET MVC
  • How Browsers Work: Behind the scenes of modern web browsers
  • Image Optimization
  • Best Practices for Speeding Up Your Web Site

测试与监听

个人博客

我的个人博客

30. 监听混合内容中的警告

如果你近期完成了HTTP到HTTPS的迁移,你可以利用类似Report-URI.io一类的对主动和被动的混合内容警告都进行监听。也可以利用混合内容扫描器来对你使用HTTPS的网页进行扫描。

31. 你的开发流程是否使用Devtools进行了优化?

选一个调试工具来对每一个按钮进行检查。确保自己明白如何分析渲染性能和控制台输出、明白如何调试JavaScript以及编辑CSS样式。Umar Hansa最近有一个关于使用DevTools调试和测试的分享,主要包括一些不常用的技巧和技术。

32. 是否使用代理浏览器和过时浏览器测试过?

仅仅使用Chrome和Firefox测试是不够的。还应该看看你的网页在代理浏览器和过时浏览器上运行的怎么样。比如UC浏览器和Opera Min, 它们在亚洲市场的份额很高(高达35%)。在推广时,利用目标客户所在国家的平均网速来进行测试,避免日后出现大的误差。同样的,不仅要在节流网络以及模拟的高数据处理设备上进行测试,还要在真实设备上测试。

33. 有无建立持续监听?

在进行快速、无限制的测试时,最好使用一个个人的WebPageTest实例。建立一个能自动预警的性能预算监听。建立自己的用户时间标记从而测量并监测具体商用的数据。使用SpeedCurve对性能的变化进行监控,同时利用New Relic获取WebPageTest没法提供的数据。SpeedTracker,Lighthouse和Calibre都是不错的选择。

快速入门

这份清单综合性很强,几乎介绍了所有的可用的优化方式。那么,如果你只有一个小时进行优化,你应该干什么呢?让我们从中总结10个最有用的来。别忘了在你开始优化前和结束优化后,记录你的结果,包括开始渲染时间以及在3G,有限连接下的速度。

  1. 有线连接下,你的目标是将开始渲染时间降低至1s一下,而3G的目标是保持在3s一下,SpeedIndex值保持在1000一下。为开始渲染时间和交互时间做优化。
  2. 为你主要的模板准备关键CSS文件,将它们放在页面的``中(你可以使用14KB)。
  3. 对于你自己和第三方的脚本文件,尽可能的延迟加载它们——尤其是社交网站按钮,播放器和高消耗的JavaScript文件。
  4. 使用更快的dns-lookuppreconnectprefetchpreloadprerender添加资源提示,从而加快传输速度。
  5. 将字体一类属性作为子集,异步加载(或者使用系统字体代替)。
  6. 优化图片,并考虑在关键页中使用WebP(例如登陆页面)。
  7. 确保HTTP的缓存头和安全头都被正确的设置。
  8. 在服务器上使用Brotli或Zopfli压缩算法。(如果不支持这两个,尝试一下Gzip)
  9. 如果HTTP/2可用,使用HPACK压缩算法,并监听混合内容的警告。如果你在使用LTS,就可以使用OCSP装订。
  10. 如果可能,将类似字体,JavaScript文件以及图片缓存在service worker缓存中——事实上越多越好!

2 赞 5 收藏 评论

澳门新萄京官方网站 39

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:Web前端开发Chrome插件,2

关键词: