JavaScript前端性能优化

JS性能优化的知识很是庞杂,这里咱们来介绍几种经常使用的性能优化方式。


1、JS中的前端性能优化原则:

  • 多使用内存、缓存等方法
  • 减小CPU计算、减小网络请求

2、针对上述两项原则,咱们能够从两个方向入手来进行前端的性能优化。

一、加载资源优化

静态资源的压缩合并php

clipboard.png

clipboard.png
咱们能够利用webpack等打包工具进行资源的合并与压缩操做,能够大大减少资源的大小,实现页面更快的加载。css

静态资源缓存
当浏览器发送请求时,能够检测该资源的最新版本是否存在于本地,若存在,则不进行从新加载。能够经过连接名称控制缓存,当缓存改变的时候,连接名称才会改变。html

使用CDN让资源加载更快
CDN能够对不一样区域的网络进行优化。例如用BootCDN进行优化的事例:前端

clipboard.png

SSR后端渲染
使用SSR进行后端渲染,将数据直接输入到HTML中,而不须要先下载HTML页面,再执行AJAX获取服务器端的数据。很早之前的jsp、php、asp都属于后端渲染,如今Vue、React也提出了这样的概念,经测试代表,页面的加载时间能够大大缩短。webpack

二、渲染优化

CSS放到header中,JS放到body最下面
(1)将CSS放在<header></header>部分:在渲染body部分时,能够渲染已经规定好样式。若将CSS样式放到要渲染的DOM节点以后,就会出现最开始按照默认形式渲染,执行到css样式又从新渲染。形成样式跳转:用户体验差;性能差:需渲染两次。
正确使用方式以下:
clipboard.png
若将6行放到9后面,就会出现重复加载现象。web

(2)JS会阻塞页面DOM的加载,若将JS放到body最下面,首先不会阻塞页面渲染,能够将页面所有渲染后再执行js。其次能够拿到全部的标签,若是放在html上面可能拿不到标签,由于尚未被渲染到。
错误事例:加载执行9行,阻塞第10行的执行。
clipboard.png后端

注意以该方式进行异步加载时不会阻塞页面的渲染,由于img标签已经渲染出来,只是请求的异步加载内容在加载。
clipboard.png浏览器

图片的懒加载
所谓懒加载,就是当用户下拉到该页面时再加载图片,而不是当用户打开页面就将全部图片所有加载完毕。缓存

clipboard.png
在页面渲染时,将src传入一个很小的图片,真正的图片地址放在自定义属性data-lealsrc中,当真正执行时,再将所需图片加载进来。性能优化

减小DOM查询,对DOM查询作缓存
DOM操做是一种很是耗费性能的操做,在写程序时要尽可能减小DOM操做。

clipboard.png
经过上面的两种实现方式对比能够看出:未缓存DOM查询时,每次循环都要进行DOM查询;缓存了DOM查询时,只需进行一次DOM查询操做,将数值保存在变量中使用便可。

合并DOM操做
clipboard.png
向文档中插入10个li标签,原始操做是有十次DOM插入操做,可是咱们利用定义一个片断(frag),向片断中插入li,不会触发DOM操做,最后将该片断插入到DOM中。只许一次DOM操做,大大提升性能。

时间节流
clipboard.png
这个代码实现的功能是:当连续很快输入时,不须要每次抬起按键都执行函数,只有当按键抬起超过100ms才执行操做,能够减小事件操做,由于在连续操做时会执行不少计算,严重影响性能。

用DOMContentLoaded替代window.onload
window.onload:在页面加载完毕才会执行操做。
DOMContentLoaded:在页面渲染完执行操做,此时图片、视频等可能还未被加载完。

clipboard.png

图片、视频等静态资源大小良莠不齐,加载完成时间又会有很大的差异,但html通常很小,加载时间很短,因此利用DOMContentLoaded能够显著提升性能和用户体验。

相关文章
相关标签/搜索