加载和执行 --《高性能JavaScript》
1.起因:
每次遇到<script> 标签时,页面必须停下来等待代码下载并执行完,然后再继续处理其他部分。
2.减少JavaScript对性能的影响
1.将所有的JavaScript文件放在</body>前,这能确保脚本执行前页面已经完成了渲染。
2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也就更迅速。无论外链脚本还是内嵌脚本。
3.有多种无阻塞下载JavaScript方法:
1.使用<script>的defer属性,async属性(IE)
2.使用动态创建的<script>元素来下载并执行代码
function loadScript(url, callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState){ //IE9以下
script.onreadystatechange = function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback();
}
}
}else{
script.onload = function () {
//firefox chrome safair opera
callback();
}
}
script.src = url;
document.head.appendChild(script);
}
3.使用XHR对象下载JavaScript代码并注入页面中
加载和执行 --《高性能JavaScript》的更多相关文章
- [转]JavaScript 的性能优化:加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- 【转】js JavaScript 的性能优化:加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- JavaScript 的性能优化:加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 如何正确的加载和执行 JavaScript 代码
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
随机推荐
- ER模型图工具:PowerDesigner
导读:开始是想一个阶段一个阶段的写文档,再写了可行性分析报告之后,发现这种方法整体性不强,写出来的文档也总是有考虑不周的地方.后来,就看完了全部的软工视频再写.现在该写项目开发总结报告了.在写文档的过 ...
- tomcat404
确认目录下有我的html文件,但仍然是404. 问题一: 指定目录下没有访问的文件,这是最常见的,也是最容易解决的.只需要将访问的文件(如:a.html)放到指定目录下即可. 问题二: 将访问的文件( ...
- iOS NSLog各种打印
%@ 对象 %d,%i 整型 (%i的老写法) %hd 短整型 %ld , %lld 长整型 %u 无符整型 %f 浮点型和double型 %0.2f 精度浮点数,只保留两位小数 %x: 为32 ...
- 【Luogu】P1352没有上司的舞会(树形DP)
题目链接 设f[i][0]表示第i个人不去舞会时子树的最大欢乐度,f[i][1]表示第i个人去舞会时子树的最大欢乐度. 则有状态转移方程:f[i][0]+=∑max(f[to][0],f[to][1] ...
- 【2018.9.20】JOI 2017 Final T2「準急電車 / Semiexpress」
题目描述 JOI 铁路公司是 JOI 国唯一的铁路公司. 在某条铁路沿线共有 $N$ 座车站,依次编号为 $1...N$. 目前,正在服役的车次按照运行速度可分为两类:高速电车(简称快车)与普通电车( ...
- BZOJ [P2124] 等差子序列
线段树维护哈希值 要求出现长度大于三的等差子序列,我们只要找到长度等于三的就可以了 初看本题没有思路,只能暴力枚举,O(n^4) 后来发现,这个序列是n的一个排列,那么每个数字都只会出现一次 我们可以 ...
- 【HDOJ6222】Heron and His Triangle(Java,二分,递推)
题意:让你找这样的一个三角形,三条边为t,t-1,t+1,并且面积为整数,最后满足t大于等于n. n<=1e30 思路:直接推式子不会,打表找规律 f(n)=4*f(n-1)-f(n-2)(n& ...
- SQL 随机取出一条数据
今天遇到一需求,需要随机取出一条数据.网上找了下,sqlserver自带的有newID()这个函数,可以随机出来一个guid,用来取随机数还是蛮不错的. 直接上SQL: select top 1 *, ...
- 网上找的一篇博文,原文搞错了,应该是\r\n,本文已改正!——回车CR和换行line feed
"回车"(carriage return)和"换行"(line feed)与 ASCII表 关于“回车”(carriage return)和“换行”(line ...
- awk 对简单文本处理试水
#juanjuan是一个文件 [root@localhost c_test]# cat juanjuan , , bffd97d0 , , bffd97cc , , bffd97c8 , , #-F ...