前端优化方案--减少重排重绘

前言

基于现代Web前端框架的应用，其原理是通过浏览器向服务器发送网络请求，获取必要的index.html和打包好的JS、CSS等资源，在浏览器内执行JS，动态获取数据并渲染页面，从而将结果呈现给用户。在这个过程中，有两个步骤可能较为耗时，一个是网络资源的加载，另一个是浏览器内代码执行和DOM渲染。而耗时的增加会导致页面响应慢，卡顿，影响用户体验，针对上述两种耗时的情况，常见的优化方向有：

• 缩短请求耗时;
• 减少重排重绘;
• 改善JS性能。

下面讲一下如何减少重排重绘：

减少重排重绘

除了网络资源以外，另一个影响前端性能的因素就是前端页面的渲染绘制效率。

虽然不同的前端框架有一些差异，但整体的优化思路是一致的比如下面的优化方案：

将 CSS 放在页面顶部，js放到底部

我们研究雅虎网页性能时发现把样式表移到 里会让页面更快。这是因为把样式表移到 里允许页面逐步渲染。

关注性能的前端工程师希望页面被逐步渲染，这时因为，我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈，比如进度条的重要性已经被大量研究和记录。在我们的情况中，HTML 页面就是进度条。当浏览器逐步加载页面头部，导航条，logo 等等，这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。

把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染，包括 IE。