Web前端的优化规则

Web前端的优化规则：

尽量减少HTTP请求
使用浏览器缓存
使用压缩组件
图片、JS的预载入
将脚本放在底部
将样式文件放在页面顶部
使用外部的JS和CSS
切分组件到多个域
精简JS
精简CSS
精简图片、Flash

参考文章：https://blog.csdn.net/sinat_27346451/article/details/77451634

1.尽量减少HTTP请求

有几种常见的方法能切实减少HTTP请求：
1.合并文件：合并脚本跟样式文件，如可以把多个CSS文件合成一个，把多个JS文件合成一个。
2.合并图片：CSS Sprites 利用 CSS background相关元素进行背景图绝对定位，把多个图片合成一个图片。

2.使用浏览器缓存

在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。

根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。
1.服务器告诉浏览器不要缓存此文件，每次都到服务器上更新文件。
2.服务器端没有给浏览器任何指示。
3.在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。
4.服务器乔治要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存，不会与服务器端产生任何通信。

我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。

3.使用压缩组件

IE和Firefox浏览器都支持客户端GZIP，传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。如果每个用户节约50%的带宽，那么租用来的那点带宽就可以服务多一倍的客户，并且缩短了数据的传输时间。

4.图片、JS的预载入

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

可以在登录页面预载入JS和图片

5.将脚本放在底部

脚本放在顶部带来的问题，

1、使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞

2、在下载脚本时会阻塞并行下载

放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。

要综合考虑情况。

6.将样式文件放在页面顶部

如果样式表任在加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况：

1、白屏

2、无样式内容的闪烁

7.使用外部的JS和CSS

将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。

8.切分组件到多个域

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。

九.精简JS

可以做到两个级别

1、精简：从代码中移除不必要的字符以减少其大小，

2、混淆：在精简的同时，还会改写代码，函数、变量名被转换成更短的字符串

可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/

10,精简CSS

从代码中移除不必要的字符以减少其大小，

可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /

11.精简图片、Flash

对大图片、Flash，要在效果和大小之间做出平衡。

附注：

1.一个页面的请求等于一个或多个url的请求，因此一个页面里包含的外部请求数会影响页面的整体性能。
【每请求一次就要多占用一次cpu使用、多一次tcp连接】

2.每个url的请求又包括寻址、连接、请求传输、返回传输、断连的过程；因此每个阶段的外部环境也会影响整体性能。
【DNS服务器的寻址时间、请求和返回内容时的网络环境】

3.除了URL请求数量外，每个请求的内容大小也是影响性能的主要因素。
【文件越大消耗在传输过程中的时间就越长】

4.请求同样多的资源，并行请求和串行请求速率是不一样的，所以请求的资源要尽量支持同步请求。
【同步请求不同资源，即请求被发送到不同的资源服务器即可】

5.依据浏览器的加载、渲染机制，选择合适的HTML内容排版方式。
【减少反复创建对象实例的次数、充分利用缓存机制】

6.优先加载用户关注的内容。
【css加载优于js内容，首屏内容优于非首屏内容】

关注完http请求的过程后，再来关注整个请求过程中关注的几个时间点，通过确定时间点就可以确定影响性能的时间段，就是确定影响性能的因素。根据上面的介绍主要的几个时间点又可以分页面的整体时间点、以及单个url请求过程中的时间点。

单个请求的主要时间点：

1、Cache Read：缓存读取时间，或304错误的处理时间
2、Block：请求等待时间，取决于缓存检查，网络连接等待
3、DNS Lookup：DNS服务器查找时间，取决于dns服务的数量，dns注册的域
4、Connect：tcp连接的总时间，取决于连接类型，ssh，keepalive都会比http长
5、Send first to last：发送请求内容的时间，取决于请求内容大小，及上行的传输速度
6、Wait：等待响应的时间，取决于网络环境的响应，web服务器的处理时间
7、Receive first to last：接收响应内容的时间，取决于响应内容，下行的传输速度，也要考虑服务器的带宽
8、Time to first byte：从请求一直到接收到第一个字符的总时间，等于1+2+3+4+5+6
9、Network：网络消耗时间，等于3+4
10、Begin to end：整个请求的总时间，等于1+2+3+4+5+6+7

单个页面的主要时间点：

1、DOM Ready Time: DOM完成的时间，从接收html到完全转换成dom树所需的时间
2、DOM Ready to Page Load: 页面元素的加载和渲染完成时间，包括html，css，img及其它内容
3、Page Load Time: page页onload事件的时间，其实际时间等于总时间 - （DOM ready + 元素渲染时间）
4、URL Requests Begin to End:url请求所消耗的所有时间，从发送请求发起到接收最后一个字节断开
5、Network Time:消耗在网络上的时间，即tcp的连接时间
6、Begin to End:所有消耗的时间，包括请求结束后的渲染时间

Web前端的优化规则

猜你喜欢