- 讲到前端性能优化就需要讲到一个url请求到网页渲染的过程了
从上面看到涉及到了网络层面，服务端层面，构建层面，浏览器渲染层面
1. 经历的过程
DNS解析 -> http请求 -> 服务器返回 -> 浏览器渲染
1.1 DNS解析
DNS解析就是浏览器查到ip地址的过程 找的话是先从本地host文件找，如果没找到则向本地DNS服务器(地址是8.8.8.8/114.114.114.114)查找。如果上面都没有找到的还则一层层向上找，直到找到13台根服务器。
1.2 http请求 和服务器渲染
找到ip地址后生成http请求并通过TCP/IP协议发送给Web服务器,web服务器相应通过TCP/IP协议将资源返回给服务器。
1.3 浏览器渲染
浏览器返回html，从上到下进行加载
- html解析生成
DOM树 - css解析生成
css 规则树(css rule Tree) - DOM 树和css树结合生成render tree
- 浏览器开始深度遍历进行渲染，绘制渲染树
这个过程会有回流和重绘
2. 优化的点：
2.1. DNS预解析
DNS-prefetch是尝试在请求资源之前解析域名。仅对跨域域上的DNS查找有效
2.2 减少http请求方面
- 合并请求，合并js,css，图片等方式来减少请求
- 域名拆分：主要是为了增加浏览器的下载的并行度，让浏览器能同时发出更多的请求
主域名abc.com,js,css和图片使用三个域名加载，分别是img.abc.com,css.abc.com,img.abc.com
2.3 减少资源请求的大小方面
- 开启gzip压缩，可以将资源在服务端进行压缩，然后发送到浏览器后进行解压
- 前端的代码进行打包
2.4 减少连接的次数方面
- 开启
keep-alive,开启keep-alive能有效减少浏览器与服务器建立连接的次数
2.5 建立缓存机制
- 资源文件的强缓存和协商缓存
- 数据也可以做缓存localStorage,sessionStorage,cookie,localStorage,cookie
- 离线存储(很少用)manifest
- CDN区域分布式服务器的开发和部署(费钱，效果会很好)
2.6 代码层面上的优化
- 减少DOM的重绘和回流
- 在js中尽量减少闭包的使用(内存优化)
- 在js中避免'嵌套循环'和'死循环'
- 尽可能使用事件委托
- 尽量减少css表达式的使用
