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

前端工程师常常被提起网站机能,怎样让网站接见更快等题目,本文就做个总结。

起码化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 CompressorGCCpngcrush等等,能够依据营业须要挑选东西去紧缩静态文件。

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