前端优化

前言：前端有很多优化的手段，虽然我都没用过，但是面试真的很爱问，而且以后肯定会用的上，假如我还从事这个行业的话，今天我就来总结一下吧。

前端性能优化

首先祭出一张图

1、减少HTTP请求次数和资源大小

（1）尽量压缩css和js文件

尽量将css和js文件合并、压缩，减少请求次数和资源的大小，采用打包工具并合理使用压缩插件等

（2）采用图片懒加载

图片懒加载技术可以减少页面第一次加载过程中请求资源的次数

具体步骤：
　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图
　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息

（3）使用精灵图技术

将所有图片相对较小的资源绘制在一张大图上，只需要将大图下载下来然后利用图片定位来将小图展现出来

（4）使用缓存

合理使用缓存，可以减少http请求次数，通过配置expires等字段。

2、使用内容发布网络CDN

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络"边缘"的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。
过程如下：
1.用户向浏览器输入www.web.com这个域名，浏览器第一次发现本地没有dns缓存，则向网站的DNS服务器请求；

2.网站的DNS域名解析器设置了CNAME，指向了www.web.51cdn.com,请求指向了CDN网络中的智能DNS负载均衡系统；

3.智能DNS负载均衡系统解析域名，把对用户响应速度最快的IP节点返回给用户；

4.用户向该IP节点（CDN服务器）发出请求；

5.由于是第一次访问，CDN服务器会向原web站点请求，并缓存内容；

6.请求结果发给用户

3、减少DNS查找

通常浏览器查找一个给定域名的IP地址要花费20~120毫秒，在完成域名解析之前，浏览器不能从服务器加载到任何东西。
一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验

4、代码优化

（1）将样式表放在头部，将脚本放在底部

将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验。将样式表放在文档底部会阻止浏览器中的内容逐步出现。
跟样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容

（2）减少闭包的使用

原因：使用闭包后，闭包所在的上下文不会被释放

（3）引入css时，减少import导入

css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下加载，而link是异步的操作

（4）使用事件委托（代理）

参考文献

https://blog.csdn.net/qq_38045106/article/details/84782401
https://www.cnblogs.com/lanxiansen/p/10972802.html
https://www.jianshu.com/p/2e69e9891c67
https://blog.csdn.net/hemeinvyiqiluoben/article/details/81026728
https://blog.csdn.net/5hongbing/article/details/78025349