前端优化:9 个技巧,提高 Web 性能

snake_007 snake_007翻译于 3天前0人顶  翻译得不错哦! 

绑定文件? 不用担心

在过去,你可能会频繁绑定 CSS 脚本到单个文件,以在 HTML 代码中引用外部文件。在使用 HTTP1.1 协议时,这是一项合理的实践,然而这一协议不再是必需的。

感谢 HTTP/2,现在你可以通过使用多路技术将单个 TCP 连接以异步方式收发 HTTP 请求和响应。

图片来源: qnimate.com

这意味着你不再需要频繁地将多个脚本绑定到单个文件。

花间_拾零 花间_拾零翻译于 3天前0人顶  翻译得不错哦! 

2. 优化 CSS 性能

CSS,即级联样式表,能从 HTML 描述的内容生成专业而又整洁的文件。很多 CSS 需要通过 HTTP 请求来引入(除非使用内联 CSS),所以你要努力去除累赘的 CSS 文件,但要注意保留其重要特征。

如果你的 Banner、插件和布局样式是使用 CSS 保存在不同的文件内,那么,访问者的浏览器每次访问都会加载很多文件。虽然现在 HTTP/2 的存在,减少了这种问题的发生,但是在外部资源加载的情况下,仍会花费较长时间。要了解如何减少 HTTP 请求以大幅度缩减加载时间,请阅读WordPress 性能。

此外,不少网站管理员在网页中错误的使用 @import 指令 来引入外部样式表。这是一个过时的方法,它会阻止浏览并行下载。link 标签才是最好的选择,它也能提高网站的前端性能。多说一句,通过 link 标签请求加载的外部样式表不会阻止并行下载。

Viyi Viyi翻译于 3天前0人顶  翻译得不错哦! 

3.减少外部HTTP请求

在很多情况下,网站的大部分加载时间来自于外部的 Http 请求。外部资源的加载速度随着主机提供商的服务器架构、地点等不同而不同。减少外部请求要做的第一步就是简略地检查网站。研究你网站的每个组成部分,消除任何影响访问者体验不好的成分。这些成分可能是:

  • 不必要的图片

  • 没用的 JavaScript 代码

  • 过多的 css

  • 多余的插件

在你去掉这些多余的成分之后,再对剩下的内容进行整理,如,压缩工具、CDN 服务和预获取(prefetching)等,这些都是管理 HTTP 请求的最佳选择。除此之外,减少DNS路由查找教程会教你如何一步一步的减少外部 HTTP 请求。

physihan physihan翻译于 3天前0人顶  翻译得不错哦! 

4. 压缩 CSS, JS 和 HTML

压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候,会使用缩进和注释,这些方法无疑会让你的代码简洁而且易读,但它们也会在文档中添加多余的字节。

例如,这是一段压缩之前的代码。

.entry-content p {font-size14px