前端如何进行页面优化

参考：https://www.cnblogs.com/MarcoHan/p/5295398.html、站长之家：http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtml

1、性能优化的重要性

研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡。

只有10%~20%的最终用户响应时间花在了下载HTML文档上（即从Web服务器获取HTML文档并传送到浏览器的），其余的80%~90%时间花在了下载页面中的所有组件上。

进行页面优化的方法如下：

  1. 让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩
  2. 减少网络请求的次数：雪碧图/精灵图
  3. 减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等）
  4. 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
  5. 避免无用渲染：懒加载

 

2、减少HTTP请求达到性能优化

上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量次数

 

2.1、使用字体图标

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。

 

2.2、合并脚本和样式表

将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。

不过合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说可能导致反而增加了下载量。

 

2.3、CSS Sprites技术

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，然后通过CSS background背景定位技术技巧布局网页背景。这样一来，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

示例代码：

<div>
    <span id="image1" class="nav"></span>
    <span id="image2" class="nav"></span>
    <span id="image3" class="nav"></span>
    <span id="image4" class="nav"></span>
    <span id="image5" class="nav"></span>
</div>
.nav {
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 1px solid #000;
    background-image: url('E:/1.png');
}
#image1 {
        background-position: 0 0;
}
#image2 {
        background-position: -95px 0;
}
#image3 {
        background-position: -185px 0;
}
#image4 {
        background-position: -275px 0;
}
#image5 {
        background-position: -366px -3px;
}

3、使用CDN缩短HTTP请求的时间

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络拥堵的测量。例如，CDN可能选择具有最短响应时间的服务器，由此缩短了HTTP请求的时间。

 

4、添加Expires头来缓存组件

Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时，它会和相应的组件一起保存到其缓存中，只要组件没有过期，浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT（格林尼治标准时间）。
Expires存在着明显的不足：
（1）Expires头使用的是一个特定的时间，要求客户端和服务器端的时钟严格同步。何为严格同步？我们知道客户端的时间是可以修改的，如果服务器和客户端的时间不统一，这就导致有可能出现缓存提前失效的情况，存在不稳定性。（2）假如Expires的日期到来了，那么还需要在服务器配置中提供一个新的日期。
面对这种情况，HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久，使用秒为单位，例如Cache-Control：max-age=3600；表示组件将被缓存60分钟。如果max-age和Expires同时出现，则max-age有更高的优先级，浏览器会根据max-age的时间来确认缓存过期时间。
Cache-Control和expires都是在server端配置。

5、压缩组件

客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法，如果客户端请求报文没有包含Accept-Encoding首部，服务器就会假设客户端能够接受任何编码格式；服务器响应报文中包含Content-Encoding表示采用的压缩方法。

（然而，一个统计表明，大约有15%的客户端请求是没有Accept-Encoding请求的，因为客户端的一些web代理和PC安全软件会移除浏览器发出的Accept-Encoding，因为监听未经压缩的响应会占用更少的CPU资源，但却无疑增加了网络传输的时间。）

服务器压缩文件请参考：https://blog.csdn.net/ygy162/article/details/51058979

6、将样式表放在头部（实现逐步渲染）

在有些低版本浏览器中，如果将样式表放在底部的话，浏览器会等样式表加载完毕后再渲染DOM。但如果将样式表放在头部的话，也是先加载css表，但是此时可以实现逐步渲染DOM，因为浏览器不会等到所有的HTMl元素解析之后再构建和布局dom树，而是先把部分内容解析并显示出来。
IE8以下(包括IE8)的工作方式是认为如果css表仍在加载，构建呈现树就是一种浪费，它认为在所有样式表加载并解析完毕之前无需绘制任何东西。所以直到css加载完毕整个浏览器显示都是空白，由此可能造成 “白屏” 现象。
高版本浏览器不用等待样式表加载完毕再渲染DOM树，而是逐渐开始就渲染，这时当我们将css放在底部，页面也可以逐步呈现。但是在css下载并解析完毕之后，已经呈现的文字和图片就会使用新的样式进行重绘，这就是“无样式内容的闪烁”，这是一种非常不好的用户体验。
所以把样式表放在头部是最好的选择。
<style> 标签应该放在 <head> 标签里面

7、将脚本放在底部（避免阻塞DOM解析）

javascript会阻塞dom的解析。当解析过程中遇到<script>标签的时候，便会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后执行。在处理完脚本之后，浏览器便继续解析HTML文档。
所以将脚本放在底部是最好的，如果要将脚本放在顶部的话可以使用jQuery和JS中的load方法：
//在DOM加载后，全部内容加载前运行
$(document).ready(function(){});    
//在全部内容加载后运行
window.onload = function(){};    // —-js    
$(window).load(function(){});　　 //---jquery

7.1、script标签应该放在body标签内

许多人认为只要放在底部了，无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的，其实还是有差别的，因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错，是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签， 都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

 

posted @ 2019-03-04 14:00  wenxuehai  阅读(2244)  评论(0)  编辑  收藏  举报
//右下角添加目录