JS以及CSS对页面的阻塞
一、JS阻塞
所有的浏览器在下载JS文件的时候，会阻塞页面上的其他活动，包括其他资源的下载以及页面内容的呈现等等，只有当JS下载、解析、执行完，才会进行后面的 操作。在现代的浏览器中CSS资源和图片image资源是并行下载的，在IE6中默认的并行的加载数目是2个，在IE6以后以及其他的浏览器中的默认的并行加载数目是6个。
在浏览器从服务器接收到HTML文档后，并把HTML在内存中转换为DOM树，在转换节点的过程中如果引入了CSS文件以及添加了images，则会在文档加载的同时并行的加载CSS文件以及图片。但是JS不一样，因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.在没有使用异步加载（async）或者是延迟加载(defer)的情况下,只有在一个JS文件加载解析完后才能加载后面的JS文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。以下讨论都是在没有这两个属性的情况下。
（1）内嵌脚本的阻塞
直接写在HTML文档中的js代码就是内嵌JS，内嵌脚本无需加载，可以直接执行，所以当页面有内嵌的脚本时，可以直接执行，导致会阻塞所有资源的加载和页面的呈现。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>内嵌JS会阻塞页面上的所有内容的呈现</title></head><body><div><ul><li>blogjavaspan style="color: #800000;"</li><li>CSDNspan style="color: #800000;"</li><li>博客园span style="color: #800000;"</li><li>ABCspan style="color: #800000;"</li><li>AAAspan style="color: #800000;"</li></ul><span style="color: #800000;"></span></div><script type="text/javascript">// 循环5秒钟var n = Number(new Date());var n2 = Number(new Date());while((n2 - n) < (6*1000)){
n2 = Number(new Date());
}</script><ul><li>MSNspan style="color: #800000;"</li><li>GOOGLEspan style="color: #800000;"</li><li>YAHOOspan style="color: #800000;"</li></ul></body></html>
上面的内嵌脚不仅会阻塞第二个ul的展示，也会阻塞第一个ul的展示，页面在5秒前是一片空白，当延迟结束后才展现所有的内容
（2）外联脚本阻塞
外联脚本不一样，外联脚本只有当页面加载到该<script>之后才会加载外联脚本，所以外联脚本只会阻塞其后面的内容的呈现以及资源的下载，在下面的代码中，页面会先展示一部分内容，后面一部分内容在5秒后展现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>外联JS文件只会阻塞后面的资源的下载和呈现</title></head><body><ul><li>blogjavaspan style="color: #800000;"</li><li>CSDNspan style="color: #800000;"</li><li>博客园span style="color: #800000;"</li><li>ABCspan style="color: #800000;"</li><li>AAAspan style="color: #800000;"</li></ul><script src="定时.js"></script><!--定时中的代码和上面的延迟函数的内容一样的--><ul><li>MSNspan style="color: #800000;"</li><li>GOOGLEspan style="color: #800000;"</li><li>YAHOOspan style="color: #800000;"</li></ul></body></html>
二、嵌入JS导致CSS阻塞加载的问题
的
Title
fireBug中的时间栈：
谷歌中的事件栈：
在上图中CSS和图片是并行下载的，通过时间线可以看出，后面的图片并没有等到CSS文件完全加载完后在加载。
（2）内嵌脚本导致CSS阻塞页面
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /><script type="text/javascript">function a(){}; </script></head><body><img src="http://www.blogjava.net/images/logo.gif" /><img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /></body></html>
fireBug中的时间栈：
谷歌中的时间栈：
通过上图在狐火中由于内嵌脚本的作用使得图片要等到css完全加载完后在加载，即CSS阻塞了图片的加载。其实质是因为浏览器会维持HTML中CSS和JS的顺序，即在JS前面出现的CSS文件需要加载、解析完后才会执行后面的内嵌JS，而内嵌JS又会阻塞后面的内容
（2）外联脚本
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /><script type="text/javascript" src="fun.js"></script><!--这里fun中的内容就是a方法--></head><body><img src="http://www.blogjava.net/images/logo.gif" /><img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /></body></html>
外联脚本会阻塞后面资源的加载，但是在谷歌浏览器中不管是内联还是外联的脚本均不会阻塞
三、为了不阻塞页面脚本的放置位置
（1）尽量合并脚本减少<script>的出现
（2）尽量使用外联脚本并将脚本放置在<body>底部
（3）使用延迟脚本和异步脚本
（4）内嵌脚本放置在window.onload中执行
JS以及CSS对页面的阻塞相关推荐
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
- 63套js ,html .css效果页面（点个小星星免费下载）
有很多特效网页,包括看到各大网页的效果 话不多说展示几个给大家看看 引入添加 <script src="js/jquery-1.9.1.min.js"></scr ...
- JS HTML CSS 前端页面生成电脑桌面壁纸？（动态可交互）
1.先看效果 以上网页取用海拥大佬的网站,有兴趣可以去关注下 2.设计网页 你们可以自己设计网页或者去网上找好的网页 甚至可以直接用百度放到桌面是可以搜索的 自己写的网页可以放服务器也可以本地 本地连 ...
- JS和CSS的引入/写入位置应该放在哪里？
在HTML5中: 引入CSS和JS文件时 到底应该在head标签中还是body中? 1,引入CSS在head中, 2,JS 的放置位置 a.有的js是立即执行,有的js是调用执行. ( 立即执行在网页 ...
- js、css的阻塞问题
js.css的阻塞问题 这篇文章主要是探索js.css的加载顺序及其影响问题. 下面的代码可以让浏览器阻塞: <!DOCTYPE html> <html lang="en& ...
- js控制css 加载,CSS样式表的加载对于DOM解析,渲染,JS执行的阻塞问题
CSS加载问题 css加载会不会阻塞DOM树的解析? css加载会不会阻塞DOM树的渲染? css加载会不会阻塞后面js语句的执行? css阻塞 h1 { color: red !important ...
- JS 和 CSS 是如何影响页面渲染的？
为什么script脚本要放在body标签的最后面? 这是面试的时候经常遇到的问题,但是很少听到有人能完整的回答出来.其实这个问题并不简单,它涉及到浏览器渲染方面的知识,搞懂了这一块对就能对性能优化有一 ...
- 【Web技术】1005- 关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析
最近系统梳理HTML5所有涉及到的标签时,梳理至<link>和<script>标签时,碰巧想到一个困扰很久的问题,即一般把<script>放在<body> ...
- 页面样式乱了，但是又感觉各种js，css都引入了
页面样式乱了,但是又感觉各种js,css都引入了 怎么办: 一直不太清楚什么原因: <!DOCTYPE html> <html> <head> <meta c ...
最新文章
- JVM内存溢出的几种情形
- 【MATLAB】矩阵信息的获取
- Python中常用的文本转义及编码
- iOS开发 UIPanGestureRecognizer手势抽象类
- 【freemaker】之include,import区别
- 必须掌握的Cookie知识点在这里
- 网络编程-TCP/IP协议栈-IP协议
- BPP 相关——01
- 电力企业计量生产运行系统总体解决方案
- 基于单片机的超市储物柜设计_毕业设计论-单片机储物柜
- Enterprise Library v5.0 -- Data Access Application Block 开发向导（2）
- CodeBlocks汉化包
- python考勤系统代码_500行python代码打造刷脸考勤系统
- 耐得住寂寞，才能守得住繁华
- 树莓派利用OpenCV的图像跟踪、人脸识别等
- 童甫带领下的海航科技集团的无人运输船正式亮相引关注
- Windows使用CMD命令查看WIFI密码
- 摄魄人心的独白，静静聆听，你会感悟很多
- Java实现斗地主的发牌以及展示
- Android使用阿里云接口实现身份证识别功能