04代码优化-01JS开销和如果缩短解析时间

最新推荐文章于 2025-09-02 12:05:27 发布
原创 最新推荐文章于 2025-09-02 12:05:27 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

博客分析了JS的开销，对比相同大小的JS和JPEG总耗时，指出JS编译、解析和执行时间远长于JPEG。还提到网络资源加载受网络速度和资源大小影响，给出压缩资源、代码拆分等加载优化方法，以及减少主线程工作量等编译执行优化策略。

JS的开销

相同大小的js和JPEG的总耗时。

  • 传输时间基本相同（传输基本上只受文件大小的影响）
  • JS的编译&解析时间 约2s;执行时间 约1.5s，共约3.5s
  • jpeg传输完成后，只有解码和绘制，总共 约0.1s不到
    在这里插入图片描述

加载

网络资源的加载速度一般受 网络速度和 资源大小的影响。

  • 压缩资源
  • Code Splitting 代码拆分，按需加载
  • Tree Shaking 代码减重

编译/解析 and 执行

减少主线程的工作量。

  • 避免长任务
  • 避免超过1KB的行间脚本
  • 使用rAF和rIC进行时间调度

LOADING IS A JOURNEY

参考图片来源
在这里插入图片描述

JavaScript启动性能
人生代码 ---- 公众号
01-31 602
JavaScript启动性能Addy Osmani阻止解锁跟随以下2017年2月9日作为Web开发人员，我们知道最终导致网页膨胀是多么容易。但是加载网页远远不只是通过网络传输字节。一旦浏览器下载了我们页面的脚本，它就必须解析，解释和运行它们。在这篇文章中，我们将深入探讨JavaScript的这个阶段，为什么它可能会减慢应用程序的启动速度以及如何解决它。从历史上看，我们只是没有花费大量时间来优化Ja...
性能优化-4-JS开销和如何缩短解析时间- 配合V8 有效优化代码-函数优化-对象优化-HTML优化-CSS对性能的影响
weixin_45345105的博客
03-17 378
4-1 JS开销和如何缩短解析时间 js和html-css中，js开销是最大的，要解析编译后才运行。 可以用performance去观察，这里就不一一截图了，理解原理即可 网页的加载大概30%都耗在js中。 优化 例如引入的第三方库，loadsh等，可能里只用到1%的函数，那么就没必要其他也引入了。 解决 先加载用户看到的。 通过三点达到是否体验好 是否在加载（让用户知道在加载了）？ 是否有有用的内容？ 是否能用（交互）？ V8编译原理 理解好原理后能写出更利于编译器去解析和优化的代码，例
JS缩短解析时间的思路
简单随风的博客
07-06 301
解决方案 Code splitting 代码拆分，按需加载 Tree Shaking 代码减重 减少主线程工作量 避免长任务 避免超过1kb的行间脚本 使用rAF和rIC进行时间调度 Progressive Bootstrapping 渐进式启动 可见不可交互 vs 最小可交互资源集 ...
转-减小编译时间的两种做法
diaoqu4574的博客
10-06 223
作者：朱金灿 来源：http://blog.youkuaiyun.com/clever101 随着源码工程越来越庞大，花在编译上面的时间越来越多。我们开始研究如何减少编译时间。 一是执行每日自动构建。每日自动构建的原理很简单：安装每日构建工具CCNET（不熟悉该工具的同学可以去搜索下）。然后在源码服务器上安装编译环境。源码服务器每天获取最新代码，每天下班后开始编译最新代码，经过一个...
前端优化系列 - JS解析性能分析
weixin_34245749的博客
07-27 489
前言 通常，我们觉得页面已经写得非常好，但性能却不尽如人意，在Trace就看到一大堆JS在执行，却不知在执行什么逻辑。JS执行为什么会这么耗时，它们到底在执行什么逻辑呢？ 本文尝试从各个维度详细解析JS的性能消耗情况，找出导致页面性能大幅下降的真正杀手。 JS性能 一般来说，页面资源的性能消耗包括加载和执行。在加载方面，各类资源基本是平等的，主要与资源...
如何解决JS执行时间过长导致页面卡顿
热门推荐
weixin_43589827的博客
01-14 1万+
背景 众所周知，JavaScript（简称 JS） 是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。这就必然会导致一些浏览器出现卡顿的问题，例如这次后端反馈，在文件上传的任务中，JS需要切割文件，分片上传给服务器，但遇到大型文件（几百G）的时候，则需分片几十万份，然后把这些分片逐步上传给服务器。我猜测是因为这个过程 JS 处理这些文件片段时间稍长，导致页面渲染 fps 低，所以才出现页面卡顿的现象。所以我就开始想，在面对这种因JS执行时间长，导致页面卡顿的
JavaScript解析器用于ES6的压缩器优化器和美化工具包
08-11
这个工具包的核心目标是对使用ES6语法的JavaScript代码进行压缩、优化和美化。压缩是通过消除冗余代码、缩短变量名、删除未使用的代码等手段来减小代码体积，从而加快加载速度。优化则涉及到代码结构的重构，以提高...
记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%
林恒的博客
03-02 5338
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 常规且有效 的首屏优化建议 目标： 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理 1、路由懒加载 SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有的资源，造成首...
JS 网站性能优化笔记
12-18
2. **代码优化**：移除隐式分号和简化表达式可以进一步减小代码量。例如，`x = x + 1;` 可以优化为 `x++;`。不过要注意，过度优化可能导致代码可读性下降，增加出错风险。 3. **重命名变量和函数**：为了加快下载...
47、移动应用性能优化与 ES6 JavaScript 迁移技术解析
最新发布
o9p0q1的博客
09-02 30
本文探讨了移动应用性能优化中的能源消耗和通信开销问题，并介绍了基于 CWV 的优化方法。同时，深入分析了现代 JavaScript（ES6）应用迁移中的挑战，包括块级作用域、模块系统、类语法及新数据类型带来的问题。通过扩展作用域树构建方法，提出了解决方案并验证了其在移动设备上的可行性。
speed-master项目中的速度优化技术解析
首先，在**代码优化**层面，提升执行速度的核心在于减少不必要的计算开销、降低时间复杂度和空间复杂度。例如，使用哈希表替代线性查找可将搜索操作从O(n)优化至O(1)，显著提升数据访问速度；循环展开、减少函数调用...
超级详细的手把手教你使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析
tangdou369098655的博客
01-17 1万+
Lighthouse是什么—一种工具 Lighthouse 是一个开源的自动化工具，用来测试页面性能。 为什么要用Lighthouse----提升用户体验 分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验 Lighthouse怎么用----用法多样，根据需求进行选择 目前官方提供了4种使用方式： Chrome 开发者工具（DevTools） Node CLI Node Module Chrome 扩展 方式一：Chrome 开发者工具（DevT.
【第1130期】JavaScript 的时间消耗
前端早读课
12-05 571
前言 今日早读文章由Followme@dwqs翻译授权分享。 @dwqs，医学院校毕业的前端搬砖工，曾就职美团，目前在深圳Followme 搬砖～～Github地址：https://github.com/dwqs 正文从这开始～ 随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这篇文章中, 我会介绍一些能让你的网
提升WordPress 打开速度全面解决方案
Bob的专栏
04-29 1万+
原文地址：http://www.chinaz.com/web/2015/0107/378419.shtml 从ThemeForest购买的是正版商业主题AVADA（有售后技术支持），使用国内阿里云主机（配置不算低），网站大部分都是AVADA官方导入数据，只是做了一些汉化，并未添加太多数据。但是网站打开速度，特别是首次打开速度很不尽如人意。经过数日研究，一轮又一轮的探索，多
前端性能优化（三）代码优化
qq_25503949的博客
10-07 1617
前端性能优化（三）代码优化一.JS开销和如何缩短解析时间1.开销在哪里2.如何缩短解析时间3.最后我们说一下题外话 用户体验的三个阶段二.V8编译原理三.HTML优化四.CSS代码方面的优化1.有关选择器2.降低CSS对渲染的阻塞3.利用GPU进行完成动画4.使用contain属性5.font-display（较新的一种方式） 一.JS开销和如何缩短解析时间 1.开销在哪里 加载----编译解析----执行 2.如何缩短解析时间 1.code splitting代码拆分，按需加载 2.tree shakin
Google Chrome 工程师：JavaScript 不容错过的八大优化建议
优快云资讯
07-08 4363
【摘要】本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲，其分享了处理 JavaScript 的脚本优化建议，大幅地减...
[翻译]JavaScript的成本
weixin_34413065的博客
12-05 163
当我们建立严重依赖于JavaScript的网站时，我们不总是很容易看到我们发送的内容所付出的代价。在这篇文章中，如果你希望你的网站在移动设备上能够快速加载和互动，我将介绍为什么一些规则可以帮助你。 tl;dr：较少的代码=较少的解析/编译+较少的传输+较少的解压缩 网络 当大多数开发人员考虑JavaScript的成本时，他们会考虑下载和执行成本。通过线路发送更多字节的JavaScript需要的时间...
js与c语言效率_java 和 C 代码运行效率的比较（整理）
weixin_36059505的博客
12-30 914
最近和朋友无意间讨论起了 有关java 和C 的 效率问题， (我是java 推介者， 他是 c 语言推介者， 他做的是嵌入式)故，想通过网络查询一下， 总结一下，两者到底效率如何，其有何差异，原因又是啥？各种优势有在何处？1 Java 语言的概述作为一种面向对象的程序设计语言，Java 与 C++极为 类似，但却要比 C++简单的多。它在集成其他语言的特点 和优势的同时又有自己独特的优势。Jav...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值