2018 前端性能优化清单 - 第 2 部分


下面是前端性能问题的概述,你可以参考以确保流畅的阅读本文。


  1. 你会在你的项目中使用 AMP 和 Instant Articles 么?

依赖于你的组织优先性和战略性,你可能想考虑使用谷歌的 AMP 和 Facebook 的 Instant Articles 或者苹果的 Apple News。没有它们,你可以实现很好的性能,但是 AMP 确实提供了一个免费的内容分发网络(CDN)的性能框架,而 Instant Articles 将提高你在 Facebook 上的知名度和表现。

对于用户而言,这些技术主要的优势是确保性能,但是有时他们宁愿喜欢 AMP-/Apple News/Instant Pages 链路,也不愿是“常规”和潜在的臃肿页面。对于以内容为主的网站,主要处理很多第三方法内容,这些选择极大地加速渲染的时间。

对于网站的所有者而言优势是明显的:在各个平台规范的可发现性和增加搜索引擎的可见性。你也可以通过把 AMP 作为你的 PWA 数据源来构建渐进增强的 Web 体验。缺点?显然,在一个有围墙的区域里,开发者可以创造并维持其内容的单独版本,防止 Instant Articles 和 Apple News 没有实际的URLs。(谢谢 Addy,Jeremy

  1. 明智地选择你的 CDN

根据你拥有的动态数据量,你可以将部分内容外包给静态站点生成器,将其放在 CDN 中并从中提供一个静态版本。因此可以避免数据的请求。你甚至可以选择一个基于 CDN 的静态主机平台,将交互组件作为增强来充实你的页面 (jamstack)。

注意,CDN 也可以服务(卸载)动态内容。因此,限制你的 CDN 到静态资源是不必要的。仔细检查你的 CDN 是否进行压缩和转换(比如:图像优化方面的格式,压缩和调整边缘的大小),智能 HTTP/2 交付,边侧包含,在 CDN 边缘组装页面的静态和动态部分(比如:离用户最近的服务端),和其他任务。

构建优化

  1. 分清轻重缓急

知道你应该优先处理什么是个好主意。管理你所有资产的清单(JavaScript,图片,字体,第三方脚本和页面中“昂贵的”模块,比如:轮播图,复杂的图表和多媒体内容),并将它们划分成组。

建立电子表格。针对传统的浏览器,定义基本的核心体验(比如:完全可访问的核心内容),针对多功能浏览器提升体验(比如:丰富多彩的,完美的体验)和其他的(不是绝对需要而且可以被延迟加载的资源,如 Web 字体、不必要的样式、旋转木马脚本、视频播放器、社交媒体按钮、大型图像。)。我们在“Improving Smashing Magazine's Performance”发布了一篇文章,上面详细描述了该方法。

  1. 考虑使用“cutting-the-mustard”模式

虽然很老,但我们仍然可以使用 cutting-the-mustard 技术将核心经验带到传统浏览器并增强对现代浏览器的体验。严格要求加载的资源:优先加载核心传统的,然后是提升的,最后是其他的。该技术从浏览器版本中演变成了设备功能,这已经不是我们现在能做的事了。

例如:在发展中国家,廉价的安卓手机主要运行 Chrome,尽管他们的内存和 CPU 有限。这就是 PRPL 模式可以作为一个好的选择。因此,使用设备内存客户端提示头,我们将能够更可靠地针对低端设备。在写作的过程中,只有在 Blink 中才支持 header(Blink 支持客户端提示)。因为设备存储也有一个在 Chrome 中可以调用的 JavaScript API,一种选择是基于 API 的特性检测,只在不支持的情况下回退到 “符合标准”技术(谢谢Yoav!)。

  1. 解析 JavaScript 的代价很大,应保持其较小

但我们处理单页面应用时,在你可以渲染页面时,你需要一些时间来初始化 app。寻找模块和技术加快初始化渲染时间(例如:这里是如何调试 React 性能,以及如何提高 Angular 性能),因为大多数性能问题来自于启动应用程序的初始解析时间。

JavaScript 有成本,但不一定是文件大小会影响性能。解析和执行时间的不同很大程度依赖设备的硬件。在一个普通的手机上(Moto G4),仅解析 1MB (未压缩的)的 JavaScript 大概需要 1.3-1.4 秒,会有 15 - 20% 的时间耗费在手机的解析上。在执行编译过程中,只是用在JavaScript准备平均需要 4 秒,在手机上绘排需要 11 秒。解释:在低端移动设备上,解析和执行时间可以轻松提高 2 至 5 倍

Ember 最近推出了一个实验,一种使用二进制模板巧妙的避免解析开销的方式。这些模板不需要解析。(感谢Leonardo!

这就是检查每个 JavaScript 依赖性的关键,工具像 webpack-bundle-analyzerSource Map ExplorerBundle Buddy 可以帮助你完成这些。度量 JavaScript 解析和编译时间。Etsy 的 DeviceTiming,一个小工具允许您指示 JavaScript 在任何设备或浏览器上测量解析和执行时间。重要的是,虽然大小重要,但它不是一切。解析和编译时间并不是随着脚本大小增加而线性增加

发布于 2018-01-23

文章被以下专栏收录

    有关 Web 全栈开发的干货分享,学习路线指南。欢迎关注,欢迎投稿。

    掘金翻译计划是一个翻译优质互联网技术文章的社区,文章来源为掘金上的英文分享文章。内容覆盖 AI、深度学习、Android、iOS、React、前端、后端、产品、设计等领域,读者为热爱新技术的新锐开发者。

    http://gold.xitu.io http://weibo.com/xitucircle