性能优化-4-JS开销和如何缩短解析时间- 配合V8 有效优化代码-函数优化-对象优化-HTML优化-CSS对性能的影响

最新推荐文章于 2022-03-07 11:47:49 发布
最新推荐文章于 2022-03-07 11:47:49 发布
阅读量267 收藏
点赞数
分类专栏： 慕课-性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345105/article/details/114954679
版权

4-1 JS开销和如何缩短解析时间

js和html-css中，js开销是最大的，要解析编译后才运行。
在这里插入图片描述
在这里插入图片描述
可以用performance去观察，这里就不一一截图了，理解原理即可
在这里插入图片描述
在这里插入图片描述
网页的加载大概30%都耗在js中。

优化

例如引入的第三方库，loadsh等，可能里只用到1%的函数，那么就没必要其他也引入了。
解决
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先加载用户看到的。

通过三点达到是否体验好

是否在加载（让用户知道在加载了）？
是否有有用的内容？
是否能用（交互）？
在这里插入图片描述

V8编译原理

在这里插入图片描述
理解好原理后能写出更利于编译器去解析和优化的代码，例如如果代码写的不够好那么优化器会发生逆优化的过程。

测试

在这里插入图片描述
注意2中是有字符串的参数
在这里插入图片描述
除掉字符串参数后
在这里插入图片描述

why？

因为之前的参数都是不变的，如果突然调用其他参数不一样的，那么之前优化的逻辑就不能用了。
先看看工作原理
在这里插入图片描述
优化机制
在这里插入图片描述
脚本流》单独开线程先解析30kb以上的文件
字节码缓存》缓存之前编译好的一些其他地方也用得到的代码
懒解析》只有用到才解析

函数优化

使用懒解析优化函数》这样就不会进行一个解析，在堆的内存也不用分配内存。
在这里插入图片描述
如果知道某些函数要执行 那么在定义的时候就可以调用
在这里插入图片描述
在这里插入图片描述
老版本的webpack编译后可能会去掉（）可以用optimize.js解决

对象优化

在这里插入图片描述
其实最终还是针对v8的优化规则编写代码。

顺序初始化

在这里插入图片描述
在这里插入图片描述

例子2

在这里插入图片描述

例子3

V8引擎会对真数组极大优化。
在这里插入图片描述
把类数组转成真数组后遍历》开销低

在这里插入图片描述

例子4在这里插入图片描述### 例子2

在这里插入图片描述
在这里插入图片描述

HTML优化（占比较小）

在这里插入图片描述
深层嵌套导致domshu深遍历久
在这里插入图片描述
在这里插入图片描述
语义化标签方便浏览器解析。
在这里插入图片描述
js放底下不然阻塞dom加载
在这里插入图片描述

CSS优化

降低大小，先拿到先解析css
在这里插入图片描述
contain相当于独立渲染区域，即使修改了里面的内容也不会影响其他布局，例如这里有一万条数据，那么改了某条影响布局的内容，则这一万条数据都受到影响使用contain就不会了（不会重新计算样式）。
在这里插入图片描述
在这里插入图片描述

4-2 配合V8 有效优化代码

4-3 函数优化

4-4 对象优化

4-5 HTML优化

4-6 CSS对性能的影响

