css阻塞与js阻塞
来源:互联网 发布:php常用算法 编辑:程序博客网 时间:2024/05/21 14:08
js的阻塞特性:所有浏览器在下载JS的时候,都会阻止一切其他活动,比如其他资源的下载,内容的呈现等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提供用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其他资源的下载(例如图片,css文件等)。
由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以会阻塞其他的下载和呈现。
嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但是会阻塞外部脚本的执行。
css怎么会阻塞加载?css本来是可以并行下载的,在什么情况下会出现阻塞加载(在测试观察中,IE6下CSS都是阻塞加载)
当css后面跟着嵌入的JS的时候,该css就会出现阻塞后面资源下载的情况。而当JS放到css前面,就不会出现阻塞的情况。
根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面css阻塞下载的情况。
嵌入JS应该放在上面位置?
(1)放在底部,虽然放在底部照样会阻塞所有呈现,但是不会阻塞资源的下载。
(2)如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
(3)使用defer(只支持IE)
(4)不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用‘setTimeout’来调用。
阅读全文
0 0
- css阻塞与js阻塞
- css阻塞与js阻塞
- css阻塞,js阻塞
- node.js 理解阻塞与非阻塞
- Node.JS阻塞与非阻塞
- css、js的相互阻塞
- 前端优化之-css与js阻塞问题
- css阻塞
- 哪些地方会出现css阻塞,哪些地方会出现js阻塞?
- 阻塞与非阻塞
- 阻塞与非阻塞
- 阻塞与非阻塞
- 阻塞 与 非阻塞
- 阻塞与非阻塞
- 阻塞 与 非阻塞
- 阻塞与非阻塞
- 阻塞与非阻塞
- 阻塞与非阻塞
- HTML入门笔记27-HTML一个简单的表单设计
- RecyclerView实现二级目录显示---item可伸展收缩的RecyclerVoew
- Socket通信
- 平衡二叉树,AVL树之图解篇
- springmvc+mybatis实现简单的图书管理系统
- css阻塞与js阻塞
- kilim
- 1104. Sum of Number Segments (20)
- hdu2083 简易版之最短距离(C语言)
- python初级操作:类,函数
- strcpy等函数的模拟实现
- Spring通过dataSource获取数据库的连接测试
- 《Angular路由跳转之指令跳转》
- NSArray实战