前端性能优化

前端性能优化原则，多使用内存、缓存（http缓存机制）或其他方法，减少网络请求加载时间、减少CPU计算量。用空间换时间。

1、加载优化（减少网络请求数量）

对js、css、image 资源进行合并，减少请求数量。将多个js文件合并为一个；多个css文件合并成一个；多个image图标合并成一张图，使用CSS精灵图技术展示。

将静态资源（js、css、image）缓存到本地，减少http请求的数量。http的缓存分为强制缓存和协商缓存，优先推荐使用强缓存。

图片懒加载、第三方资源异步加载，减少网页首次加载时的Http请求数量。

删除无效的请求

避免img、iframe等标签的src属性为空，空src会重新加载当前页面，影响速度和效率

页面上的一些小图标用字体图标代替

2、请求响应速度优化

使用CDN：把内容从中心媒体服务器分发到边缘服务器的网络体系即内容分发网络，CDN具有更低的网络延迟和丢包率，能够分配负载，节省带宽提高网站的性能，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

开启Gzip：将js、css、图片等文件进行压缩，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。

3、页面渲染优化

优化资源加载顺序，css放在header中，js放在body后执行；css会触发DOM树的重新渲染，js会阻塞程序的执行（js是单线程）

4、代码优化

DOM性能优化： 减少对DOM查询 及 减少DOM操作（增、删、改）引起的重排（回流）和重绘的次数

合并多次对css样式的修改，改为一次处理（减少重排和重绘次数）
对DOM查询做缓存 （减少频繁查询DOM，将查询内容保存在变量中）
将频繁DOM操作改为一次性操作（利用 document.createDocumentFragment()创建文档片段）
操作DOM前，先把DOM节点删除或隐藏 （display:none时的元素不在渲染树中，减少重排次数）
采用事件代理处理事件 （利用事件冒泡机制，将事件绑定在父元素上，减少DOM访问次数和内存占用）

优化高频事件：使用节流throttle 和 防抖debounce 对高频事件进行优化