【摘要】JavaScript 的性能优化：加载和执行
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 的性能优化：加载和执行的更多相关文章
- JS性能优化——加载和执行
JavaScript 在浏览器中的性能,可以认为是开发者所面临得最严重的可用性问题.这个问题因JavaScript的阻塞特性变得复杂, 也就是说当浏览器在执行JavaScript代码时,不能同时做其他 ...
- 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）
写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
- JavaScript 的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- [转]JavaScript 的性能优化：加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- JavaScript的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 【转】js JavaScript 的性能优化：加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- 前端性能优化：细说JavaScript的加载与执行
本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...
- 性能优化-css，js的加载与执行
前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
随机推荐
- 【bzoj1878】[SDOI2009]HH的项链
考虑非莫队的离线算法.. 若[l,r]中有重复数值很麻烦,考虑取一个数为代表(最左或最右) 1.最左:用BIT,先把所有第一个出现的数扔进去,将询问左端点升序,每次都可能产生历史的无用点,并出现新的“ ...
- C/C++语言中让电脑随机的在某个范围中的任一随机数
这是我在笔试中碰见的一题中一部分,这就就记录下来.举例,输出[1,3]中任一随机数. #include<iostream> #include<cstdlib> #include ...
- bzoj2314: 士兵的放置（树形DP）
0表示被父亲控制,1表示被儿子控制,2表示被自己控制.f表示最少士兵数,g表示方案数. 转移贼难写,写了好久之后写不下去了,看了一眼题解,学习了...原来还可以这么搞 比如求f[i][1]的时候,要在 ...
- Spring MVC POJO传参方式
有两POJO类 Address.java package com.proc; public class Address { private String province; private Strin ...
- linux jq命令小结
http://note.youdao.com/noteshare?id=0d84ff04edcaa0be512eb0c1e5c41f47
- 「Python」35个知识点
No.1 一切皆对象 众所周知,Java中强调“一切皆对象”,但是Python中的面向对象比Java更加彻底,因为Python中的类(class)也是对象,函数(function)也是对象,而且Pyt ...
- P2596 [ZJOI2006]书架 && Splay 区间操作（三）
P2596 [ZJOI2006]书架 题目描述 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书, ...
- MySQL下创建序列及创建自定义函数方法介绍
工作过程中需要将基于DB2数据库的应用以及数据迁移到MySQL中去,在原应用中,大量使用了SEQUENCE,考虑尽量减少代码的修改,决定在迁移后的应用中继续保留SEQUENCE的使用,这就要求在MyS ...
- java中集合去重2
1.对集合中的自动定义的对象去重: 自定义Person类,同时复写hashCode和equals方法 package collection; public class Person { private ...
- powerdesigner怎么设置同时显示name和code
实现方法:Tools-Display Preference 从数据库里抽取了数据模型,为了理清思路,需要将name改为中文名称,但是pd自动将name填充为code,可以通过如下配置修改: 选择too ...