无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。

在 <head> 中加载外链的 JavaScript的缺点：，当浏览器解析到 <script> 标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的 styles.css 样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。

推荐的代码放置位置：将脚本放在底部，这也是优化 JavaScript 的首要规则。

减少 JavaScript 对性能的影响有以下几种方法：

  • 将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
  • 尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
  • 采用无阻塞下载 JavaScript 脚本的方法：
    • 使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
    • 使用动态创建的<script>元素来下载并执行代码；
    • 使用 XHR 对象下载 JavaScript 代码并注入页面中。

具体方法及示例见http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html

如何正确的加载和执行 JavaScript 代码的更多相关文章

  1. 页面加载时执行JQ代码

    $(function () { //jq加载时执行的这里面是 $("#ss").append("<strong>这是新加的</strong>&qu ...

  2. WebView点击加载的页面中的按钮时不弹出新窗口以及在加载后执行javascript

    mWebView.setWebViewClient(new WebViewClient() { //点击网页中按钮时,在原页面打开 public boolean shouldOverrideUrlLo ...

  3. JavaScript 的性能优化：加载和执行

    随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...

  4. [转]JavaScript 的性能优化：加载和执行

    原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...

  5. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  6. JavaScript的性能优化：加载和执行

    随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...

  7. 【转】js JavaScript 的性能优化：加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  8. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

  9. JS的加载和执行

    从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...

随机推荐

  1. 2018.10.20 NOIP模拟 蛋糕（线段树+贪心/lis）

    传送门 听说是最长反链衍生出的对偶定理就能秒了. 本蒟蒻直接用线段树模拟维护的. 对于第一维排序. 维护第二维的偏序关系可以借助线段树/树状数组维护逆序对的思想建立权值线段树贪心求解. 代码

  2. 2018.08.05 bzoj3223: Tyvj 1729 文艺平衡树（非旋treap）

    传送门 经典的平衡树问题,之前已经用splay写过一次了,今天我突发奇想,写了一发非旋treap的版本,发现挺好写的(虽然跑不过splay). 代码: #include<bits/stdc++. ...

  3. siganl tappII的应用及MATLAB调用

    1.在应用SIGNAL TAPPII时一定要把不用的端口设置为输入三态,否则观察不到数据. 2.用SIGNAL TAPII 观察数据时双向是观察不到数据的,但模块内部用于传输双向口数据的寄存器可以看到 ...

  4. Sometimes , less is more

    给小团队的特别建议 小团队的普遍现象在于人力紧张,不管是在创业公司还是在大公司内.对于不写代码就手痒的技术人员,如果再在技术上有点儿完美主义情节,那真是可以为代码鞠躬尽瘁的.稍微一整理,事情恨不得已经 ...

  5. hdu 5012 模拟+bfs

    http://acm.hdu.edu.cn/showproblem.php?pid=5012 模拟出骰子四种反转方式,bfs,最多不会走超过6步 #include <cstdio> #in ...

  6. iOS 5 故事板进阶(2)

    让我们回到游戏排行窗口Ranking.创建一个 UITableViewController子类,命名为 RankingViewController. 编辑 RankingViewController. ...

  7. linux与unix时间戳互转

    linux与unix时间戳互转 今天在消费kafka数据时遇到了这样一个问题,kafka数据中所有的数据时间戳格式都是unix上时间戳的格式,例如:1505786829101,看到这个时间戳真的是头都 ...

  8. [MySQL Tips]：如何删除unique key约束

    [场景]: 假设最初创建了一个表bank,在street属性上添加了unique约束. create table branch( branch_name ) not null primary key, ...

  9. IOS下HTML5获取焦点 弹键盘

    IOS下sifari和webview默认屏蔽textarea/inputbox获取焦点弹出键盘 苹果移动设备的WebView默认屏蔽textarea/inputbox获取焦点弹出键盘,需要在APP页面 ...

  10. 在TFS持续集成（持续发布）中执行Telnet任务

    Telnet是一种在因特网或局域网上使用虚拟终端连接,提供双向交互式文本通信设备的协议. 它是最早的互联网通讯协议之一.自1969年启用以来,已经经过了将近50年时间,在开放式的操作系统中拥有广泛的用 ...