前端性能优化
一、了解浏览器
1：浏览器的主要功能是将用户输入的url地址转化为可视化的图像；浏览器是多进程多线程的
2：进程：程序是一次性执行，它占有一片独有的内存空间，是操作系统的最小基本单元
3：线程：是进程内的一个独立执行单元，是cpu调度的最小单元
4：浏览器内有html解析器、css解析器、js引擎、layout模块和绘图模块等
二、什么是css阻塞和js阻塞？
1：css阻塞：
内联样式style标签和外联样式link引入；
#style标签的样式：
由html解析器解析、不阻塞DOM解析、不阻塞浏览器的渲染
#外联link引入的样式：（推荐使用的方式）
由css解析器解析、阻塞浏览器的渲染
不阻塞DOM渲染：DOM解析和CSS解析是并行的，浏览器解析DOM成dom tree，解析CSS成css tree，最终生成render tree
阻塞其后面的js渲染：若后面js是获取dom元素来修改样式，css还没有解析完毕，那js会获取到错误的信息
#优化的核心理念：尽快提高外联css的加载速度
使用cdn进行外部资源加速、对css进行压缩、减少http请求个数，对多个css文件合并、优化样式表代码
2：js阻塞：
阻塞DOM解析、阻塞浏览器渲染、阻塞后续js的执行
#优化的核心理念：尽量放在代码底部，js加载按照前后顺序
三、重排和重绘
1：图层：浏览器渲染一个页面时，会将页面分为多个图层layers
2：重排（reflow）：又称为回流；可以理解为元素位置发生变动，重排一定会产生重绘，重绘不一定产生重排
3：重绘（repaint）：某个元素发生了重绘，则整个图层就会发生重绘；比如元素颜色的变化
#优化方案：
减少产生重排和重绘的属性的使用；例如visibility替代display、将多次样式的使用合并为一次操作
四、延迟加载（懒加载）、预加载
#懒加载：
1：js图片延迟加载，延迟加载图片或符合某些条件时才加载某些图片
2：意义：懒加载的主要目的是作为服务器前端的优化，减少请求次数或者延迟请求数
3：实现方式：
1：纯粹的延迟加载，使用setTimeout或者setInterval进行加载延迟
2：条件加载，就是符合某些条件或者触发了某些事情才开始异步下载
3：可视区加载，即仅加载用户可以看到的区域
4：实现步骤：页面的img刚开始不设置src属性，浏览器就不会发送请求下载图片；
首先，不要将图片地址放在src属性中，而放在自定义属性中，页面加载完成后，根据scrollTop判断图片是否在用户视野中，如果在，将自定义属性中的路径放在src中；在滚动事件中重复判断是否进入视野
#预加载：
1：提前加载图片，当用户需要查看时直接从本地缓存中渲染
2：意义：可以说是牺牲服务器前端性能，换取更好的用户体验
3：实现方式：用CSS和JavaScript实现预加载、仅使用JavaScript实现预加载、使用Ajax实现预加载
详情：https://www.cnblogs.com/ranyonsue/p/11778306.html（他人的博客）
五、前端性能优化
减少http请求：
减少DNS查询：用户输入url之后，浏览器先要查询域名对应的服务器ip地址，在DNS查询完成之前，浏览器无法从服务器下载任何数据；使用keep-alive或者使用较少的域名
避免重定向：重定向所需要的信息都在http请求头中，而响应体一般是空的，定义url地址时尽量是完整的地址；客户端在接收到服务器的重定向时后，会根据响应头中的location地址再次发送请求，重定向会影响用户体验
缓存ajax请求（最重要的优化方式是缓存响应结果）
图片延迟加载（懒加载）、预加载
减少dom操作
样式文件放在head
脚本放在页面底部
使用外联样式和脚本
减少cookie大小
