原创力文档- 1、本文档共7页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
学习好资料 欢迎下载
高性能 javascript 学习笔记
一、 加载和执行
<script> 标签每次出现都让页面等待脚本的解析和执行， 无论当前 javascript 代码是内嵌的还
是包含在外链文件中的，都必须停下来等待脚本执行完成之后才继续页面的下载和渲染，用户
的交互。
因为当遇到 <script> 标签时， HTML页面无法获知 javascript 代码会不会该改变页面的内容，
因此页面会停止下载和渲染，等待执行完 javascript 代码之后才继续。
1、 脚本位置
浏览器在解析到 <body>之前不会渲染页面的任何部分， js 文件下载之后还有一段延时用于执行，
在不能并行下载的浏览器中很耗时， IE8,Firefox3.5,Safari4 和 Chrome2 允许并行下载
javascript 文件，但是仍然会阻塞其他资源下载和页面渲染。
因此尽可能的将的 <script> 标签放到 <body>标签的底部，减少对整个页面下载的影响。
2、组织脚本
每个 <script> 标签初始下载时都会阻塞页面渲染，应该减少页面包含的 <script> 标签数，包括
内嵌脚本和外链脚本。
内嵌脚本放在外链样式 <link> 标签之后，内嵌脚本为了在执行时获得最精确的样式信息，会阻
塞页面渲染而去等待样式表的下载，因此不要把内嵌脚本紧跟在 <link> 标签之后。
外链脚本： HTTP请求会带来额外的性能开销，因此下载单个 100KB的文件比下载 4 个 25KB 的
文件快，减少页面中外链脚本文件的数量有助于改善性能。
大型网站依赖多个 javascript 脚本文件，我们可以将多个 javascript 文件合并为一个文件，
只引用一个 <script> 标签，减少性能消耗。
文件合并工作可以通过离线打包工具或者类似 Yahoo!combo handler 的实时在线服务实现。
雅虎提供了合并处理器。通过使用指定文件（一个或多个）合并处理后的 URL来获取任意数量
的 YUI 文件。
3、无阻塞的脚本
学习好资料 欢迎下载
减少 javascript 文件大小并限制 HTTP请求数只是优化 web 的第一步，下载单个的较大的
javascript 文件只请求一个 HTTP，但是会锁死浏览器一大段时间，阻塞页面。所以需要向页面
中逐步加载 javascript 文件，这样某种程度上不会阻塞浏览器。
无阻塞的秘诀： 在页面加载完成后才加载 javascript 代码， 就是 window 对象的 load 事件触发
之后再下载脚本。
1）延迟的脚本
HTML4为 <script> 标签定义了一个扩展属性： defer 。该属性只在 IE4 和 Firefox3.5 的浏览器
中支持，在其他浏览器， defer 会被直接忽视。
defer 属性指明本元素所含的脚本不会修改 DOM，代码可以安全的延迟执行。
使用：
外链： <script type = "text/javascript" src = "file.js" defer></script>
内嵌：
<script defer>
alert(defer)
</script>
任何带 defer 属性的 <script> 元素在 DOM完成加载之前都不会执行，无论是内嵌还是外链。
可以放在文档的任何位置，对应的 javascript 文件在页面解析到 <script> 标签时才开始下载，
但是不会执行，直到 DOM加载完成（ onload 事件被触发之前）。
带有 defer 属性的 javasc
文档评论（0）