Jack おう
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JavaScript 性能优化技巧心得(分享)
10-18
JavaScript性能优化是提升Web应用响应速度和用户体验的关键。在JavaScript中，优化主要集中在以下几个方面： 1. **加载优化**：减少JavaScript文件的数量和大小，通过合并文件、压缩代码（例如使用Gzip和Minify）来...
Node.js-nodejs服务框架
08-09
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够使用 JavaScript 来编写服务器端代码，极大地推动了全栈开发的流行。Node.js 的轻量级、非阻塞I/O模型使其在高并发场景下表现出色，尤其...
优化JavaScript 之执行时间
gxl_ct001的专栏
12-27 115
JavaScript 是解释性的语言，他的执行速度要大大慢于编译性语言。 JavaScript 比编译型的 C 慢 5000 倍；            比解释型的 Java 慢 100 倍；            比解释型的 Perl 慢 10 倍；            不过我们可以坐一些简单的事情来提高 JavaScript代码的性能。            1.关注范围  ...
超级详细的手把手教你使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析
热门推荐
tangdou369098655的博客
01-17 1万+
Lighthouse是什么—一种工具 Lighthouse 是一个开源的自动化工具，用来测试页面性能。 为什么要用Lighthouse----提升用户体验 分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验 Lighthouse怎么用----用法多样，根据需求进行选择 目前官方提供了4种使用方式： Chrome 开发者工具（DevTools） Node CLI Node Module Chrome 扩展 方式一：Chrome 开发者工具（DevT.
Google Chrome 工程师：JavaScript 不容错过的八大优化建议
CSDN资讯
07-08 4178
【摘要】本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲，其分享了处理 JavaScript 的脚本优化建议，大幅地减...
04代码优化-01JS开销和如果缩短解析时间
trust_future99的博客
02-27 178
JS的开销 相同大小的js和JPEG的总耗时。 传输时间基本相同（传输基本上只受文件大小的影响） JS的编译&解析时间 约2s;执行时间 约1.5s，共约3.5s jpeg传输完成后，只有解码和绘制，总共 约0.1s不到 加载 网络资源的加载速度一般受 网络速度和 资源大小的影响。 压缩资源 Code Splitting 代码拆分，按需加载 Tree Shaking 代码减重 编译/解析 and 执行 减少主线程的工作量。 避免长任务 避免超过1KB的行间脚本 使用rAF和rIC进
【第1130期】JavaScript 的时间消耗
前端早读课
12-05 443
前言 今日早读文章由Followme@dwqs翻译授权分享。 @dwqs，医学院校毕业的前端搬砖工，曾就职美团，目前在深圳Followme 搬砖～～Github地址：https://github.com/dwqs 正文从这开始～ 随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这篇文章中, 我会介绍一些能让你的网
JS缩短解析时间的思路
简单随风的博客
07-06 153
解决方案 Code splitting 代码拆分，按需加载 Tree Shaking 代码减重 减少主线程工作量 避免长任务 避免超过1kb的行间脚本 使用rAF和rIC进行时间调度 Progressive Bootstrapping 渐进式启动 可见不可交互 vs 最小可交互资源集 ...
js css优化工具Web20Tool2010
05-13
在IT行业中，优化JavaScript（JS）和CSS代码对于提高网页性能和用户体验至关重要。"Web20Tool2010"可能是一个早期的工具集，旨在帮助开发者优化他们的JS和CSS代码，以适应2010年左右的技术环境。尽管这个工具可能...
fswd-2021-11am:全栈，javascript，react js，redux，react钩子，节点Js
03-16
这包括理解HTML、CSS、JavaScript等前端技术，以及服务器端编程语言如Node.js，数据库管理和API设计等。全栈开发者在项目中扮演着灵活的角色，能有效地沟通和协调前后端工作，提高开发效率。 【JavaScript】...
optimize-v8:使用Node.js在V8中测试功能优化的脚本套件
05-20
优化v8 使用Node.js在V8中测试功能优化的脚本套件 设置 安装node.js v0.12或更高版本。 我使用了io.js v2.3.4。 克隆此仓库并通过npm install安装依赖项 用法 每个可执行js文件的顶部都有一个注释，以推荐的方式运行它。
tchat-node-js
05-03
4. **模块系统**：Node.js内置了强大的模块系统，使用`require`函数可以导入和使用其他模块，便于代码组织和复用。在`tchat-node-js`项目中，可能会用到`http`、`socket.io`等核心模块，以及第三方模块如`express`...
javascript性能提升——减少遍历集合的开销
02-27 899
在每次迭代过程中，读取元素集合length属性会引发集合进行更新，这在所有浏览器中都会有明显的性能问题。优化方法很简单，把集合的长度缓存到一个局部变量中，然后在循环的条件退出语句中使用该变量。 例如： function loopFeifeiDiv () { var coll = document.getElementByTagName('div'); for (var co
js map对象遍历_js引擎v8源码解析之map对象上篇（基于v8 0.1.5）
weixin_39671405的博客
12-03 225
这一篇首先介绍Map类。下面先看类定义// All heap objects have a Map that describes their structure. // A Map contains information about: // - Size information about the object // - How to iterate over an object (for...
代码优化（配合V8引擎进行优化）
雪急飞绪博客
03-07 1097
JS开销 JS 开销在哪 资源大小相同的情况下，JS 开销更高 Bottom-Up：自下而上，可以看下里面具体做了哪些事情，耗时多久 Evaluate Script：解析耗时 101.6ms The cost of JavaScript in 2019 对于一个网站而言，总共的网络加载过程中，压缩后 1.4 M 的 JS 在整个网络加载耗时中占 1/3 解决方案 Code Splitting：代码拆分，按需加载 当前路径需要哪些资源就加载哪些资源，不需要的延迟加载或访问需要它的页面再加载
JavaScript是如何工作的：深入V8引擎&编写优化代码的5个技巧
云水木石
01-23 1500
注：本文翻译自网上的文章，原文地址：https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e 本系列的第一篇文章重点介绍了引擎、运行时和调用堆栈。 第二篇文章将深入到Google的V8 JavaScript引
resin 4.0 配置优化建议
weixin_33874713的博客
09-28 395
早先说过线上Resin的配置文件中要增加线程池大小、各种timeout参数（resin 4.0.15的默认配置文件肯定没有这些参数，需要另行增加）。在resin 4.0.10里，有这么一个bug，thread-max的数量设置没有起作用：http://bugs.caucho.com/view.php?id=4251 ，但后面到了resin 4.0.15应该就修复了。下面内容会...
三亚学院考研，30个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
最新发布
07-15
三亚学院考研，30个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
ORACLE-SQL性能优化(内部培训资料).docx
11-28
ORACLE-SQL性能优化是指针对Oracle数据库中的SQL语句进行优化，以提高数据库性能和执行效率的一系列措施和方法。本文将详细介绍ORACLE-SQL性能优化的内容，包括选用适合的ORACLE优化器、优化SQL查询语句、优化索引和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值