·减少HTTP请求数量
在浏览器与器进行通信时，主要通过HTTP进行通信。浏览器与器需要经过三次握手，每次握手需要花费量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数)，一旦HTTP请求数量达到一定数量，资源请求就存在等待状态，这很致命的，因此减少HTTP的请求数量可以很程度上对性能进行优化。
CSSSprites：国内俗称CSS精灵，这将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSSbackground属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并CSS和JS文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少HTTP请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用lazyLoad：俗称懒加载，可以控制网页上的内容在一始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
·控制资源文件加载优先级
浏览器在加载HTML内容时，将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应内容，为了时间展示页面给用户，就需要将CSS提前加载，不要受JS加载影响。
一般情况下都CSS在头部，JS在底部。
·利用浏览器缓存
浏览器缓存将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到器重新请求该资源，直接在本地读取该资源。
·减少重排(Reflow)
基本原理：重排DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结的visibility属性，这也Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
前端优化性能的方法减少Reflow，如果需要在DOM操作时样式，尽量使用增加class属性，而不通过style操作样式。
·减少DOM操作
·图标使用IconFont替换

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。