【高性能JavaScript】读书笔记

来源：互联网发布：windows ime文件编辑：程序博客网时间：2024/05/01 01:31

【简介】在加载脚本的时候，会发生阻塞，解决这一问题我们可以通过将脚本放到尾部，先让页面渲染，再加载用于交互的脚本文件。同时，提高性能另外一条原则，引入一个<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>

但这样处理，连续加载三个脚本会阻塞页面渲染。只有等到脚本全部加载完了，页面的渲染才会继续，用户感觉到的就是页面等待。

执行JavaScript代码阻塞掐文件的下载

图中每一个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文件的最佳实践。

附：欢迎大家关注我的新浪微博 - 一点编程，了解最新动态。

0 0