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

应用Unicode范围子集

Unicode范围子集许可将大年夜字体瓜分成较小的集合。这是一个相对先辈的策略，特别是在处理亚洲说话的时刻，可能会带来明显的节俭(你知道中文字体有平劫数为 20,000 个字形吗?)。第一步是将字体限制为须要的说话集，例如拉丁语，希腊语或西里尔语。如不雅仅应用Web字体做Logo类应用，则应应用Unicode范围描述符，来选择特定字符。

所有这些上报数字可能会很快变得纷乱和不易懂得。没有可操作的目标和对象，很轻易迷掉我们最初的目标。几年前， Tim Kadlec 写过关于机能预算的概念。

Filament Group 宣布了一个开源敕令行对象，可以根据文件或URL生成须要字形列表的 glyph hanger 。或者，基于 Web 的 Font Squirrel Web Font Generator 供给高等子集和优化选项。如不雅在字体选择器界面中内置了应用Google Fonts 或 Typekit 选择说话子集，则使基簿子集更轻易。

实施字体加载策略，可防止用户无法拜访您的内容。平日，选择无样式文本明灭 (FOUT)是最简单和最有效的解决筹划。

font-display 是供给非 JavaScript 依附解决筹划的新 CSS 属性。不幸的是，它仅有部分支撑(Chrome 和 Opera)，今朝正在 Firefox 和 WebKit 中开辟。尽管如斯，它可以并且应当与其他字体加载机制结合应用。

Web的近况：网页机能晋升指南

JavaScript 优化

今朝， JavaScript 的平均大年夜小为446 KB ，已经使其成为第二大年夜的资本类型(第一为图片)。

我们可能没有意识到，我们所爱的JavaScript隐蔽着加倍严格的机能瓶颈。

监控JavaScript的流量

优化交付只是解决网页膨胀的第一步。JavaScript 下载后，必须由浏览器进行解析、编译和运行。快速浏览一些风行的网站，显而易见的是，gzip 紧缩的 JS 在解压之后至少变安闲倍。事实上，我们正在发送一大年夜堆代码。

Web的近况：网页机能晋升指南

1MB JavaScript 在不合设毕喔赡解析时光。图片由 Addy Osmani 和他的 JavaScript Start-up Performance 文┞仿供给。

分析解析和编译时光，对于懂得应用法度榜样是否预备好进行交互至关重要。这些耗时根据用户设备的硬件才能而异。解析和编译会很轻易在低端手机上赶过2-5倍。 Addy 的研究证实，在惯例手机上，一个应用法度榜样将须要16秒才能达到交互式状况，而在桌面电脑上为8秒。分析这些指标至关重要，荣幸的是，我们可以经由过程 Chrome DevTools 来完成。

Web的近况：网页机能晋升指南
[在 Chrome 开辟对象中查看解析和编译过程]

请务必浏览 Addy Osmani 对 JavaScript 启动机能的具体解释。

摆脱不须要的依附

现代软件担保理器的工作方法，可以易如反掌地掩盖依附关系的数量和大年夜小。 webpack-bundle-analyzer 和 Bundle Buddy 是很好的可视化对象，赞助辨认出代码反复、最大年夜机能问题和过时的、不须要的依附。

Web的近况：网页机能晋升指南
图 webpack bundle analyzer 实践

设定预算时，重要的是要达到明显的差别，平日是至少改良20%。实践和迭代您的预算，应用 Lara Hogan 的办法新设计与机能预算作为参考。

应用图片 CDN 进行分发

经由过程 VS Code 和 Atom 中的 Import Cost 扩大，我们可以使导入依附成本加倍明显。

实现代码瓜分

只要有可能，我们就应只供给用户体验所必须的资本。向用户发送一个完全的

bundle.js 文件，包含他们可能永远看不到的交互效不雅处理代码，并不太幻想(假设在拜访着陆页时，去下载处理全部应用法度榜样的 JavaScript)。同样，我们不该广泛供给针对特定浏览器或用户代劳的代码。

Webpack，最受迎接的模块打包器之一，生成具备代码瓜分支撑。最简单的代码瓜分可以按页面实现(如用于着陆页的 home.js ，接洽人页面的 contact.js 等)，Webpack 还供给了一些高等策略，如动态导入及延迟加载，值得一看。

推敲框架选择

JavaScript 前端框架日新月异。根据 2016年的 JavaScript 查询拜访，React 是最受迎接的选择。细心核阅架构选择，可能会发明，您可以应用更为轻量级的替代筹划，例如 Preact (请留意，Preact 并不是一个完全的 React 从新实现，只是一个高机能，功能更轻的虚拟 DOM 库)。类似地，我们可以将较大年夜的库改换成更小的版本—— moment.js 换成 date-fns (或者在特定情况，删除 moment.js 中未应用的 locales )。

荣幸的是，Typekit 的 Web Font Loader 和 Bram Stein 的 Font Face Observer 可以赞助治理字体加载行动。此外，网页字体机能专家 Zach Leatherman 宣布了字体加载策略综合指南，这将有助于为您的项目选择精确的办法。

字体机能清单
选择精确的格局
审核字体范围
应用Unicode范围子集
建立字体加载策略

机能追踪，进步之路

我们已经评论辩论了一些策略，在大年夜多半情况下会对我们正在建立的产品用户体验产生积极的变更。机能可能是一个棘手的问题，有须要经久地跟踪我们调及?结不雅。

3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　如何将数据可视化技术应用于广告投放？

【沙龙】51CTO诚邀您9月23号和多位技巧大年夜咖一路聊智能CDN的优化之路，抓紧时光哦！不雅试着想象各行星活动的轨迹，你的脑海中会出现什么，是混乱无章的线条照样一张按照经度变更分列的一维线图?这就>>>详细阅读

本文标题：Web的现状：网页性能提升指南

地址：http://www.17bianji.com/lsqh/37527.html

1/2 1