JavaScript 高性能编程 —— 加载和运行

最新推荐文章于 2024-05-30 13:59:14 发布
最新推荐文章于 2024-05-30 13:59:14 发布
阅读量929 收藏 9
点赞数 27
分类专栏： JavaScript 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cccloveforever/article/details/137715621
版权

        JavaScript 在浏览器中的性能，可认为是开发者所要面对的最重要的可用性问题。此问题因 JavaScript 的阻塞特征而复杂，也就是说，当 JavaScript 运行时其他的事情不能被浏览器处理。

        事实上，大多数浏览 器使用单进程处理 UI 更新和 JavaScript 运行等多个任务，而同一时间只能有一个任务被执行。JavaScript 运行了多长时间，那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。

        从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的JavaScript 代码是内联的还是包含在一个不相干的外部文件中，页面下载和解析过程必须停下，等待脚本完成这些处理，然后才能继续。

        这是页面生命周期必不可少的部分，因为脚本可能在运行过程中修改页面内容。典型的例子是 document.write0函数，例如:

<html> 
 <head> 
 <title>Script Example</title> 
 </head> 
 <body> 
 <p> 
<script type="text/javascript"> 
 document.write("The date is " + (new Date()).toDateString()); 
 </script> 
 </p> 
 </body> 
</html>

        当浏览器遇到一个<script>标签时，正如上面 HTML 页面中那样，无法预知 JavaScript 是否在<p>标签中添加内容。因此，浏览器停下来，运行此JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生在使用 src 属性加载 JavaScript 的过程中。

        浏览器必须首先下载外部文件的代码，这要占用一些时间，然后解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。

Script Positioning 脚本位置

        HTML 4 文档指出，一个<script>标签可以放在 HTML 文档的<head>或<body>标签中，可以在其中多次出现。传统上，<script>标签用于加载外部 JavaScript 文件。<head>部分除此类代码外，还包含<link>标签用于加载外部 CSS 文件和其他页面中间件。

        也就是说，最好把风格和行为所依赖的部分放在一起，首先加载他们，使得页面可以得到正确的外观和行为。例如：

<html>  <head> 
 <title>Script Example</title> 
 <-- Example of inefficient script positioning --> 
 <script type="text/javascript" src="file1.js"></script> 
 <script type="text/javascript" src="file2.js"></script> 
 <script type="text/javascript" src="file3.js"></script> 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head> 
 <body> 
 <p>Hello world!</p> 
 </body> 
</html>

        虽然这些代码看起来是无害的，但它们确实存在性能问题:在<head>部分加载了三个 JavaScript 文件因为每个<script>标签阻塞了页面的解析过程，直到它完整地下载并运行了外部 JavaScript 代码之后，页面处理才能继续进行。

        用户必须忍受这种可以察觉的延迟。请记住，浏览器在遇到<body>标签之前，不会渲染页面的任何部分。

        用这种方法把脚本放在页面的顶端，将导致一个可以察觉的延迟，通常表现为:页面打开时，首先显示为一幅空白的页面，而此时用户即不能阅读，也不能与页面进行交互操作。为了更好地理解此过程，我们使用瀑布图来描绘每个资源的下载过程。

        图 1-1显示出页面加载过程中，每个脚本文件和样式表文件下载的过程。

        图 1-1 是一个令人感兴趣的模板。第一个 JavaScript 文件开始下载，并阻塞了其他文件的下载过程。进一步，在 file1.js 下载完之后和 file2.js 开始下载之前有一个延时，这是 file1.js 完全运行所需的时间。

        每个文件必须等待前一个文件下载完成并运行完之后，才能开始自己的下载过程。当这些文件下载时，用户面对一个空白的屏幕。这就是今天大多数浏览器的行为模式。

        Internet Explorer 8, Firefox 3.5, Safari 4, 和 Chrome 2 允许并行下载 JavaScript 文件。这个好消息表明，当一个<script>标签正在下载外部资源时，不必阻塞其他<script>标签。不幸的是，JavaScript 的下载仍然要阻塞其他资源的下载过程，例如图片。

        即使脚本之间的下载过程互不阻塞，页面仍旧要等待所有 JavaScript代码下载并执行完成之后才能继续。所以，当浏览器通过允许并行下载提高性能之后，该问题并没有完全
解决。脚本阻塞仍旧是一个问题。

        因为脚本阻塞其他页面资源的下载过程，所以推荐的办法是：将所有<script>标签放在尽可能接近<body>标签底部的位置，尽量减少对整个页面下载的影响。例如：

<html> 
 <head> 
 <title>Script Example</title> 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head> 
 <body> 
 <p>Hello world!</p> 
 <-- Example of recommended script positioning --> 
 <script type="text/javascript" src="file1.js"></script> 
 <script type="text/javascript" src="file2.js"></script> 
 <script type="text/javascript" src=&#
