你写的js性能有多差你知道吗 | js性能优化

最新推荐文章于 2023-06-20 07:07:56 发布
最新推荐文章于 2023-06-20 07:07:56 发布
阅读量2.1k 收藏 4
点赞数 2
分类专栏： 前端 文章标签： javascript 性能优化 服务器 软件工程 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58360406/article/details/129420457
版权

性能的计算⽅式

确认⾃⼰需要关注的指标
常⻅的指标有：

  1. ⻚⾯总加载时间 load
  2. ⾸屏时间
  3. ⽩屏时间

代码 尝试⽤⼀个指令, 挂载在重要元素上, 当此元素inserted就上报

各个属性所代表的含义

  1. connectStart, connectEnd
    分别代表TCP建⽴连接和连接成功的时间节点。如果浏览器没有进⾏TCP连接（⽐如使⽤持久化连接webscoket），则两者都等于domainLookupEnd；
  2. domComplete
    Html⽂档完全解析完毕的时间节点；
  3. domContentLoadedEventEnd
    代表DOMContentLoaded事件触发的时间节点：⻚⾯⽂档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML⽂档不会等待样式⽂件,图⽚⽂件,⼦框架⻚⾯的加载(load事件可以⽤来检测HTML⻚⾯是否完全加载完毕(fully-loaded))。
  4. domContentLoadedEventStart代表DOMContentLoaded事件完成的时间节点，此刻⽤⼾可以对⻚⾯进⾏操作，也就是jQuery中的domready时间；
  5. domInteractive
    代表浏览器解析html⽂档的状态为interactive时的时间节点。domInteractive并⾮DOMReady，它早于DOMReady触发，代表html⽂档解析完毕（即dom tree创建完成）但是内嵌资源（⽐如外链css、js等）还未加载的时间点；
  6. domLoading
    代表浏览器开始解析html⽂档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点；
  7. domainLookupStart domainLookupEnd
    分别代表DNS查询的开始和结束时间节点。如果浏览器没有进⾏DNS查询（⽐如使⽤了cache），则两者的值都等于fetchStart；
  8. fetchStart
    是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前⽂档的缓存；
  9. loadEventStart, loadEventEnd
    分别代表onload事件触发和结束的时间节点
  10. navigationStart
  11. redirectStart, redirectEnd
    如果⻚⾯是由redirect⽽来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；
  12. requestStart
    代表浏览器发起请求的时间节点，请求的⽅式可以是请求服务器、缓存、本地资源等；
  13. responseStart, responseEnd
    分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第⼀个字节和最后⼀个字节数据的时刻；
  14. ecureConnectionStart
    可选。如果⻚⾯使⽤HTTPS，它的值是安全连接握⼿之前的时刻。如果该属性不可⽤，则返回undefined。如果该属性可⽤，但没有使⽤HTTPS，则返回0；
  15. unloadEventStart, unloadEventEnd
    如果前⼀个⽂档和请求的⽂档是同⼀个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前⼀个⽂档的开始和结束时间节点。否则两者都等于0；

性能优化

  1. 加速或减少HTTP请求损耗：使⽤CDN加载公⽤库，使⽤强缓存和协商缓存，⼩图⽚使⽤Base64代替，⻚⾯内跳转其他域名或请求其他域名的资源时使⽤浏览器prefetch预解析等；
  2. 延迟加载：⾮重要的库、⾮⾸屏图⽚延迟加载，SPA的组件懒加载等；
  3. 减少请求内容的体积：开启服务器Gzip压缩，JS、CSS⽂件压缩合并，减少cookies⼤⼩，SSR直接输出渲染后的HTML等；
  4. 浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
  5. 优化⽤⼾等待体验：⽩屏使⽤加载进度条、菊花图、⻣架屏代替等；

本地如何查看⻚⾯性能？

chrome performance
chrome-extension的请求混杂在⻚⾯请求中，难以分析filter中填写 -scheme:chrome-extension 即可过滤掉插件请求

