让网站提速的最佳前端实践

2024年2月22日 129次阅读 来源: binnng

前端工程师常常被提起网站性能，如何让网站访问更快等问题，本文就做个总结。

最少化HTTP请求

用户在浏览网页时，超过80%的时间都是在请求下载网页资源，包括图片，样式，脚本，Flash等等，减少这些资源的下载请求数目，便成了让网页提速的关键。
当然，如果页面很简单，资源少，网页请求自然就少，如果网页内容很多，我们如何做到减少资源请求数呢？这里有几个方法：

  1. 合并静态文件，将所有脚本、样式文件合并到一个文件里，可以大大减少HTTP请求数。但如果每个页面的静态文件都不一样，所有文件都合并到一起也会带来麻烦，所以需要在开发过程中均衡处理合并。

  2. CSS雪碧图（Sprites），将CSS中用到的背景图片合并到一张图片上，然后通过background-position去定位想用到的图片块，可以减少图片请求数。

  3. 使用data: URL scheme将图片数据写入到HTML或CSS文件中，虽然增加了HTML或CSS文件大小，但必要时，还是需要这么做来减少HTTP请求数。

将CSS文件放在头部

当页面内容很多时，我们希望边加载边正确的显示给用户，你可能想把CSS文件放到页面底部，这样就可以优先展示用户内容，但这会引起一个严重的问题，用户先看到的是一个没有样式的页面，之后闪一下（页面重绘）又重新定义了样式，这其实很影响用户体验。而最好的做法就是遵循HTML规范，把CSS文件放到文档的HEAD标签里。

将JS文件放在底部

JS脚本所引起的问题是阻塞了浏览器的并行下载，HTTP/1.1规范指出：每个域名下的资源的并行下载数量不得超过两个，当浏览器在下载JS文件时，不会进行其他下载，即使资源被分发在不同的域名。

避免CSS表达式

如果要动态设置CSS属性，CSS表达式（CSS expressions）就显得尤其强（wei）大（xian），它在IE5.0中开始被支持，但又在IE8.0中被废弃。比如以下样式，背景色会在每个小时都被定义一次。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

可以看粗，expression方法接受一个Js语句去设置CSS属性值，它只能被IE识别，所以在跨浏览器开发时（兼容IE），它就有了用武之地。

但是它的问题在于它执行的非常频繁，网页渲染时执行，窗口改变时执行，甚至页面滚动时、用户移动鼠标时它都会执行！

减少CSS表达式执行次数的方法是：当页面渲染完成后就给CSS属性设定一个明确的值，或者在Js中监听网页事件，事件触发时再去设置CSS属性值。如果一定要使用CSS表达式，请记住，它很可能会被执行成千上万次。

外链CSS和JS文件

之所以外链CSS和JS文件会使页面更快，是因为它们可以被浏览器缓存，否则每次请求HTML文档时都会重复下载CSS和JS代码，虽然内联CSS和JS可以减少HTTP请求数，但是使得HTML文档更大。

如果页面比较简单，JS和CSS都很少，使用内联代码减少HTTP请求，反而会让页面更快。

压缩静态文件

市面上的压缩工具有很多，比如JSmin， YUI Compressor，GCC，pngcrush等等，可以根据业务需要选择工具去压缩静态文件。

Ajax中优先选择GET请求

使用XMLHttpRequest对象进行POST请求时，我们发现，它其实是分为两步完成，现发送请求头信息，再发送请求数据，所以最好使用GET请求，只需要发送一个TCP数据包（除非有很多Cookie数据），而且GET请求的数据可以被缓存。但需要提的是，IE中对GET请求的URL长度限制在2K字节以内(参考support.microsoft.com)，所以如果URL超过这个长度，只能使用POST请求。

延迟加载

开发过程中，想想这个元素或脚本是不是页面初始化所必须的，如果不是，就可以考虑延迟加载它们，比如默认被折叠的元素、需要用户触发才需要显示的元素以及首屏之后的页面元素等等。

预加载