最低0.47元/天 解锁文章
迎风海盗旗
关注
  • 27
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MyBatis性能调优——优化SQL查询和分页查询速度
禅与计算机程序设计艺术
07-28 2366
MyBatis 是 MyBatis SQL Mapper Framework 的简称，是一个 Java 框架，用于存取数据库中的数据。MyBatis 将 sql 映射到 java 对象上，并将对象映射成 sql，最终实现对关系数据库进行持久化操作。MyBatis 使用 xml 或注解的方式来配置映射关系，并通过 xml 文件或注解来生成mybatis核心配置文件 mybatis-config.xml，然后再根据具体的业务需要编写 mapper 文件。
高性能JavaScript——8、编程实践
chtazycdf的博客
03-26 658
道理很简单：JavaScript的原生部分在你写代码之前已经存在浏览器中了，并且都是低级语音编写的，诸如C++。这意味着这些方法会编译成机器码，成为浏览器的一部分，所以不会像自己写的JavaScript代码那样受到各种限制。当你在JavaScript代码中执行另一段JavaScript代码时，都会导致双重求值的性能消耗。预加载适用于一个函数马上就要被用到， 井且在整个页面的生命周期中频繁出现的场合。调用延迟加载函数时，第一次总会消耗较长的时间，但随后调用相同的函数就会更快，因为不需要再执行检测逻辑。
高性能JavaScript
一切安好
01-17 683
一个标签可以放在 HTML 文档的或标签中，可以在其中多次出现。传统上，标签用于加载外部 JavaScript 文件。部分除此类代码外，还包含标签用于加载外部 CSS 文件和其他页面中间件。也就是说，最好把风格和行为所依赖的部分放在一起，首先加载他们，使得页面可以得到正确的外观和行为。         JavaScript代码运行过程阻塞其他文件下载   优化：     将脚本放
前端vite+vue3——可视化页面性能耗时指标（fmp、fp）
编程知识分享，主打前端
03-10 2万+
大家好，我是yma16，本文分享关于 前端vite+vue3——可视化页面性能耗时（fmp、fp）。fmp的定义FMP（First Meaningful Paint）是一种衡量网页加载性能的指标。它表示在加载过程中，浏览器首次渲染出有意义的内容所花费的时间。有意义的内容指的是用户可以看到和交互的元素，如文本、图片、按钮等。首次渲染的定义可以根据具体的要求和场景而有所不同。通常情况下，首次渲染是指在页面加载过程中，浏览器首次绘制出用户能够理解和识别的内容，而不是空白页面或加载指示符。
【前端领域高频笔试面试】—— JavaScript高级相关
热门推荐
商务合作 | 共同学习 | 携手共进
11-12 8万+
JavaScript高级相关笔试面试题38道
如何写好 JavaScript （一） ——《高性能 JavaScript》章节总结
{{ Coding enjoy }}
11-19 744
现在当你在写一段JS的时候，往往为了提高性能，会选择压缩和合并，或者使用模块化的加载方式。借助这些插件和工具，我们提升了我们JS的执行性能和优化了加载资源的速度。而且现在我们拥有强大的JS处理引擎，比如Chrome的V8。但是仍然有一部分需要我们关注的地方：DOM交互、网络延迟、JavaScript的阻塞和并发下载等。也就是说除了借助工具和引擎外，更需要我们关注JavaScript的底层性能。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1003
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javascript高级程序设计读书笔记——事件总结
yinkaihui的博客
08-16 1790
第13章 事件 1.1 事件冒泡     事件开始的时候从最具体的元素接收，然后逐级向上传播到较为不具体的节点。 1.2 事件捕获     事件捕获与冒泡相反，首先由不具体的节点接收，最后是最具体的节点接收事件。     注意： ie的事件流是事件冒泡。由于老版本的浏览器不支持事件捕获，因此更加建议使用事件冒泡，有特殊需要的时候在使用事件捕获。 1.3 DOM事件流     D
史上被骂最多的编程语言——JavaScript
bitfan（数字世界一凡人）的专栏
08-26 3万+
北理教师“学海泛舟”系列文章之二，介绍JavaScript编程语言，并尝试绘出一张JavaScript技术导航图，方便技术学习和探索。
基于opencv的手势识别——手势控制电脑（手势刷抖音和阅读小说等).zip
04-06
OpenCV（Open Source Computer Vision Library）是一款开源的计算机视觉库，专门为图像和视频处理任务设计，广泛应用于学术... DNN：深度神经网络模块，支持导入和运行预训练的深度学习模型，如卷积神经网络（CNN）。
体感画板——基于外接摄像头追踪物件（Python-Opencv库）.zip
04-06
OpenCV（Open Source Computer Vision Library）是一款开源的计算机视觉库，专门为图像和视频处理任务设计，广泛应用于学术... DNN：深度神经网络模块，支持导入和运行预训练的深度学习模型，如卷积神经网络（CNN）。
基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文）
03-12
Java的产生与流行是当今Internet发展的客观要求，Java是一门各方面性能都很好的编程语言，它的基本特点是简单、面向对象、分布式、解释的、健壮的、安全的、结构中立的、可移植的、性能很优异的、多线程的、动态的，...
Node.js 开发指南.pdf
03-10
1.5.6　引擎效率革命和JavaScript的未来　9 1.6　CommonJS　10 1.6.1　服务端JavaScript的重生　10 1.6.2　CommonJS规范与实现　11 1.7　参考资料　12 第2章　安装和配置Node.js　13 2.1　安装前的准备　14 2.2　...
【redis】Spring之RedisTemplate配置与使用
05-30 330
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1199
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
解决renren-fast地图使用echarts报错
最新发布
Start_t的博客
05-30 208
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 517
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
《javascript数据可视化编程》—— 第4章
05-11
《Javascript数据可视化编程》第4章主要介绍了D3.js的数据绑定方式和数据更新逻辑。数据绑定是D3.js的重要特性之一，通过数据绑定可以将数据和DOM元素进行关联，使得数据更新时DOM元素可以及时响应变化，实现数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值