Javascript性能优化（初步完结）

最新推荐文章于 2019-12-23 15:38:58 发布

低调的小犬_Hansen

最新推荐文章于 2019-12-23 15:38:58 发布

阅读量256

点赞数

分类专栏：性能优化 javascript 文章标签：前端性能优化

本文链接：https://blog.csdn.net/qq_38588845/article/details/103165926

版权

javascript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

性能优化

5 篇文章 0 订阅

订阅专栏

一、性能优化原则

1.多使用内存、缓存或其他办法

2.减少CPU计算量，减少网络加载耗时

3.空间换时间（适用于所有编程的性能优化）

二、性能优化主要的

资源合并：将分散的资源合并到一起，减少HTTP请求
缓存：
使用更快的网络：CDN
SSR
让渲染更快，减少重绘

（1）css放在head，JS放在body最下面
（2）尽早开始执行JS，用DOMContentLoaded触发
（3）懒加载（图片懒加载，上滑加载更多）
（4）对DOM查询进行缓存，减少DOM的使用
（5）频繁DOM操作，合并到一起插入DOM结构
（6）节流throttle防抖debounce

1.资源合并：将分散的资源合并到一起

2.缓存：

+静态资源加hash后缀，根据文件内容计算hash，文件内容不变，则hash必变，则url不变，

+url和文件不变，则会自动触发http缓存机制，返回403

3.CDN

+cdn是根据网络做静态服务的，还有cdn是根据你地域做的网络服务，地域不同，网络也不同，速度非常的快，可以没有并行的限制。

5.SSR

+服务器端渲染：将网页和数据一起加载，一起渲染

+非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据

+早先是JSP、ASP、PHP，现在是vue、React、SSR

6.让渲染更快，减少重绘

（1）css放在head，JS放在body最下面

JS需要等到CSS加载完毕以后，才会真正的开始执行，CSS会阻塞页面渲染，当浏览器遇到CSS时，会保证CSS加载完毕CSSOM后才会进行渲染；当浏览器遇到JS内容时，会停止DOM的构建，直到JS执行完毕，JS会查询、修改DOM CSSOM，因此浏览器会停止执行JS，直到CSSOM生成完毕。

（2）尽早开始执行JS，用DOMContentLoaded触发

DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

<link rel="stylesheet" href="css.php">
<script>
document.addEventListener('DOMContentLoaded',function(){
    console.log('3 seconds passed');
});
</script>

附加：

load事件是等全部资源加载完后猜执行，包括图片、视频等

DOM渲染完即可执行，此时图片、视频还可能没有加载完

（3）懒加载（图片懒加载，上滑加载更多）

自建伪属性，将真实地址充当伪属性的值，然后滚动加载时，再将伪属性值复制给src真正的属性，以达到懒加载的目的。

（4）对DOM查询进行缓存，减少DOM的使用

将有DOM的东西先缓存起来，如果说后期每个都是直接操作DOM会很耗费内存，而将DOM缓存起来赋值给一个变量，未来的性能和效率上会大幅度提高.

看截图：将DOM缓存赋值类lenght变量

（5）频繁DOM操作，合并到一起插入DOM结构

我们可以把东西都准备好一次性插入节点，比一次一次的插入节点效率要高（截图中是将内容先插入文档片段中，然后都完成以后一次性的插入到DOM树中）

这里让我想到，可以用字符串拼接的方式把内容都拼接好，然后一次性插入节点是一样的。

（6）节流throttle防抖debounce

（看本人另外一篇）

https://blog.csdn.net/qq_38588845/article/details/103168528

三、非核心代码异步加载-异步加载的方式-异步加载的区别

我们对于非核心代码可以采用代码异步加载的方式

1.异步加载的方式

（1）动态脚本加载（这个方式会有很多的）

https://blog.csdn.net/earth_smallma/article/details/80833965

（2）defer加载

<head>
  <script src="./a.js" defer></script><!--2-->
  <script src="./b.js" defer></script><!--3-->
</head>
<body>
  <script>
    console.log(1)
  </script>
</body>

原本没有defer返回2，3，1；加了之后返回1， 2， 3

（3）async加载

<head>
  <script src="./a.js" async></script>
  <script src="./b.js" async></script>
</head>
<body>
  <script>
    console.log(1)
  </script>

a.js b.js 哪个先执行完先返回

defer与async加载的区别

defer是再HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行

async是在加载完之后立即执行，如果是多个，执行和加载顺序无关

四、浏览器缓存

强缓存：就是浏览器不与服务交流，直接拿来用。

Expires(过期时间)，它的值代表绝对时间,服务端和客户端的时间可能不一致，所以引出了Cache-Control。 Cache-control:max-age是相对时间，就是说，这个相对时间内，不会向服务端拿资源。如果两个都下发了，则以Cache-control的时间为准。

协商缓存：本地有一个副本，问服务器能否使用这个缓存，是否过期。

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，于是添加If-Modified-Since这个header，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200，Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。

备注：前端默认不需要做什么，主要是服务端来设置，按照 HTTP响应头的缓存设置就好，

五、预解析DNS

有两种

  <meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="dns-prefetch" href="//host_name_to_prefetch.com">

第一种：上面的meta

一般来说http里面a标签是支持预解析的，但是https却关闭了预解析，加上了meta这句话，强制在https中打开了a标签的预解析。

第二种：上面的link

就是打开dns预解析，不包括a，因为浏览器在http中默认打开了预解析。

低调的小犬_Hansen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript性能优化（初步完结）

性能优化原则1.多使用内存、缓存或其他办法2.减少CPU计算量，减少网络加载耗时3.空间换时间（适用于所有编程的性能优化）让加载更快1.减少资源体积：压缩代码2.减少访问次数：合并代码，SSR服务器端渲染，缓存3.使用更快的网络：CDN让渲染更快1.css放在head，JS放在body最下面2.尽早开始执行JS，用DOMContentLoaded触发...
复制链接

扫一扫

专栏目录