1、浏览器遇到js代码会暂停页面的下载和渲染，谁晓得js代码会不会把html给强奸（改变）了；

2、延迟脚本加载：defer 属性

<html>

<head>

    <title>Script Defer Example</title>

</head>

<body>

    <script type="text/javascript" defer>

        alert("defer");

    </script>

    <script type="text/javascript">

        alert("script");

    </script>

    <script type="text/javascript">

        window.onload = function(){

            alert("load");

        };

    </script>

</body>

</html>

不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的<script>元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。

3、动态加载很多 JavaScript 文件，浏览器不保证文件加载的顺序。通过 loadScript()函数加载多个 JavaScript 脚本可以确保加载顺序

loadScript("script1.js", function(){

    loadScript("script2.js", function(){

        loadScript("script3.js", function(){

            alert("All files are loaded!");

        });

    });

});

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

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

详细链接：https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/

【摘要】JavaScript 的性能优化：加载和执行的更多相关文章

  1. JS性能优化——加载和执行

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

  2. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  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的性能优化：加载和执行

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

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

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

  7. 前端性能优化：细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  8. 性能优化-css，js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  9. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

随机推荐

  1. 【BZOJ4456】旅行者（最短路，分治）

    [BZOJ4456]旅行者(最短路,分治) 题面 BZOJ Description 小Y来到了一个新的城市旅行.她发现了这个城市的布局是网格状的,也就是有n条从东到西的道路和m条从南到北 的道路,这些 ...

  2. BZOJ1072 排列perm 【状压dp】

    Description 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0).例如123434有90种排列能 被2整除,其中末位为2的有30种,末位为4的有60种. Inpu ...

  3. 利用script和scriptlet moniker绕过脚本白名单限制

    没事儿看了一下subtee和enigma0x3今年在BSides Nashville 2017上的演讲,觉得这两个猥琐男简直不能再猥琐了 :-)其中有一个猥琐小技巧,又可以让我们好好hunting一番 ...

  4. 【bzoj4002】有意义的字符串

    Portal --> bzoj4002 Solution ​ 虽然说这题有点强行但是感觉还是挺妙的,给你通项让你反推数列的这种==有点毒 ​​ 补档时间 ​ 首先有一个东西叫做特征方程,我们可以 ...

  5. 2-sat问题学习记录

    如果你不知道什么是sat问题,请看以下问答. Q:sat问题是什麽?A:首先你有n个布尔变量,然后你有一个关于这n个布尔变量的布尔表达式,问你,如果让你随意给这n个布尔变量赋值,这个布尔表达式能否成立 ...

  6. python基础----多态与多态性、super函数用法、继承原理

    一.多态与多态性                                                                        ㈠多态: 多态指的是一类事物有多种形态, ...

  7. 【状压DP】【CF8C】 Looking for Order

    传送门 Description 给你n个点,每次可以从起点到最多两个点然后回到起点.求经过每个点最少一次的最短欧氏距离和是多少 Input 第一行是起点的坐标 第二行是点的个数\(n\) 下面\(n\ ...

  8. 链接错误 multiply defined (by misc_1.o and misc.o).

    http://www.stmcu.org/module/forum/thread-286128-1-1.html *** Using Compiler 'V5.06 (build 20)', fold ...

  9. Codeforces 97.B Superset

    A set of points on a plane is called good, if for any two points at least one of the three condition ...

  10. [POI2014] KUR-Couriers (主席树)

    [POI2014]KUR-Couriers 题目描述 Byteasar works for the BAJ company, which sells computer games. The BAJ c ...