前言
基于现代Web
前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的index.html
和打包好的JS、CSS
等资源,在浏览器内执行JS
,动态获取数据并渲染页面,从而将结果呈现给用户。在这个过程中,有两个步骤可能较为耗时,一个是网络资源的加载,另一个是浏览器内代码执行和DOM渲染。而耗时的增加会导致页面响应慢,卡顿,影响用户体验,针对上述两种耗时的情况,常见的优化方向有:
- 缩短请求耗时;
- 减少重排重绘;
- 改善JS性能。
下面讲一下如何减少重排重绘:
减少重排重绘
除了网络资源以外,另一个影响前端性能的因素就是前端页面的渲染绘制效率。
虽然不同的前端框架有一些差异,但整体的优化思路是一致的比如下面的优化方案:
将 CSS 放在页面顶部,js放到底部
我们研究雅虎网页性能时发现把样式表移到 里会让页面更快。这是因为把样式表移到 里允许页面逐步渲染。
关注性能的前端工程师希望页面被逐步渲染,这时因为,我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈,比如进度条的重要性已经被大量研究和记录。在我们的情况中,HTML 页面就是进度条。当浏览器逐步加载页面头部,导航条,logo 等等,这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。
把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染,包括 IE。