webpack打包分析
webpack-bundle-analyzer插件，代码：vue.config.js + package.json

如何监控性能变化？

⽇志上报 阿⾥云演⽰

pagespeed https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn
数据分析 90分位 50分位 TP50、TP90和TP99等指标常⽤于系统性能监控场景，指⾼于50%、90%、99%等百分线的情况。

具体的优化⽅式

浏览器渲染原理
和渲染息息相关的主要有

  1. GUI渲染线程
    GUI渲染线程负责渲染浏览器界⾯HTML元素,当界⾯需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执⾏。
    在Javascript引擎运⾏脚本期间,GUI渲染线程都是处于挂起状态的，也就是说被冻结了.
  2. Js引擎线程
    JS为处理⻚⾯中⽤⼾的交互，以及操作DOM树、CSS样式树来给⽤⼾呈现⼀份动态⽽丰富的交互体验和服务器逻辑的交互处理。
    GUI渲染线程与JS引擎线程互斥的，是由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界⾯（即JavaScript线程和UI线程同时运⾏），那么渲染线程前后获得的元素数据就可能不⼀致。
    当JavaScript引擎执⾏时GUI线程会被挂起，GUI更新会被保存在⼀个队列中等到引擎线程空闲时⽴即被执⾏。
    由于GUI渲染线程与JS执⾏线程是互斥的关系，当浏览器在执⾏JS程序的时候，GUI渲染线程会被保存在⼀个队列中，直到JS程序执⾏完成，才会接着执⾏。
    因此如果JS执⾏的时间过⻓，这样就会造成⻚⾯的渲染不连贯，导致⻚⾯渲染加载阻塞的感觉。
  3. tips:
    回流(reflow)：当浏览器发现某个部分发⽣了点变化影响了布局，需要倒回去重新渲染。reflow 会从这个 root frame 开始递归往下，依次计算所有的结点⼏何尺⼨和位置。reflow ⼏乎是⽆法避免的。现在界⾯上流⾏的⼀些效果，⽐如树状⽬录的折叠、展开（实质上是元素的显⽰与隐藏）等，都将引起浏览器的 reflow。⿏标滑过、点击……只要这些⾏为引起了⻚⾯上某些元素的占位⾯积、定位⽅式、边距等属性的变化，都会引起它内部、周围甚⾄整个⻚⾯的重新渲染。

重绘(repaint)：改变某个元素的背景⾊、⽂字颜⾊、边框颜⾊等等不影响它周围或内部布局的属性时，屏幕的⼀部分要重画，但是元素的⼏何尺⼨没有变。

渲染流程主要分为以下4步：

  1. 解析HTML⽣成DOM树 - 渲染引擎⾸先解析HTML⽂档，⽣成DOM树
  2. 构建Render树 - 接下来不管是内联式，外联式还是嵌⼊式引⼊的CSS样式会被解析⽣成CSSOM树，根据DOM树与CSSOM树⽣成另外⼀棵⽤于渲染的树-渲染树(Render tree)，
  3. 布局Render树 - 然后对渲染树的每个节点进⾏布局处理，确定其在屏幕上的显⽰位置
  4. 绘制Render树 - 最后遍历渲染树并⽤UI后端层将每⼀个节点绘制出来现代浏览器总是并⾏加载资源，例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停⽌构建 DOM，但仍会识别该脚本后⾯的资源，并进⾏预加载。
    同时，由于下⾯两点：
  5. CSS 被视为渲染阻塞资源(包括JS)，这意味着浏览器将不会渲染任何已处理的内容，直⾄CSSOM 构建完毕，才会进⾏下⼀阶段。
  6. JavaScript 被认为是解释器阻塞资源，HTML解析会被JS阻塞，它不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。
    所以存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执⾏和 DOM 构建。另外：
  7. 当浏览器遇到⼀个 script 标记时，DOM 构建将暂停，直⾄脚本完成执⾏。
  8. JavaScript 可以查询和修改 DOM 与 CSSOM。
  9. CSSOM 构建时，JavaScript 执⾏将暂停，直⾄ CSSOM 就绪。css资源和js资源的放置位置
    所以，script 标签的位置很重要。实际使⽤时，可以遵循下⾯两个原则：
  10. CSS 优先：引⼊顺序上，CSS 资源先于 JavaScript 资源。
  11. JavaScript 应尽量少影响 DOM 的构建。

