无论当前 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. Centos记录所有用户登录和操作的详细日志

    1.起因 最近Linux服务器上一些文件呗篡改,想追查已经查不到记录了,所以得想个办法记录下所有用户的操作记录. 一般大家通常会采用history来记录,但是history有个缺陷就是默认是1000行 ...

  2. 2018.10.18 bzoj1185: [HNOI2007]最小矩形覆盖（旋转卡壳）

    传送门 不难看出最后的矩形一定有一条边与凸包某条边重合. 因此先求出凸包,然后旋转卡壳求出当前最小矩形面积更新答案. 代码: #include<bits/stdc++.h> #define ...

  3. C语言之接收方向键指令让屏幕上的输出能移动

    首先,需要了解一下控制台坐标 #include <stdio.h> #include <stdlib.h> #include <conio.h> main() { ...

  4. EditPlus常用快捷键[私人]

    EditPlus快捷键大全网上一搜一大把, 本文档只记录自己常用的快捷键, 随时更新: 必用: ctrl + c 复制 ctrl + x 剪切 ctrl + v 粘贴 ctrl + z 回滚 ctrl ...

  5. c++内存管理方式

    概述 本章总结一些关于个人对内存管理的理解,主要包括如下内容: 内存管理原则 优秀的接口 智能指针的作用在哪里? 内存管理原则 学c++的同学都知道这个内存管理原则,就是“谁创建,谁释放”或者说“谁申 ...

  6. android中Actionbar详解

    1.什么是Action BarAction Bar被认为是新版Android系统中最重要的交互元素,在程序运行中一直置于顶部,主要起到的作用在于:1)突出显示一些重要操作(如“最新”.“搜索”等)2) ...

  7. hdu 1300 Deck

    题目 分析:对于n张卡片的最佳摆法,我们只需要在n-1张卡片的摆法下面加一张边缘与桌檐重合的卡片,并将所有卡片一起向桌檐外移动.对于一种最佳摆法,其中心一定在桌檐上,所以一定符合杠杆原理,支点是桌檐. ...

  8. 结对编程--四则运算（Java）梅进鹏 欧思良

    结对编程--四则运算(Java)梅进鹏 欧思良 Github项目地址:https://github.com/MeiJinpen/Arithmetic 功能要求 题目:实现一个自动生成小学四则运算题目的 ...

  9. 一句话为当前窗口客户区捉图: GetFormImage 来自万一的博客

    一句话为当前窗口客户区捉图: GetFormImage http://www.cnblogs.com/del/archive/2008/10/24/1318738.html unit Unit1; i ...

  10. 【WinRT】TransitionDemo

    折腾了一晚,将 WinRT 里的所有 Transition 做了一个小 Demo,用于演示各个 Transition 的效果. PS:NavigationThemeTransition 请参考:htt ...