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

最新推荐文章于 2022-01-17 00:29:37 发布
最新推荐文章于 2022-01-17 00:29:37 发布
阅读量179 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trust_future99/article/details/114172013
版权

JS的开销

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

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

加载

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

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

编译/解析 and 执行

减少主线程的工作量。

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

LOADING IS A JOURNEY

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

trust_future99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript解析器用于ES6的压缩器优化器和美化工具包
08-11
这个工具包的核心目标是对使用ES6语法的JavaScript代码进行压缩、优化和美化。压缩是通过消除冗余代码、缩短变量名、删除未使用的代码等手段来减小代码体积，从而加快加载速度。优化则涉及到代码结构的重构，以提高...
性能优化-4-JS开销和如何缩短解析时间- 配合V8 有效优化代码-函数优化-对象优化-HTML优化-CSS对性能的影响
weixin_45345105的博客
03-17 267
4-1 JS开销和如何缩短解析时间 js和html-css中，js开销是最大的，要解析编译后才运行。 可以用performance去观察，这里就不一一截图了，理解原理即可 网页的加载大概30%都耗在js中。 优化 例如引入的第三方库，loadsh等，可能里只用到1%的函数，那么就没必要其他也引入了。 解决 先加载用户看到的。 通过三点达到是否体验好 是否在加载（让用户知道在加载了）？ 是否有有用的内容？ 是否能用（交互）？ V8编译原理 理解好原理后能写出更利于编译器去解析和优化的代码，例
如何解决JS执行时间过长导致页面卡顿
热门推荐
weixin_43589827的博客
01-14 1万+
背景 众所周知，JavaScript（简称 JS） 是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。这就必然会导致一些浏览器出现卡顿的问题，例如这次后端反馈，在文件上传的任务中，JS需要切割文件，分片上传给服务器，但遇到大型文件（几百G）的时候，则需分片几十万份，然后把这些分片逐步上传给服务器。我猜测是因为这个过程 JS 处理这些文件片段时间稍长，导致页面渲染 fps 低，所以才出现页面卡顿的现象。所以我就开始想，在面对这种因JS执行时间长，导致页面卡顿的
【第1130期】JavaScript 的时间消耗
前端早读课
12-05 445
前言 今日早读文章由Followme@dwqs翻译授权分享。 @dwqs，医学院校毕业的前端搬砖工，曾就职美团，目前在深圳Followme 搬砖～～Github地址：https://github.com/dwqs 正文从这开始～ 随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这篇文章中, 我会介绍一些能让你的网
超级详细的手把手教你使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析
tangdou369098655的博客
01-17 1万+
Lighthouse是什么—一种工具 Lighthouse 是一个开源的自动化工具，用来测试页面性能。 为什么要用Lighthouse----提升用户体验 分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验 Lighthouse怎么用----用法多样，根据需求进行选择 目前官方提供了4种使用方式： Chrome 开发者工具（DevTools） Node CLI Node Module Chrome 扩展 方式一：Chrome 开发者工具（DevT.
百亿级实时计算系统性能优化–—Elasticsearch篇
QcloudCommunity的博客
11-12 3431
导语 | 随着业务的发展，系统日益复杂，功能愈发强大，用户数量级不断增多，设备cpu、io、带宽、成本逐渐增加，当发展到某个量级时，这些因素会导致系统变得臃肿不堪，服务质量难以保障，系统...
JS 网站性能优化笔记
12-18
2. **代码优化**：移除隐式分号和简化表达式可以进一步减小代码量。例如，`x = x + 1;` 可以优化为 `x++;`。不过要注意，过度优化可能导致代码可读性下降，增加出错风险。 3. **重命名变量和函数**：为了加快下载...
javaScript优化策略
09-14
JavaScript优化策略是提高网页和应用程序性能的关键，尤其是在JavaScript执行效率方面。以下是一些关键的优化策略，通过这些策略，开发者可以更有效地利用JavaScript的核心特性，从而提升代码的运行速度。 1. **...
js-abbreviate:接受* any * JavaScript对象，并返回该对象的JSON可序列化的有限大小的副本
05-22
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON序列化是将JavaScript对象转换为JSON字符串的过程，这样数据可以在不同的环境之间传递，比如...
境外业务性能优化实践.2cf700f0-8a63-11e7-a241-159d1ab9f083.pdf
09-19
这可能涉及到HTML、CSS和JavaScript的优化，比如压缩代码、合并文件、利用CDN加速静态资源、智能DNS解析等。此外，DNS解析时间过长是常见的问题，可以通过DNS预取策略来改善，比如在用户访问H5页面时，提前进行DNS...
js与c语言效率_java 和 C 代码运行效率的比较（整理）
weixin_36059505的博客
12-30 789
最近和朋友无意间讨论起了 有关java 和C 的 效率问题， (我是java 推介者， 他是 c 语言推介者， 他做的是嵌入式)故，想通过网络查询一下， 总结一下，两者到底效率如何，其有何差异，原因又是啥？各种优势有在何处？1 Java 语言的概述作为一种面向对象的程序设计语言，Java 与 C++极为 类似，但却要比 C++简单的多。它在集成其他语言的特点 和优势的同时又有自己独特的优势。Jav...
提升WordPress 打开速度全面解决方案
Bob的专栏
04-29 1万+
原文地址：http://www.chinaz.com/web/2015/0107/378419.shtml 从ThemeForest购买的是正版商业主题AVADA（有售后技术支持），使用国内阿里云主机（配置不算低），网站大部分都是AVADA官方导入数据，只是做了一些汉化，并未添加太多数据。但是网站打开速度，特别是首次打开速度很不尽如人意。经过数日研究，一轮又一轮的探索，多
前端性能优化（三）代码优化
qq_25503949的博客
10-07 1309
前端性能优化（三）代码优化一.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
JavaScript启动性能
人生代码 ---- 公众号
01-31 470
JavaScript启动性能Addy Osmani阻止解锁跟随以下2017年2月9日作为Web开发人员，我们知道最终导致网页膨胀是多么容易。但是加载网页远远不只是通过网络传输字节。一旦浏览器下载了我们页面的脚本，它就必须解析，解释和运行它们。在这篇文章中，我们将深入探讨JavaScript的这个阶段，为什么它可能会减慢应用程序的启动速度以及如何解决它。从历史上看，我们只是没有花费大量时间来优化Ja...
转-减小编译时间的两种做法
diaoqu4574的博客
10-06 150
作者：朱金灿 来源：http://blog.csdn.net/clever101 随着源码工程越来越庞大，花在编译上面的时间越来越多。我们开始研究如何减少编译时间。 一是执行每日自动构建。每日自动构建的原理很简单：安装每日构建工具CCNET（不熟悉该工具的同学可以去搜索下）。然后在源码服务器上安装编译环境。源码服务器每天获取最新代码，每天下班后开始编译最新代码，经过一个...
JS缩短解析时间的思路
简单随风的博客
07-06 153
解决方案 Code splitting 代码拆分，按需加载 Tree Shaking 代码减重 减少主线程工作量 避免长任务 避免超过1kb的行间脚本 使用rAF和rIC进行时间调度 Progressive Bootstrapping 渐进式启动 可见不可交互 vs 最小可交互资源集 ...
震惊！（真细）重学前端——300个基础面试题+答案、分类学习整理（良心制作）持续更新。。。
@baby张~的博客
01-07 2101
注：花半个月时间，重学基础，学习完、整理完、总结归纳完，痛并快乐着。 （欢迎提出问题和建议，采纳后会附上提议者名字链接） HTML 篇 图片中 title 和 alt 区别？ 通常当⿏标滑动到元素上的时候显示 alt 是 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析。 Html5 有哪些新特性、移除了哪些元素 新增元素： 绘画canvas 用于媒介回放的video 和 audio 元素 本地
[翻译]JavaScript的成本
weixin_34413065的博客
12-05 106
当我们建立严重依赖于JavaScript的网站时，我们不总是很容易看到我们发送的内容所付出的代价。在这篇文章中，如果你希望你的网站在移动设备上能够快速加载和互动，我将介绍为什么一些规则可以帮助你。 tl;dr：较少的代码=较少的解析/编译+较少的传输+较少的解压缩 网络 当大多数开发人员考虑JavaScript的成本时，他们会考虑下载和执行成本。通过线路发送更多字节的JavaScript需要的时间...
JS性能优化必读
CS_DGD的博客
09-24 450
文章目录JS性能优化JS内存管理JS中的垃圾回收JS中的可达对象JS中的引用与可达GC算法介绍引用计数算法实现原理引用计数算法优缺点优点缺点标记清除算法实现原理标记清除算法优缺点优点缺点标记整理算法实现原理常见GC算法总结认识V8V8垃圾回收策略V8如何回收新生代对象概述回收流程回收细节说明V8如何回收老生代对象概述回收流程回收细节对比V8垃圾回收总结Performance工具介绍内存问题的体现监控内存界定内存问题的标准监控内存的几种方式任务管理器监控内存Timeline记录内存堆快照查找分离DOM判断是否
优化托管代码效率：实战低级开销模型
为了帮助开发者做出明智的编码决策，文章介绍了一种低级操作开销模型，这种模型是通过实际测量代码执行时间来构建的，可以帮助开发者理解不同代码片段的性能表现。 文章目录涵盖了多个关键部分，包括： 1. 简介：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值