js的异步执⾏

defer async

都是异步加载js资源, 但是区别是async加载完资源后会⽴即开始执⾏, ⽽defer会在整个document解析完成后执⾏其他

⼀、图⽚资源优化

  1. 懒加载
    图⽚懒加载
    tips: 如何判断元素是否在可视区域内？
    原理：默认给图⽚设置⼀个兜底图, 监听⻚⾯滚动, 判断图⽚进⼊可视区域内后, 则给图⽚设置真实的src
  2. 预加载图⽚等资源
const img = new Image();
img.src= 'xxxxxx';
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
  1. webp, 渐进式加载

https://help.aliyun.com/document_detail/171050.html?
spm=5176.10695662.1996646101.searchclickresult.2b9b75d6NiTHLQ
https://help.aliyun.com/document_detail/44704.html?
spm=a2c4g.11186623.6.1428.4acb1ecfHEUVE6

⼆、其他静态资源加载优化

  1. quickLink
    https://github.com/GoogleChromeLabs/quicklink
  2. prefetch
    link(rel=“dns-prefetch”, href=“//www.baidu.com”)
    link(rel=“preconnect”, href=“//www.baidu.com”)
    link(rel=“preload”, as=“script”, href=xxxxx)
    link(rel=“preload”, as=“image”, href=xxxxxx)
  3. 静态资源压缩
    gzip, Brotli https://help.aliyun.com/document_detail/27127.html?spm=a2c4g.11186623.6.645.70471769PeSCe6
  4. webpack
    打包优化 https://webpack.docschina.org/configuration/optimization/
  5. 服务端渲染
    同构渲染
    pug模板渲染
  6. 动态polyfill
    为了兼容低版本浏览器, 我们⼀般会引⼊polyfill。但是@babel/polyfill这个包⾮常⼤, gzip之后都有27.7k, ⾮常影响体积.
    https://polyfill.io/v3/api/
    阿⾥云cdn: https://polyfill.alicdn.com/polyfill.min.js?features=es6,es7,es2017,es2018&flags=gated
<script src="https://polyfill.io/v3/polyfill.js?features=es5,es6,es7,es2017,es2018&flags=gated&callback=invokeMain">
function invokeMain() {
var scriptElement = document.createElement('script');
	scriptElement.type = 'text/javascript';
	scriptElement.async = true;
	scriptElement.src = 'xxxxxxxxx';
	document.body.appendChild(scriptElement);
}
  1. 不重要的资源延迟加载
    可以放到window.addEventListener(‘load’, () => {})
  2. 节流 防抖
    节流函数：当持续触发事件时，保证⼀定时间段内只调⽤⼀次事件处理函数。
    防抖函数：当持续触发事件时，⼀定时间段内没有再触发事件，事件处理函数才会执⾏⼀次，如果设定的时间到来之前，⼜⼀次触发了事件，就重新开始延时。
    函数节流不管事件触发有多频繁，都会保证在规定时间内⼀定会执⾏⼀次真正的事件处理函数
    函数防抖只是在最后⼀次事件后才触发⼀次函数。
    ⽐如在⻚⾯的⽆限加载场景下，我们需要⽤⼾在滚动⻚⾯时，每隔⼀段时间发⼀次 Ajax 请求，⽽不是在⽤⼾停下滚动⻚⾯操作时才去请求数据。这样的场景，就适合⽤节流技术来实现。
    ⽽⽐如搜索框, 输⼊结束后才发起请求, 就适合⽤防抖
扑天鹰
关注
专栏目录
JavaScript 性能优化的方法
m0_54829066的博客
08-27 771
总之，JavaScript 性能优化是一个综合性的工作，需要从代码风格、DOM 操作、数据存储和异步编程等多个方面进行优化。通过合理的优化方法，可以提高 JavaScript 代码的性能，提升用户体验。使用 Promise 和 async/await。避免频繁的样式计算和修改。减少 DOM 操作次数。避免不必要的数据复制。
JavaScript 深度剖析 - JavaScript 性能优化
时光海的博客
10-10 608
JavaScript 深度剖析 - JavaScript 性能优化性能优化介绍JavaScript 内存管理(Memory Management)垃圾回收与常见的GC算法JavaScript 中的垃圾回收GC算法引用计数算法标记清除算法标记整理算法V8引擎的垃圾回收V8 垃圾回收策略V8 如何回收新生代对象V8 如何回收老生代对象Performance工具代码优化实例 性能优化介绍 性能优化是不可避免的 任何一种可以提高运行效率，降低运行开销的行为都可以看做是一种优化操作 无处不在的前端性能优化 请求资
页面装载js及性能分析方法介绍
12-10
一、装载 先装载静态页面的引用js文件，然后查找引用文件中是否包含onload函数，比如main.js中包含onload函数，在main.js中查找是否有对其他js文件的引用，优先装载引用js文件，被引用中文件的装载顺序和main.js的顺序一致。 装载完毕后，开始执行onload函数。由于js执行顺序是顺序执行的，为提高页面相应速度，一般做法是在onload中只画页面，一些事件的绑定函数，ajax方法等可延后书写。 二、响应速度分析 1.借助工具进行分析 各大浏览器的开发者工具（最喜欢使用火狐）可以方便的查看各个js文件、html文件、css文件及图片的装载及执行时间。 2.硬编码分析 在第
JS性能分析
zhisais的博客
01-09 717
JS中循环语句中的性能分析 遍历种类 数组 for while foreach for…in for…of 对象 for…in for…of 描述 循环相同的次数，执行同一个操作，（这里都是简单赋值操作）测试每一种循环所需要的时间 Tips: 尽量不要用for…in来循环数组，因为在数组中自定义的属性，也会在循环中遍历到，而且性能极差 用for…of本身是不能直接遍历对象的，需要使用Obj
前端优化系列 - JS解析性能分析
weixin_34245749的博客
07-27 427
前言 通常，我们觉得页面已经写得非常好，但性能却不尽如人意，在Trace就看到一大堆JS在执行，却不知在执行什么逻辑。JS执行为什么会这么耗时，它们到底在执行什么逻辑呢？ 本文尝试从各个维度详细解析JS的性能消耗情况，找出导致页面性能大幅下降的真正杀手。 JS性能 一般来说，页面资源的性能消耗包括加载和执行。在加载方面，各类资源基本是平等的，主要与资源...
js编程性能分析
zhanglongfei1016的专栏
01-16 539
javaScript做为解释性语言，其执行速度要比编译型语言慢很多，然后在开发中却有很多需要注意的地方 一。注意作用域 1.避免全局查找 function test1(){     var sArray=[];     for(var i=0;i             sArray.push(document.getElementById(i))//在作用域链中循环查找了10次
js代码性能优化分析
qq_36204204的博客
10-14 190
减少判断层级 function doSomething (part, chapter){ const parts = ['ES2016', '工程化', 'vue', 'react', 'Node'] if(!part){ console.log('请确认模块信息'); return; } if(!parts.includes(part)){ return; } console.log('属于当前课程');
js性能优化 如何更快速加载你的JavaScript页面
10-28
JavaScript现在极其重要。一些网站使用JavaScript来增添魅力;如今的许多Web应用程序依赖它;...我在本文中将指出一些重要的规则，介绍如何使用你的JavaScript、使用哪些工具以及你将从中得到什么好处
threejs性能优化与GPU优化.md
10-19
threejs性能优化与GPU优化
你不知道的Node.js性能优化
05-05
Node.js性能优化是一个涉及多个层面的技术话题。首先，从标题中我们可以得知本次分享涉及到的是“Node.js性能优化”，并且是由蚂蚁金服在2019年的see conf大会上进行的。由于是PPT演示，我们可以推测这次分享的内容...
JavaScript性能优化的小知识总结共23页.pdf
11-21
以下是一些关于JavaScript性能优化的关键知识点： 1. **延迟加载（Lazy Loading）**：为了提高页面加载速度，可以使用延迟加载策略，如图片懒加载，只在用户滚动到可视区域时才加载资源。 2. **代码分割（Code ...
每日知识积累->js性能分析
qq_34241037的博客
11-12 168
我们使用如下的代码来收集性能信息： console.time("my operation");//开始计时器 //执行多次操作 for(var i=0;i<1000000;i++){ console.log(i); } console.timeEnd("my operation");//停止计时器 把要测量的代码放在两个计时器调用之间，分别使用内置console对象上的time...
javascript性能分析
qq_41827547的博客
05-21 482
1、存储单位：1GB = 1024MB, 1MB=1024KB,1KB=1024B,1B=8bit，1bit = 0/1。4B区分的最大数是(2^8)^4 = 2^32 = 4294967296 ,约42亿 2、js的标量一般放在栈区中，如字符串和数字，对象放在堆区中。一个变量引用标量值时，会先查找这个标量在栈区有没有，没有则创建，然后返回引用，这个引用占用内存一般是4B大小。 3、数组检验：创建1个空数组，开始一个10000次的循环，再内嵌一个10000次的循环用于新建一个内容都为2的数组，然后放进该
JavaScript 的性能分析与提升
最新发布
GoldenaArcher的博客
06-20 506
对于 JavaScript/前端来说，性能的提升主要有两大方面：页面初始化的优化这一方面主要涉及到非代码结构上，但是能够提升用户体验感的优化，如，提升用户看到页面的速度、减少用户等待与页面交互的事件。如 lazy loading 就是一个比较知名的初始化上的优化，购物网站也好，视频网站也好，这种 2C 的页面会载入大量的数据，如果让用户等到所有的数据都加载成功，再和页面交互，那肯定是会因为使用体验感太差而造成用户流失。
Js性能问题
chinet_bridge的专栏
08-13 473
通常，js本身不会有什么性能问题，现代浏览器的js引擎都是非常优越的，一点点代码写法上造成的性能差异完全不会有实质体现（比如同样的代码，eval会导致代码几十倍速率的差异；setTimeout性能低于setInterval， for in循环性能低于for循环等），所以除非是针对低性能平台开发（如wap并兼容低端移动设备）无需在意，关注下内存泄露，页面渲染效率即可，目前的性能检测工具都不是单单针对
Web前端性能优化的实用技巧汇总
qf2019的博客
05-08 661
今天小编要跟大家分享关于Web前端性能优化的实用技巧汇总。 javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。 一.提高加载性能 1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其
js获取歌曲时长_万万没想到：对JS代码混淆，竟造成这样的性能损失？
weixin_39668199的博客
11-22 119
我们知道，如果要对JS代码进行保护，最普遍的做法是进行混淆加密。很多人会有担忧：混淆加密后，会不会造成性能影响？JS混淆会带来多少性能损失？ 理论而言，混淆加密会使JS 代码量增加，那么执行时理应有性能影响。重点是：会带来多少性能损失，是否会严重影响执行效率？ 为了验证这一问题，本文通过实测的方式寻求真相，揭示JS混淆加密究竟会带来多少性能影响。 准备1、JS代码混淆加密，使用JShaman代码保...
JS函数——代码性能指标
zhengjingID的博客
05-30 717
本篇文章围绕JS代码的健壮性、可读性、可复用性和可拓展性，四个方面做简单描述。
JavaScript性能优化实用技巧：局部变量与定时器优化
JavaScript性能优化是一项关键任务，特别是在现代Web开发中，随着富客户端应用和Ajax的广泛应用，优化JavaScript代码性能对于提升用户体验至关重要。JavaScript作为解释型语言，相较于编译型语言如C和Java，性能上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

扑天鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值