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

        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=&#

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/549178.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++笔记:类和对象

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量&#xff0c;类型就像是定义了数据的规则&#xff0c;而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型&#xff0c;而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

配置优先级标记和队列调度示例

配置优先级标记和队列调度示例 组网图形 图1 优先级标记和队列调度示例组网图 优先级标记和队列调度简介配置注意事项组网需求配置思路操作步骤配置文件 优先级标记和队列调度简介 报文进入设备之后&#xff0c;设备会根据相应的规则分配或修改报文各种优先级的值&#xff…

【鸿蒙开发】饿了么页面练习

0. 整体结构 整体划分3部分。店铺部分&#xff0c;购物车部分&#xff0c;金额统计部分。使用 Stack 把3部分堆叠 0.1 整体页面 Index.ets 修改 Index.ets &#xff0c;使用堆叠布局&#xff0c;并居底部对齐 import { ElShop } from ../components/ElShop import { ElShopp…

slRegisterDistribution failed with error: 0x8000000d Error: 0x8000000d ?

powershell用管理员打开&#xff0c;输入Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux 怎么用管理员权限打开powershell&#xff1f;

告别传统开发,轻松套用模板,低代码平台助你快速构建商城与网站

随着人工智能时代的到来&#xff0c;很多复杂的工作再日益变得简单。比如20年前开发一个在线商城完成支付交易&#xff0c;那是一个不得了的事情&#xff0c;现在的零售巨头淘宝和京东就是在那个时代崛起的。新时代涌现出了许多新的工具&#xff0c;比如使用低代码平台搭建的自…

【STL详解 —— priority_queue的使用与模拟实现】

STL详解 —— priority_queue的使用与模拟实现 priority_queue的使用priority_queue的介绍priority_queue的定义方式priority_queue各个接口的使用 priority_queue的模拟实现仿函数priority_queue的模拟实现 priority_queue的使用 priority_queue的介绍 std::priority_queue 是…

排序1——C语言

排序 1. 复杂度2. 插入排序2.1 直接插入排序2.2 希尔排序 3. 选择排序3.1 直接选择排序3.2 堆排序 排序在生活中很常见&#xff0c;比如在网购时&#xff0c;按价格排序&#xff0c;按好评数排序&#xff0c;点餐时&#xff0c;按评分排序等等。而排序有快和慢&#xff0c;快的…

IIC和OLED再认识

IIC介绍 51是由于芯片功能不齐全&#xff0c;以至于需要软件编写IIC 而STM32芯片足够将IIC配置在硬件当中以至于直接读写即可 忘记了可回顾51的16.IIC 协议 和 OLED_oled,iic通信波特率-CSDN博客 在STM32中使用IIC可以直接调用HAL库的库函数&#xff1a; HAL_StatusTypeDe…

Appium Desktop + Appium Inspector + 模拟器连接

一、环境预备 1.你需要安装好配置好adb,确保可以在命令行直接运行adb指令 2.安装Appium Desktop、Appium Inspector 、 模拟器 二、启动appium 服务 启动后&#xff0c;画面如下&#xff1a; 三、启动模拟器 此时&#xff0c;启动模拟器&#xff0c;打开电脑cmd窗口&#x…

研发岗-统信UOS系统配置npm git等前端常用配置

第一步 获取root权限 配置环境等都需要用到root权限&#xff0c;所以我们先获取到root权限&#xff0c;方便下面的操作 下载软件 在UOS应用商店下载的所需应用 版本都比较低 安装node 官网下载了【arm64】的包&#xff0c;解压到指定文件夹&#xff0c;设置链接&#xff0…

揭秘AI精准输出:如何构建完美的AIGC提示词?

揭秘AI精准输出&#xff1a;如何构建完美的AIGC提示词&#xff1f;&#x1f916; 文章目录 揭秘AI精准输出&#xff1a;如何构建完美的AIGC提示词&#xff1f;&#x1f916;摘要引言正文&#x1f4d8; 提示词的基本概念1. 什么是提示词&#xff1f;2. 提示词的作用 &#x1f4d…

JAVA云HIS与LIS想知道区别在哪里吗?一分钟带你快速了解

JAVA云HIS与LIS想知道区别在哪里吗&#xff1f;一分钟带你快速了解 HIS系统与LIS系统使用各自独立的服务器&#xff0c;数据库不同&#xff0c;HIS系统、LIS系统服务器分别使用ORACLE数据库和SQLSERVER数据库&#xff0c;彼此数据信息不能共真&#xff0c;要解决HIS系统与LIS系…

vue iview table实现全选

之前我们在文章《iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重》里实现过全选功能,不过那有一个弊端就是需要调接口一次性获取全部的数据,这会造成请求数据响应超时或报错,因为数据量大的话这样体验也不好,于是我们改了一下,因为…

aosp13/14命令行进入分屏相关实战

背景&#xff1a; 分屏一般在手机上都是都是从桌面的最近任务卡片进入的&#xff0c;一般来说手机用户都是这样操作的&#xff0c;但是有一些场景或者情况就不一定可以顺利用上这个桌面的多任务卡片进入。 比如以下场景&#xff1a; 1、可能不是桌面的多任务的场景&#xff0c…

【Altium Designer 20 笔记】PCB铺铜过程

PCB铺铜步骤 切换到Keep-Out Layer&#xff08;禁止布线层&#xff09; 使用shifts键切换单层显示 画禁止布线范围&#xff08;防止铺铜过大&#xff09; 切换到需要铺铜的层 选择铺铜网络&#xff0c;通常是地&#xff08;GND&#xff09;或某个电源网络 隐藏覆铜&#xff1a;…

一.吊打面试官系列-数据库优化-认识MySql索引

1.什么是索引 索引&#xff08;Index&#xff09;是帮助DBMS&#xff08;数据库&#xff09;高效获取数据的数据结构&#xff0c;索引是为了加速对表中数据行的检索而创建的一种分散的存储结构。如果数据库没有索引就会走表进行全表扫描&#xff0c;一旦数据量上来&#xff0c…

如何基于香橙派AIpro对视频/图像数据进行预处理

背景介绍 受网络结构和训练方式等因素的影响&#xff0c;绝大多数神经网络模型对输入数据都有格式上的限制。在计算机视觉领域&#xff0c;这个限制大多体现在图像的尺寸、色域、归一化参数等。如果源图或视频的尺寸、格式等与网络模型的要求不一致时&#xff0c;我们需要对其…

【中间件】ElasticSearch简介和基本操作

一、简介 Elasticsearch 是一个分布式、RESTful 风格的搜索和数据分析引擎&#xff0c;支持各种数据类型&#xff0c;包括文本、数字、地理、结构化、非结构化 ,可以让你存储所有类型的数据&#xff0c;能够解决不断涌现出的各种用例。其构成如下&#xff1a; 说明&#xff1…

递归、搜索与回溯算法——递归

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享递归,搜索与回溯算法关于递归的专题 如果有不足的或者错误的请您指出! 目录 1.什么时候使用递归2.汉诺塔2.1解析2.2题解 3.合并两个有序链表3.1解析3.2题解 4.翻转链表4.1解析4…

Spring Boot 统一功能处理(二)

本篇主要介绍Spring Boot统一功能处理中的统一数据返回格式。 目录 一、定义统一的返回类 二、配置统一数据格式 三、测试配置效果 四、统一格式返回的优点 五、源码角度解析String问题 一、定义统一的返回类 在我们的接口在处理请求时&#xff0c;返回的结果可以说是参…