从请求、传输、渲染3个方面提升Web前端性能
 的。请求JS的时候，浏览器会中断渲染进程，等待JS文件加载解析完毕，再重新渲染。所以要把JS文件放在页面的最后。 JS也可以通过两种方式由阻塞改成并行：一种是通过创建script标签，插入DOM中;另一种是在Script标签中增加async属性。 每种浏览器对同一域名并发的数量有限制，IE6/7是2，IE9是10，其他常见的浏览器是6，所以减少资源请求数量和使用多域名配置资源文件，能大大提高网站性能。 减少资源请求数量的方法，大致有以下几种： 1、通过打包工具，合并资源，减少资源数量。就是开发版本是很多个资源文件，部署的时候，按类合并成几个文件来输出。在实现模块管理的同时，实现统一输出。 2、CSS中，使用css sprite减少图片请求数量。 3、通过延迟加载技术，在用户无感知的情况下请求资源。 4、通过服务器配置，实现一次请求，返回多个资源文件，如淘宝CDN那样。 除了减少请求数量，也可以使用CDN镜像，来减少网络节点，实现快速响应。使用了CDN的请求，会根据用户所处的地理位置，找寻最近的CDN节点，如果请求是新的，则从资源服务器拷贝到节点，然后再返回给客户端。如果请求已经存在，则直接从节点返回客户端。 通过上面我们了解的缓存机制，如果我们部署上线的时候，是需要刷新缓存的。普通缓存通过强刷就能改过来，而CDN缓存则需要通过改变URL来实现。同时我们不可能要求用户按着Ctrl来刷新，所以通过打包工具，在部署的时候，统一更改URL是最有效的方式。而不常变更的库文件，比如echart、jquery，则不建议更改。 二、传输 从服务器往客户端传输，可以开启gzip压缩来提高传输效率。 Gzip有从1-10的十个等级。越高压缩的越小，但压缩使用的服务器硬件资源就越多。根据实践，等级为5的时候最均衡，此时压缩效果是100k可以压缩成20k。 三、渲染 浏览器在加载了html后，就会一边解析，一边根据解析出来的结果进行资源请求，并生成DOM树。而加载完毕的CSS，则被渲染引擎根据生成好的DOM树，来生成渲染树。等所有资源解析完毕计算好layout后，向浏览器界面绘制。随着用户操作，JS会修改DOM节点或样式，重新绘制和重新排列。重新绘制指的是绘制DOM节点对应的渲染节点，重新排列是指重新计算这些节点在浏览器界面的位置。很显然，重排是非常耗性能 （编辑：孝感站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
