前端面试必考知识点梳理-性能优化

问题：从输入url到生成页面的详细过程

---

页面渲染

1.浏览器根据DNS服务器得到域名的IP地址

2.向这个IP的机器发送HTTP请求

3.服务器处理并返回请求

4.浏览器得到返回内容

5.浏览器根据HTMl结构生成DOM Tree

6.根据css生成CSSOM

7.将DOM 和  CSSOM整合成RenderTree（渲染树）

8.根据RenderTree 开始渲染

9.遇到script标签会立即执行，并阻塞渲染

问题：为什么css文件要放在head中？JS文件要放在body下边？

因为css可以先定义dom的样式规则，然后渲染。如果放在dom后边，dom会先按默认的样式渲染一遍，然后在按照css在渲染一遍。

JS文件会先执行，阻塞渲染。JS执行完再继续渲染下边的dom。而且js代码也有可能操作下边的dom，报错。

---

性能优化

加载页面和静态资源入手：

1.静态资源合并压缩（例如js文件）

2.静态资源缓存

3.使用CDN让资源加载更快（CDN会就近获取资源）

4.使用SSR后端渲染

页面渲染入手：

1.CSS放前边，JS放后边

2.懒加载（图片懒加载，下拉更多）

3.减少dom查询和操作。缓存dom

4.事件节流