JavaScript优化专题之Loading and Execution加载和运行


Posted in Javascript onJanuary 20, 2016

JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题。此问题因JavaScript的阻塞特征而复杂,也就是说,当JavaScript 运行时其他的事情不能被浏览器处理。事实上,大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务,而同一时间只能有一个任务被执行。

JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。

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

典型的例子是document.write()函数,例如:

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

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>标签之前,不会渲染页面的任何部分。用这种方法把脚本放在页面的顶端,将导致一个可以察觉的延迟,通常表现为:页面打开时,首先显示为一幅空白的页面,而此时用户即不能阅读,也不能与页面进行交互操作

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=”file3.js”></script>

</body>

</html>

此代码展示了所推荐的<script>标签在HTML 文件中的位置。尽管脚本下载之间互相阻塞,但页面已经下载完成并且显示在用户面前了,进入页面的速度不会显得太慢。

以上就是关于javascript优化内容中的Loading and Execution加载和运行的相关介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
学习JavaScript设计模式之观察者模式
Apr 22 #Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 #Javascript
详解javascript实现自定义事件
Jan 19 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP二维数组去重算法
2016/12/17 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python实现简单的购物程序代码实例
2020/03/03 Python
如何在python中执行另一个py文件
2020/04/30 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
查环查孕证明
2014/01/10 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
同志主要表现材料
2014/08/21 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
老人节主持词
2015/07/04 职场文书