【摘要】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实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
随机推荐
- iframe在ios上不能滚动问题解决
同这篇文章一样,用到了-webkit-overflow-scrolling: touch;属性.主要解决方案是在iframe外层添加一个div,然后设置-webkit-overflow-scrolli ...
- PID控制算法的C语言实现十 专家PID与模糊PID的C语言实现
本节是PID控制算法的C语言实现系列的最后一节,前面8节中,已经分别从PID的实现到深入的过程进行了一个简要的讲解,从前面的讲解中不难看出,PID的控制思想非常简单,其主要问题点和难点在于比例.积分. ...
- CSUST 四月选拔赛个人题解
这场比赛演的逼真,感谢队友不杀之恩 总结:卡题了赶紧换,手上捏着的题尽快上机解决 http://csustacm.com:4803/ 1113~1122 1113:六学家 题意:找出满足ai+aj=a ...
- 手脱UPX v0.89.6 - v1.02
声明: 只为纪录自己的脱壳历程,高手勿喷 这个壳的脱法很多一般都一步直达的,步过我喜欢ESP定律 1.载入OD,在入口下一行ESP定律运行一次 > pushad ; //入口 BE mov es ...
- 简单去除exe自校验方式
简单去除exe自校验方式 一. 自校验定义: 这些程序会检查自己有没有被修改,如果发现被修改的话,便会离开或进行其它动作.基本的校检方法包括 checksum, 检查大小, 检查跳转代码,等 ...
- Rabbitmq -- rpc
一.前言 MQ本身是基于异步的消息处理,前面的示例中所有的生产者(P)将消息发送到RabbitMQ后不会知道消费者(C)处理成功或者失败(甚至连有没有消费者来处理这条消息都不知道).但实际的应用场景中 ...
- MySQL建表时列名同保留字重复问题解决办法
建表时遇到遇到属性名同MySQL的保留字相同导致不能建表的问题,如下SQL语句: CREATE TABLE TBL_ACCOUNT_FROZEN_RECORD ( ID BIGINT NOT NULL ...
- codeblocks 设置代码自动补全
熟悉使用一些开发类IDE的朋友对代码自动补全一定印象深刻,如Visual studio,eclipse等,我们在程序中定义的那一个个超长的变量函数名只需打出几个字母就可自动补全,但是在codebloc ...
- winform MDI子窗口闪动问题(本人测试100%有效解决闪屏问题)
将下面的代码随便放到主窗体的任何一个地方 protected override CreateParams CreateParams //解决MDI闪屏 { get { CreateParams cp ...
- Eng1—English daily notes
English daily notes 2015年 4月 Phrases As a side note 作为附注,顺便说句题外话,和by the way意思相近,例句 As a side note, ...