将脚本放在底部。\还是放在head中,用以保证在js加载前,能加载出正常显示的页面。\<script>标签放在\前

成组脚本:由于每个\<script>标签下载时阻塞页面解析过程,所以限制页面的\<script>总数也可以改善性能。适用于内联脚本和外部脚本。

非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码

(1)defer属性:支持IE4和fierfox3.5更高版本浏览器

(2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:

  <script>

    var script=document.createElement(“script”)

    vcript.type=”text/javascript”

    script.src=”file.js”

    document.getElementsByTagName(“head”)[0].

    appendChild(script)

  </script>

此技术的重点在于:无论在何处启动下载,文件下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)

JavaScript无阻塞加载具体方式的更多相关文章

  1. 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

  2. 无阻塞加载js,防止因js加载不了影响页面显示

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  3. 无阻塞加载和defer、async

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...

  4. js同步、异步、延时、无阻塞加载

    一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...

  5. 高性能 js -- 无阻塞加载脚本

    参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...

  6. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

  7. 高性能Javascript--脚本的无阻塞加载策略

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...

  8. 【转】高性能Javascript--脚本的无阻塞加载策略

    原文转自:http://blog.jobbole.com/78191/ Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中, ...

  9. JavaScript非阻塞加载脚本

    As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a per ...

随机推荐

  1. CentOS7 配置静态IP

    在mini安装完CentOS7后,如果想让电脑能够上网,则必须要进行网络配置. 本虚拟机使用NAT模式上网,网络配置步骤如下: ifconfig命令查到机器网卡: vi /etc/sysconfig/ ...

  2. Retrofit 2.0 使用和原理

    使用教程: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/1016/3588.html retrofit2 与okhttp关系 ...

  3. Spring 概念

    spring概念 1.spring是一个开源的轻量级的开源框架. 2.spring的核心主要分为两部分: (1)aop:面向切面编程,扩展功能不是修改源代码实现. (2)ioc:控制反转,比如有一个类 ...

  4. HDU1814(2-SAT)

    Peaceful Commission Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  5. HDU2157(SummerTrainingDay05-F dp)

    How many ways?? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. Can’t connect to local MySQL server through socket的解决方法

    http://www.aiezu.com/db/mysql_cant_connect_through_socket.html mysql,mysqldump,php连接mysql服务常会提示下面错误: ...

  7. 【代码笔记】iOS-获得现在的时间(2015-09-11)

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  8. H5 canvas 实现飞机大战游戏

    首先看几张效果图: 上面三张图分别对应游戏的三种状态 ready,play,pause.体验一下 先介绍一下canvas 画图的原理,在这个游戏中的背景,飞机,子弹以及飞机被击中爆炸的效果都是一张张的 ...

  9. 用windows浏览器打开Linux的Jupyter notebook开发、调试示例

    1.场景,在windows浏览器中打开Linux环境下的jupyter notebook.Jupyter notebook开启远程服务,Spark.python计算环境在Linux服务器中,而工作环境 ...

  10. web测试实践

    参会人员:赵天宇,周静,张双双,张玉 参会地点:微信群 参会内容:决定评测软件 最后会议结论:决定了选择用中国大学mooc(https://www.icourse163.org/)和结合竞品对象-清华 ...