·减少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替换