让你的页面打开速度飞快-Web 前端优化技术

下载脚本时并行下载是被禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外,也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。


6. 压缩组件

从 HTTP1.1 开始,Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来表示对压缩的支持

Accept-Encoding: gzip,deflate

如果 Web 服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来进行压缩。Web 服务器通过响应中的 Content-Encoding 来通知 Web 客户端。

Content-Encoding: gzip

7. 使用外部的 JavaScript 和 CSS

内联脚本或者样式可以减少 HTTP 请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而 HTML 文档的大小减小,从而提高加载速度。

影响因素:

  • 每个用户产生的页面浏览量越少,内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次,那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量,那么缓存的样式和脚本将会极大减少下载的时间,提交页面加载速度。
  • 如果你的网站不同的页面之间使用的组件大致相同,那么使用外部文件可以提高这些组件的重用率。

加载后下载:

有时候我们希望内联样式和脚本,但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件,以便用户接下来的访问。


8. 精简 JavaScript 和 CSS

精简就是从代码中移除不必要的字符以减少文件大小,降低加载的时间。代码精简的时候会移除不必要的空白字符(空格,换行、制表符),这样整个文件的大小就变小了。


9. 减少 DNS 查找

DNS 也是开销,通常浏览器查找一个给定域名的 IP 地址要花费 20~120毫秒,在完成域名解析之前,浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间,加快页面加载速度呢?

当客户端 DNS 缓存(浏览器和操作系统)缓存为空时,DNS 查找的数量与要加载的 Web 页面中唯一主机名的数量相同,包括页面 URL、脚本、样式表、图片、Flash 对象等的主机名。减少主机名的 数量就可以减少 DNS 查找的数量。

让你的页面打开速度飞快-Web 前端优化技术

减少唯一主机名的数量会潜在减少页面中并行下载的数量(HTTP 1.1 规范建议从每个主机名并行下载两个组件,但实际上可以多个),这样减少主机名和并行下载的方案会产生矛盾,需要大家自己权衡。建议将组件放到至少两个但不多于 4个主机名下,减少 DNS 查找的同时也允许高度并行下载。


10. 删除重复脚本

在团队开发一个项目时,由于不同开发者之间都可能会向页面中添加页面或组件,因此可能相同的脚本会被添加多次。

重复的脚本会造成不必要的 HTTP 请求(如果没有缓存该脚本的话),并且执行多余的 JavaScript 浪费时间,还有可能造成错误。


分享到:


相關文章: