页面机能优化的办法总结

本篇文章给大家带来的内容是关于页面机能优化的办法总结，有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

互联网有一项闻名的8秒原则。会员在拜访Web网页时，假如时间超越8秒就会感到不耐烦，假如加载需要太长时间，他们就会舍弃拜访。大部分会员但愿网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的会员。8秒并不是准确的8秒钟，只是向网站开发者表白了加载时间的重要性。那我们怎样优化页面机能，提高页面加载速度呢？这是本文主要要商量的问题，然而机能优化是个综合性问题，没有标准答案，想要八面玲珑排列出来，并非易事。本文只关注一些中心要点，以下是我总结机能优化常见的方法：

一、资源紧缩与合并

主要包罗这些方面：html紧缩、css 紧缩、js的紧缩和纷乱和文件合并。
资源紧缩可以从文件中去除余外的字符，比方回车、空格。你在编纂器中写代码的时候，会使用缩进和注释，这些办法无疑会让你的代码简约并且易读，但它们也会在文档中增加余外的字节。

1.html紧缩

html代码紧缩就是紧缩这些在文本文件中成心义，但是在HTML中不显示的字符，包罗空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被紧缩。

怎样停止html紧缩：

1. 使用在线网站停止紧缩(开发历程中一样不消)

2. nodejs 供给了html-minifier工具

3. 后端模板引擎渲染紧缩

2.css代码紧缩：

css代码紧缩简便来说就是无效代码删除和css语义合并

怎样停止css紧缩：

1. 使用在线网站停止紧缩(开发历程中一样不消)

2. 使用html-minifier工具

3. 使用clean-css对css紧缩

3.js的紧缩和纷乱

js的紧缩和纷乱主要包罗以下这几部分：

1. 无效字符的删除

2. 剔除注释

3. 代码语义的缩减和优化

4. 代码庇护(代码逻辑变得纷乱，落低代码的可读性，这点很重要)

怎样停止js的紧缩和纷乱

1. 使用在线网站停止紧缩(开发历程中一样不消)

2. 使用html-minifier工具

3. 使用uglifyjs2对js停止紧缩

其实css紧缩与js的紧缩和纷乱比html紧缩收益要大得多，同时css代码和js代码比html代码多得多，通过css紧缩和js紧缩带来流量的减少，会非常明显。所以对大公司来说，html紧缩无足轻重，但css紧缩与js的紧缩和纷乱必需要有！

4.文件合并

从上图可以看出不合并恳求有以下缺陷：

• 文件与文件之间有插入的上行恳求，增添了N-1个网络延迟

• 受丢包问题影响更严峻

• keep-alive方式大概会显现情况，经过代理效劳器时大概会被断开，也就是说不克不及不断保持keep-alive的状态

紧缩合并css和js可以减少网站http恳求的次数，但合并文件大概会带来问题:首屏渲染和缓存失效问题。那该怎样处置这问题呢？----公共库合并和不一样页面的合并。

怎样停止文件合并

1. 使用在线网站停止文件合并

2. 使用nodejs实现文件合并(gulp、fis3)

二、非中心代码异步加载异步加载的方式

1、异步加载的方式

异步加载的三种方式——async和defer、动态足本创立

① async方式

• async属性是HTML5新增属性，需要Chrome、FireFox、IE9+阅读器支撑

• async属性规定一旦足本可用，则会异步施行

• async属性仅适用于外部足本

• 假如是多个足本，该办法不克不及包管足本按次序施行

<script type="text/javascript" src="xxx.js" async="async"></script>

② defer方式

• 兼容所有阅读器

• defer属性规定可否对足本施行停止延迟，直到页面加载为止

• 假如是多个足本，该办法可以确保所有设定了defer属性的足本按次序施行

• 假如足本不会改动文档的内容，可将defer属性参加到script标签中，以便加快处置文档的速度

③动态创立script标签
在还没定义defer和async前，异步加载的方式是动态创立script，通过window.onload办法确保页面加载完毕再将script标签插入到DOM中,详细代码如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute("type","text/javascript");  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag("js/index.js");  
}

2、异步加载的不同

1)defer是在HTML解析完之后才会施行，假如是多个，依照加载的次序顺次施行

2)async是在加载完之后马上施行，假如是多个，施行次序和加载次序无关

其中蓝色线代表网络读取，红色线代表施行时间，这俩都是针对足本的；绿色线代表 HTML 解析。

三、利用阅读器缓存

关于web利用来说，缓存是晋升页面机能同时减少效劳器压力的利器。

阅读器缓存类型

1.强缓存：不会向效劳器发送恳求，直接从缓存中读取资源，在chrome操纵台的network选项中可以看到该恳求返回200的状态码，并且size显示from disk cache或from memory cache；

相关的header:

Expires ：response header里的过期时间，阅读器再次加载资源时，假如在这个过期时间内，则命中强缓存。它的值为一个绝对时间的GMT格局的时间字符串， 比方Expires:Thu,21 Jan 2018 23:39:02 GMT

Cache-Control ：这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示。当值设为max-age=300时，则代表在这个恳求准确返回时间（阅读器也会记载下来）的5分钟内再次加载资源，就会命中强缓存。比方Cache-Control:max-age=300，

简便概括：其实这两者差异不大，不同就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；在某些不支撑HTTP1.1的环境下，Expires就会发挥用途。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。强缓存推断可否缓存的根据来自于可否超出某个时间或者某个时间段，而不关怀效劳器端文件可否已经更新，这大概会致使加载文件不是效劳器端最新的内容，那我们怎样获知效劳器端内容较客户端可否已经发生了更新呢？此时我们需要协商缓存战略。

2.协商缓存：向效劳器发送恳求，效劳器会按照这个恳求的request header的一些参数来推断可否命中协商缓存，假如命中，则返回304状态码并带上新的response header通知阅读器从缓存中读取资源；别的协商缓存需要与cache-control共同使用。

相关的header:

①Last-Modified和If-Modified-Since：当第一次恳求资源时，效劳器将资源传递给客户端时，会将资源最后更换的时间以“Last-Modified: GMT”的情势加在实体首部上一起返回给客户端。

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

客户端会为资源标志上该信息，下次再次恳求时，会把该信息附带在恳求报文中一并带给效劳器去做检查，若传递的时间值与效劳器上该资源终究修改时间是一致的，则说明该资源没有被修改正，直接返回304状态码，内容为空，这样就节约了传输数据量 。假如两个时间不一致，则效劳器会发回该资源并返回200状态码，和第一次恳求时相似。这样包管不向客户端反复发出资源，也包管当效劳器有转变时，客户端能够得到最新的资源。一个304响应比一个静态资源平常小得多，这样就节约了网络带宽。

但last-modified 存在一些缺陷：

Ⅰ.某些效劳端不克不及猎取准确的修改时间

Ⅱ.文件修改时间改了，但文件内容却没有变

既然按照文件修改时间来决议可否缓存尚有不足，能否可以直接按照文件内容可否修改来决议缓存战略？----ETag和If-None-Match

②ETag和If-None-Match：Etag是上一次加载资源时，效劳器返回的response header，是对该资源的一种独一标识，只要资源有转变，Etag就会从新生成。阅读器鄙人一次加载资源向效劳器发送恳求时，会将上一次返回的Etag值放到request header里的If-None-Match里，效劳器只需要比力客户端传来的If-None-Match跟本人效劳器上该资源的ETag可否一致，就能很好地推断资源相对客户端而言可否被修改正了。假如效劳器发明ETag匹配不上，那么直接以常规GET 200回包情势将新的资源（当然也包罗了新的ETag）发给客户端；假如ETag是一致的，则直接返回304知会客户端直接使用当地缓存即可。

两者之间对照：
第一在准确度上，Etag要优于Last-Modified。Last-Modified的时间单位是秒，假如某个文件在1秒内改动了屡次，那么他们的Last-Modified其实并没有表现出来修改，但是Etag每次都会改动确保了精度；假如是负载平衡的效劳器，各个效劳器生成的Last-Modified也有大概不一致。
第二在机能上，Etag要逊于Last-Modified，究竟Last-Modified只需要记载时间，而Etag需要效劳器通过算法来运算出一个hash值。
第三在优先级上，效劳器校验优先思考Etag

缓存的机制

强迫缓存优先于协商缓存停止，若强迫缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则停止协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由效劳器决议可否使用缓存，若协商缓存失效，那么代表该恳求的缓存失效，从新猎取恳求结果，再存入阅读器缓存中；生效则返回304，连续使用缓存。主要历程如下：

会员行动对阅读器缓存的影响

1.地址栏拜访，链接跳转是正常会员行动，将会触发阅读器缓存机制；

2.F5刷新，阅读器会设定max-age=0，跳过强缓存推断，会停止协商缓存推断；

3.ctrl+F5刷新，跳过强缓存和协商缓存，直接从效劳器拉取资源。

假如想理解更多缓存机制，请猛戳 深入懂得阅读器的缓存机制

四、使用CDN

大型Web利用对速度的追求并没有止步于仅仅利用阅读器缓存，由于阅读器缓存始终只是为了晋升二次拜访的速度，关于首次拜访的加快，我们需要从网络层面停止优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加快。通过将静态资源(例如javascript，css，图片等等）缓存到离会员很近的雷同网络运营商的CDN节点上，不单能晋升会员的拜访速度，还能节约效劳器的带宽耗损，落低负载。

CDN是如何做到加快的呢？

其实这是CDN效劳商在我国各个省份摆设运算节点，CDN加快将网站的内容缓存在网络边沿,不一样地区的会员就会拜访到离本人比来的雷同网络线路上的CDN节点，当恳求到达CDN节点后，节点会推断本人的内容缓存可否有效，假如有效，则马上响应缓存内容给会员，从而加快响应速度。假如CDN节点的缓存失效，它会按照效劳配置去我们的内容源效劳器猎取最新的资源响应给会员，并将内容缓存下来以便响应给后续拜访的会员。因此，一个地区内只要有一个会员先加载资源，在CDN中创立了缓存，该地区的其他后续会员都能因此而受益。

五、预解析DNS

资源预加载是另一个机能优化技术，我们可以使用该技术来预先告知阅读器某些资源大概在未来会被使用到。
通过 DNS 预解析来告诉阅读器将来我们大概从某个特定的 URL 猎取资源，当阅读器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如，我们未来可从 example.com 猎取图片或音频资源，那么可以在文档顶部的 <head> 标签中参加以下内容：

<link rel="dns-prefetch" href="//example.com">

当我们从该 URL 恳求一个资源时，就不再需要等候 DNS 的解析历程。该技术对使用第三方资源特殊有用。通过简便的一行代码就可以告知那些兼容的阅读器停止 DNS 预解析，这意味着当阅读器真正恳求该域中的某个资源时，DNS 的解析就已经完成了,从而节约了珍贵的时间。
别的需要留意的是，阅读器会对a标签的href主动启用DNS Prefetching，所以a标签里包括的域名不需要在head中手动设定link。但是在HTTPS下不起作用，需要meta来强迫开启功效。这个限制的缘由是防止窃听者按照DNS Prefetching推断显示在HTTPS页面中超链接的主机名。下面这句话作用是强迫翻开a标签域名解析

<meta http-equiv="x-dns-prefetch-control" content="on">

以上就是页面机能优化的办法总结的具体内容，更多请关注百分百源码网其它相关文章！