西安web培训 如何提升页面渲染效率
Web页面的性能
我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，，邮件客户端，在线存储，甚至图形编辑，地理信息系统等等。虽然有着各种各样的不同，但是相同的是，他们背后的工作原理都是一样的：
用户输入网址
浏览器加载HTML/CSS/JS，图片资源等
浏览器将结果绘制成图形
用户通过鼠标，键盘等与页面交互
这些种类繁多的页面，在用户体验方面也有很大差异：有的响应很快，用户很容易就可以完成自己想要做的事情；有的则慢慢吞吞，让焦躁的用户在受挫之后拂袖而去。毫无疑问，性能是影响用户体验的一个非常重要的因素，而影响性能的因素非常非常多，从用户输入网址，到用户最终看到结果，需要有很多的参与方共同努力。这些参与方中任何一个环节的性能都会影响到用户体验。
宽带网速
DNS服务器的响应速度
服务器的处理能力
数据库性能
路由转发
浏览器处理能力
早在2006年，雅虎就发布了提升站点性能的指南，Google也发布了类似的指南。而且有很多工具可以和浏览器一起工作，对你的Web页面的加载速度进行评估：分析页面中资源的数量，传输是否采用了压缩，JS、CSS是否进行了精简，有没有合理的使用缓存等等。
如果你需要将这个过程与CI集成在一起，来对应用的性能进行监控，我去年写过一篇相关的博客。
本文打算从另一个角度来尝试加速页面的渲染：浏览器是如何工作的，要将一个页面渲染成用户可以看到的图形，浏览器都需要做什么，哪些过程比较耗时，以及如何避免这些过程（或者至少以更高效的方式）。
页面是如何被渲染的
说到性能优化，规则一就是：
If you can’t measure it, you can’t improve it. – Peter Drucker
根据浏览器的工作原理，我们可以分别对各个阶段进行度量。
像素渲染流水线
HTML文档
解析HTML文档，生成DOM
文档中引用的CSS、JS
解析CSS样式表，生成CSSOM
将JS代码交给JS引擎执行
合并DOM和CSSOM，生成Render Tree
根据Render Tree进行布局layout（为每个元素计算尺寸和位置信息）
绘制（Paint）每个层中的元素（绘制每个瓦片，瓦片这个词与GIS中的瓦片含义相同）
执行图层合并（Composite Layers）
使用Chrome的DevTools – Timing，可以很容易的获取一个页面的渲染情况
应该注意的是，浏览器可能会将Render Tree分成好几个层来分别绘制，最后再合并起来形成最终的结果，这个过程一般发生在GPU中。
Devtools中有一个选项：Rendering - Layers Borders，打开这个选项之后，你可以看到每个层，每个瓦片的边界。浏览器可能会启动多个线程来绘制不同的层/瓦片。
常规策略
为了尽快的让用户看到页面内容，我们需要快速的完成DOM+CSSOM - Layout - Paint - Composite Layers的整个过程。一切会阻塞DOM生成，阻塞CSSOM生成的动作都应该尽可能消除，或者延迟。
分割CSS
对于不同的浏览终端，同一终端的不同模式，我们可能会提供不同的规则集
高效的CSS规则
CSS规则的优先级
很多使用SASS/LESS的开发人员，太过分的喜爱嵌套规则的特性，这可能会导致复杂的、无必要深层次的规则
使用GPU加速
很多动画都会定时执行，每次执行都可能会导致浏览器的重新布局
异步JavaScript
我们知道，JavaScript的执行会阻塞DOM的构建过程，这是因为JavaScript中可能会有DOM操作
首次渲染之后
在首次渲染之后，页面上的元素还可能被不断的重新布局，重新绘制。如果处理不当，这些动作可能会产生性能问题，产生不好的用户体验。
访问元素的某些属性
通过JavaScript修改元素的CSS属性
在onScroll中做耗时任务
图片的预处理（事先裁剪图片，而不是依赖浏览器在布局时的缩放）
在其他Event Handler中做耗时任务
过多的动画
过多的数据处理（可以考虑放入WebWorker内执行）
强制同步布局/回流
元素的一些属性和方法，当在被访问或者被调用的时候，会触发浏览器的布局动作（以及后续的Paint动作），而布局基本上都会波及页面上的所有元素。当页面元素比较多的时候，布局和绘制都会花费比较大。
关注公众号“蓝鸥西安”了解更多专业技术资讯。蓝鸥线上学习平台鸥课学院，是蓝鸥旗下的在线教育平台。鸥课学院专注整合优势教学资源、打造适合在线学习并能保证教学结果的优质教学产品，为用户提供满足自身成长和发展要求的有效服务。
