一、js阻塞特性

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

二、优化方案

1、尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

注意:CSS文件本身是并行下载,不会阻塞页面的其他进程。但是,如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以,最好不要把内嵌脚本放在CSS的<link>之后。

2、减少外链接数量,减少请求。可以将脚本成组打包,这点现在的构建工具已经做得很好了。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3、有几种方法可以使用非阻塞方式下载Javascript:

1 ) .为<script>标签添加defer属性(仅IE和Firefox3.5以上)
2).动态创建<script>元素,用它下载并执行代码

3) . 在页面加载完成后才加载JS,即在window对象的load事件触发后在下载脚本。

4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
5).用XHR对象下载代码,并注入到页面

web性能优化之---JavaScript中的无阻塞加载性能优化方案的更多相关文章

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

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

  2. 无阻塞加载和defer、async

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

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

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

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

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

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

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

  6. jQuery Pjax – 页面无刷新加载,优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

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

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

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

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

  9. JavaScript无阻塞加载具体方式

    将脚本放在底部.\还是放在head中,用以保证在js加载前,能加载出正常显示的页面.\<script>标签放在\前 成组脚本:由于每个\<script>标签下载时阻塞页面解析过 ...

随机推荐

  1. 表单中各种input汇总

    html表单 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 meth ...

  2. 复习上学期的HTML+CSS(1)

    自己跟着网上教程复习上学期的HTML+CSS,因为已经忘得差不多了,而且现在学的js也要以HTML+CSS为基础,坚持每天持续更新. n  B/S 网络结构   Browser/Server 浏览器/ ...

  3. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) A. Trip For Meal

    http://codeforces.com/contest/876/problem/A 题意: 一个人一天要吃n次蜂蜜,他有3个朋友,他第一次总是在一个固定的朋友家吃蜂蜜,如果说没有吃到n次,那么他就 ...

  4. Spring Cloud学习笔记-001

    Spring Boot快速入门 1. Eclipse新建maven工程,骨架选择quickstart: 2. 加入springboot的父工程,和web依赖: 3. 编写一个简单的RESTful接口, ...

  5. elasticsearch启动常见错误

    问题出现环境,OS版本:CentOS-7-x86_64-Minimal-1708:ES版本:elasticsearch-6.2.2. 1.max file descriptors [4096] for ...

  6. 点击后退按钮回到本页面中的另一个标签页(tab)

    在使用zepto进行微信网页开发的时候,遇到一个情况,在本页面存在四个TAB栏,每点击一个栏会显示相应的内容,下图这种: 现在有一个需求是,用户点击了后退按钮,需要回到上一次点击的tab栏. 这个需求 ...

  7. MySQL操作与修改表

    插入数据(insert) insert语句的3个主要组成部分: 所要插入数据的表的名称: 表终需要使用的列的名称: 需要插入到列的值. 数字型主键生成机制 数字型主键生成机制,除了随机选择数字外,还可 ...

  8. node.js使用scp2来进行scp操作

    示例: var client = require('scp2'); client.scp({ host: '175.84.24.92', username: 'remoteusername', pas ...

  9. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  10. Lua版组合算法

    高效率的排列组合算法--<编程珠矶>--Lua实现 原文链接 原文是python实现的,这里给出lua版本的实现 组合算法     本程序的思路是开一个数组,其下标表示1到m个数,数组元素 ...