基于现代Web前端框架的应用，其原理是通过浏览器向服务器发送网络请求，获取必要的index.html和打包好的JS、CSS等资源，在浏览器内执行JS，动态获取数据并渲染页面，从而将结果呈现给用户。在这个过程中，有两个步骤可能较为耗时，一个是网络资源的加载，另一个是浏览器内代码执行和DOM渲染。而耗时的增加会导致页面响应慢，卡顿，影响用户体验，针对上述两种耗时的情况，常见的优化方向有：
- 缩短请求耗时
- 减少重排重绘
- 改善JS性能
以下主要解决如何减少重排重绘：
- 避免使用 CSS 表达式
- 使用外部 JavaScript 和 CSS
在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。
对于大多数网站而言，难以精确度量以判断是否使用内联或外部文件，此时建议是使用外部文件的方式。对于这个问题的一个例外是网站主页，由于主页对于响应时间要求更高，因此更加倾向于内联而不是外部文件。
对于内联文件而言，由于无法利用浏览器缓存，因此给人感觉依然比较低效。我们可以通过加载后下载和动态内联的方式来使得网站主页既可以获得内联的优势，同时也能缓存外部文件。 - 减少渲染量
- 虚拟列表：只渲染可见区
- 惰性加载：无限滚动
- 按需加载：页面只在切换过去时才加载
-
减少渲染次数
- 防抖与节流
- 使用
requestAnimationFrame替代setInterval执行动画
