无论当前 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.09.23 bzoj1076: [SCOI2008]奖励关（期望+状压dp）

    传送门 一道神奇的期望状压dp. 用f[i][j]f[i][j]f[i][j]表示目前在第i轮已选取物品状态为j,从现在到第k轮能得到的最大贡献. 如果我们从前向后推有可能会遇到不合法的情况. 所以我 ...

  2. 2018.07.08 NOIP模拟 ABCD（背包）

    ABCD 题目背景 SOURCE:NOIP2016-AHSDFZ T2 题目描述 有 4 个长度为 N 的数组 a,b,c,d .现在需要你选择 N 个数构成数组e ,数组e 满足 a[i]≤e[i] ...

  3. 33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距

    33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距 ① When young women were found to ma ...

  4. s28 LNMP架构服务搭建

    nginx-location使用 location语法 location使用的语法例子为: location [=|~|~*|^~] uri{ 对location语法列表说明. |1ocation | ...

  5. IntelliJ IDEA 2017版 编译器使用学习笔记(三) (图文详尽版);IDE快捷键使用

    一.列操作 功能:操作多行列执行相同的功能,达到一次修改多行同类型数据的情况,如图:                 Json字符串,转为枚举类的字段: 首先进行,快捷键一行快速操作 1.选中命令,s ...

  6. 'org.springframework.web.filter.CharacterEncodingFilter' is not assignable to 'javax.servlet.Filter,This inspection lets you spot the following problems that might occur in descriptors that are used t

    1.jar包导入错误,因为maven下载的原因: 删除这样的包,然后让maven重新下载,问题就会解决

  7. hive 学习之异常篇

    一.刚装上hive在执行hive启动的过程中出现 [hadoop@localhost hive-0.6.0]$ hive Invalid maximum heap size: -Xmx4096m Th ...

  8. UVa 12545 Bits Equalizer （贪心）

    题意:给出两个等长的字符串,0可以变成1,?可以变成0和1,可以任意交换s中任意两个字符的位置,问从s变成t至少需要多少次操作. 析:先说我的思路,我看到这应该是贪心,首先,如果先判断s能不能变成t, ...

  9. 使用process_monitor.sh监控hadoop进程的crontab配置

    可以从下列链接找到process_monitor.sh:https://github.com/eyjian/libmooon/blob/master/shell/process_monitor.sh ...

  10. ZOJ2418 Matrix 2017-04-18 21:05 73人阅读 评论(0) 收藏

    Matrix Time Limit: 2 Seconds      Memory Limit: 65536 KB Given an n*n matrix A, whose entries Ai,j a ...