【高性能JavaScript】读书笔记 - 引入脚本(一) - 01
2017-03-11 20:28
351 查看
【简介】在加载脚本的时候,会发生阻塞,解决这一问题我们可以通过将脚本放到尾部,先让页面渲染,再加载用于交互的脚本文件。同时,提高性能另外一条原则,引入一个<script>标签,做一次HTTP请求。
1. JavaScript阻塞特性
当浏览器在执行JavaScript代码时,不能同时做其他任何事情。多数浏览器使用单一进程来处理用户界面(UI)刷新和JavaScript脚本执行。所以一个时刻,浏览器只能做一件事,要么加载JavaScript脚本,要么刷新渲染浏览器界面。所以,如果JavaScript执行过程耗时过久,我们在视觉上就会察觉到浏览器一直处于等待响应。
简单地说,
<script>标签的每次出现,都会使浏览器或多或少的处于等待状态。
2. 脚本位置 - 将脚本放在底部
理论上来说,把与样式和行为有关的脚本放在一起,并先加载它们,这样有助于确保页面渲染和交互的正确性。<html> <head> <title>脚本组织</title> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> code... </body> </html>
但这样处理,连续加载三个脚本会阻塞页面渲染。只有等到脚本全部加载完了,页面的渲染才会继续,用户感觉到的就是页面等待。
图中每一个js文件都需要花费加载和执行两段时间,如果有若干个js文件,积累起来的时间是惊人的。
幸好现在的浏览器允许并行下载。下面图片上是chrome浏览器在加载多个js文件过程中的并行下载过程。从图中可以看出每个文件之间只有短暂的延迟。
虽然浏览器能很好地解决多个文件的并行下载问题,但仍然有一个脚本文件下载和执行的时间,这个时间仍然会导致阻塞。
因此,脚本加载的最佳实践应该是将脚本放到底部加载。
<html> <head> <title>脚本组织</title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> code... <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> </body> </html>
3. 组织脚本
每个<script>标签初始下载都会阻塞页面渲染,所以减少页面包含的
<script>标签数量,有助于提高性能。
如果
<script>标签是在引入外部脚本文件,就会有HTTP请求带来额外的性能开销,下载一个100KB的文件会比加载4个25KB的文件更快,所以减少页面外链脚本文件的数量将会改善性能。
通常一个大型网站需要依赖数个JavaScript文件,可以把多个文件合并成一个,使用一个
<script>标签引入,做一次HTTP请求。
也可以使用一些内容传输网络(CDN)来分发多个文件,达到使用一个
<script>标签引入,做一次HTTP请求的目效果。比如我们来看淘宝的,
<script src="//g.alicdn.com/??kissy/k/6.2.4/seed-min.js,kg/global-util/1.0.5/index-min.js,tb/tracker/4.0.1/p/index/index.js,kg/tb-nav/2.2.0/index-min.js,secdev/sufei_data/2.2.0/index.js">。通过一个网址,请求了多个js文件。
上面这张图是淘宝首页的源代码,通过自有的CDN实现了一个
<script>标签引入一次HTTP请求的效果。这是在HTML页面中引入多个外链JavaScript文件的最佳实践。
附: 欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。
相关文章推荐
- 【高性能JavaScript】读书笔记 - 引入脚本(二) - 02
- 【高性能JavaScript】读书笔记 - 引入脚本(三) - 03
- 通过文档事件处理程序引入JavaScript脚本代码实例
- 编写高性能的JavaScript-脚本的加载与执行(2)
- 高性能 JavaScript 编程 读书笔记
- 高性能Javascript:脚本的无阻塞加载策略
- 高性能Javascript--脚本的无阻塞加载策略
- 解决WEB页面引入javascript脚本时提示未结束的字符串常量的问题
- JavaScript之 高性能读书笔记
- 高性能javascript笔记:关于脚本的优化
- 自动匹配引入Javascript脚本
- 高性能Javascript:脚本的无阻塞加载策略
- 编写高性能的JavaScript 脚本的加载与执行
- High Performance JavaScript(高性能JavaScript)读书笔记分析
- High Performance JavaScript(高性能JavaScript)读书笔记分析
- 初学javascript之引入javascript脚本代码到html中的4个方法
- 编写高性能的JavaScript-脚本的加载与执行(1)
- High Performance JavaScript(高性能JavaScript)读书笔记
- 高性能JavaScript 读书笔记
- 《高性能 JavaScript》笔记(一):脚本加载和执行