如何从请求,传输,渲染3个方面提升网络前端性能

  

  什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:   

  

  输入网址→解析域名→请求页面→解析页面并发送页面中的资源请求→渲染资源→输出页面→监听用户操作→重新渲染。   

  

  通过上面的路径可以看出浏览器分为请求,传输,渲染三部分来实现用户的访问,本文就从这三个部分来浅析如何提升网络前端性能。   

  

     

  

  浏览器为了减少请求传输,实现了自己的缓存机制。浏览器缓存就是把一个已经请求过的网络资源拷贝一份副本存储在浏览器中,当再次请求相同的URL时,先去查看缓存,如果有本地缓存,浏览器缓存机制会根据验证机制(Etag)和过期机制(last - modified)进行判断是使用缓存,还是从服务器传输资源文件。具体流程如下图所示:   

     如何从请求,传输,渲染3个方面提升网络前端性能”>
  <p>
  </p>
  
  <p>
  浏览器的请求有些是并发的,有些是阻塞的,比如:图片,CSS,接口的请求是并发;JS文件是阻塞的。请求JS的时候,浏览器会中断渲染进程,等待JS文件加载解析完毕,再重新渲染。所以要把JS文件放在页面的最后。
  </p>
  <p>
  JS也可以通过两种方式由阻塞改成并行:一种是通过创建脚本标签,插入DOM中;另一种是在脚本标签中增加异步属性。
  </p>
  <p>
  每种浏览器对同一域名并发的数量有限制,IE6/7是2,IE9是10,其他常见的浏览器是6,所以减少资源请求数量和使用多域名配置资源文件,能大大提高网站性能。
  </p>
  <p>
  减少资源请求数量的方法,大致有以下几种:
  </p>
  <p>
  1,通过打包工具,合并资源,减少资源数量。就是开发版本是很多个资源文件,部署的时候,按类合并成几个
  
  输出。在实现模块管理的同时,实现统一输出。
  </p>
  <p>
  2、CSS中使用CSS精灵减少图片请求数量。
  </p>
  <p>
  3,通过延迟加载技术,在用户无感知的情况下请求资源。
  </p>
  <p>
  4,通过服务器配置,实现一次请求,返回多个资源文件,如淘宝CDN那样。
  </p>
  <p>
  除了减少请求数量,也可以使用CDN镜像,来减少网络节点,实现快速响应。使用了CDN的请求,会根据用户所处的地理位置,找寻最近的CDN节点,如果请求是新的,则从资源服务器拷贝到节点,然后再返回给客户端。如果请求已经存在,则直接从节点返回客户端。
  </p>
  <p>
  通过上面我们了解的缓存机制,如果我们部署上线的时候,是需要刷新缓存的。普通缓存通过强刷就能改过来,而CDN缓存则需要通过改变URL来实现。同时我们不可能要求用户按着Ctrl来刷新,所以通过打包工具,在部署的时候,统一更改URL是最有效的方式。而不常变更的库文件,比如echart, jquery,则不建议更改。
  </p>
  <h3>
  
  </h3>
  <p>
  在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流
  </p>
  <h3>
  
  <br/>
  </h3>
  <h3>
  
  </h3>
  <p>
  从服务器往客户端传输,可以开启gzip压缩来提高传输效率。
  </p>
  <p>
  Gzip有从1到10的十个等级。越高压缩的越小,但压缩使用的服务器硬件资源就越多,根据实践,等级为5的时候最均衡,此时压缩效果是100 k可以压缩成20 k。
  </p>
  <h3>
  
  </h3>
  <p>
  浏览器在加载了html后,就会一边解析,一边根据解析出来的结果进行资源请求,并生成DOM树。而加载完毕的CSS,则被渲染引擎根据生成好的DOM树,来生成渲染树。等所有资源解析完毕计算好布局后,向浏览器界面绘制。随着用户操作,JS会修改DOM节点或样式,重新绘制和重新排列。重新绘制指的是绘制DOM节点对应的渲染节点,重新排列是指重新计算这些节点在浏览器界面的位置。很显然,重排是非常耗性能的。我们要做的是减少重排的次数。
  </p>
  <p>
  生成DOM树的时候,我们可以通过减少DOM节点来优化性能。最初都是用表布的局,节点深度和数量相当复杂、性能很差。同样CSS作为层叠样式表,层级也不可太深,不然遍历的成本很高。另外CSS表达式的属性相当耗性能,能不用则不用。动画效果能用CSS写的就不用JS写,渲染引擎不一样,性能损耗也不一样。
  <h2 class=如何从请求,传输,渲染3个方面提升网络前端性能