预加载看上去和上条矛盾，其实不然。当浏览器处于空闲时，我们可以预先加载之后会使用到的页面的元素（比如：图片，JS，CSS），之后页面再使用这些元素时会优先从缓存中读取。预加载分为这两种形式：

  1. 无条件预加载(Unconditional)：页面一旦加载完成就去下载额外的元素，而这个元素并不一定在这个页面上被使用，比如Google首页加载了一张背景图，这是为了搜索结果页所准备的。
  2. 条件预加载(Conditional)：这是基于用户行为做出下一步猜测而去加载元素，比如当你输入文字时会根据文字去下载不同元素。

减少DOM数

如果一个页面太复杂，意味着下载时间更长，同时JS访问DOM的速度也会变慢。减少DOM数并不意味着需要移除内容，而是我们可以使用更合理的HTML标签。还在使用Table布局？页面一堆DIV标签，也许我们有更好更语义化的布局方法。

想知道页面的DOM数量很简单，只需要一行JS语句：

document.getElementsByTagName('*').length

多域名分发内容

使用多域名分发内容可以可以增加浏览器并行下载数，由于DNS解析也要耗时，一般2-4个域名比较合适。比如你可以把HTML或JSP，PHP等文档文件放在www.example.org这个域名上，而把静态文件放在static1.example.or或者static2.example.org上。

减少iframe的使用

iframe可以让HTML文档嵌套在另一个HTML文档内，想要更好的使用它们就必须知道它们的工作原理。

iframe优点：
* 延迟加载广告等第三方内容
* 提供安全沙箱
* 并行下载脚本

iframe缺点：
* 代价昂贵
* 阻止父级页面的加载
* 非语义化

减小Cookie

Cookie常常被用在身份验证或者存储个人信息，他会通过HTTP头信息在服务端和浏览器之间传输，为了减少HTTP响应时间，我们有必要减小Cookie。通常有以下几个方法：

  1. 清除不必要的Cookie
  2. 尽量减小Cookie内容的长度
  3. 在适当的域中设置Cookie，保证其他子域不受影响
  4. 设定合适的Cookie的过期时间

更多关于Cookie的信息可以参考 When the Cookie Crumbles

减少DOM操作

频繁用JS操作DOM的开销很大，我们可以通过以下几种方式减少这种开销：
1. 缓存获取到的DOM元素
2. 批量处理元素，一次性更新到文档
3. 尽量避免用JS改变页面布局

更好的事件绑定

当过多的元素被绑定频繁被触发的事件，页面响应会变慢，这时我们就需要采用事件委托。如果你不需要等待所有图片下载完成，可以使用DOMContentLoaded事件来代替onload事件。

使用link而不是@import引入CSS

之前提到过，要将CSS文件放在HEAD标签里，在IE中，@import相当于把CSS文件放到了页面底部，所以最好不用这么使用。

避免使用CSS图片滤镜

在IE7一下，AlphaImageLoader用于解决PNG图片透明问题，如果图片设置了这个属性，当它在下载时，会阻塞浏览器渲染页面，甚至让浏览器卡死，这个问题是很严重。

可缓存的favicon.ico

favicon.ico是网站根目录的一张图片，即便你不在HTML中设置它，浏览器也会发出请求，并且带上Cookie等信息。

想要较少favicon.ico带来的不良影响，需要做到：
1. 文件小，最好在1K一下
2. 在HTTP header中设置适当的过期时间(Expires)

避免空的图片src

空的图片src属性有三种形式：
HTML

<img src="" />

CSS

.class{background:url("")}

JS

var img = new Image();
img.src = "";

这么做各浏览器发出请求情况各有差异，具体如下：
* IE会向页面的目录发出请求；
* Safari和Chrome会向当前页面自己发出请求；
* Firefox 3及一下版本和Safari一样，向当前页面自己发出请求；
* Firefox 4及以上版本和Opera不发出请求；

本文粗译自http://developer.yahoo.com/performance/rules.html，有所删减并加了很多自己的理解。如果有错误或不恰当的地方，欢迎指正。

有些知识点只是粗描淡写，比如静态资源并行下载数、@import各浏览器表现差异等，欢迎在评论中详细讨论。

    原文作者：binnng
    原文地址: https://segmentfault.com/a/1190000000367899
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