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

2024年5月16日 200次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