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 相关文章推荐
围观tangram js库
Dec 28 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Vue声明式渲染详解
May 17 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
介绍一下28个JS常用数组方法
May 06 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
js 编写规范
2010/03/03 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
实例讲解python函数式编程
2014/06/09 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python中的下划线详解
2015/06/24 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python实现zabbix发送短信脚本
2018/09/17 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
学雷锋演讲稿
2014/03/04 职场文书
电气工程自动化求职信
2014/03/14 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
MySQL里面的子查询的基本使用
2021/08/02 MySQL
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android