js的阻塞特性:

所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。

直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

*由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

*嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。

也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

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`来调用

哪些地方会出现css阻塞,哪些地方会出现js阻塞?的更多相关文章

  1. 哪些地方会出现css阻塞,哪些地方会出现js阻塞?

    Js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新一代浏览器 ...

  2. JS阻塞以及CSS阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  3. 【对比分析五】CSS阻塞和JS阻塞

    js 的阻塞特性: 所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到 JS 下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新 ...

  4. css动画是否会被js阻塞

    css动画是否会被js阻塞 css的动画部分是会被js阻塞的,不过transform的动画则不会受影响. 下面举一个margin-left移动的动画下,启动js阻塞动画的性能图表 <style& ...

  5. js阻塞ui进程涉及的知识点整理

    项目进行中遇到了同步ajax阻塞ui线程阻塞的问题,原因是执行两个同步ajax请求为一次完整的方法,因业务需求需要循环执行这个方法,检查后台返回的数据正确,但是由于ajax请求时间过长,考虑增加遮罩层 ...

  6. 五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O

    五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O 五种I/O 模式:[1]        阻塞 I/O          ...

  7. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  8. Linux设备驱动程序学习 高级字符驱动程序操作[阻塞型I/O和非阻塞I/O]【转】

    转自:http://blog.csdn.net/jacobywu/article/details/7475432 阻塞型I/O和非阻塞I/O 阻塞:休眠 非阻塞:异步通知 一 休眠 安全地进入休眠的两 ...

  9. Linux非阻塞IO(四)非阻塞IO中connect的实现

    我们为客户端的编写再做一些工作. 这次我们使用非阻塞IO实现connect函数. int connect(int sockfd, const struct sockaddr *addr, sockle ...

随机推荐

  1. [MIT6.006] 22. Daynamic Programming IV: Guitar Fingering, Tetris, Super Mario Bro. 动态规划IV:吉他指弹,俄罗斯方块,超级玛丽奥

    之前我们讲到动态规划五步中有个Guessing猜,一般情况下猜有两种情况: 在猜和递归上:猜的是用于解决更大问题的子问题: 在子问题定义上:如果要猜更多,就要增加更多子问题. 下面我们来看如果像背包问 ...

  2. 微软面试题: LeetCode 91. 解码方法 出现次数:3

    题目描述: 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1'B' -> 2...'Z' -> 26给定一个只包含数字的非空字符串,请计算解码方法的总数. 示例 ...

  3. 硬盘LBA 和CHS的关系(转)

    磁头数 × 磁道(柱面)数 × 每道扇区数 × 每扇区字节数 l         磁头(head)数:每个盘片一般有上下两面,分别对应1个磁头,共2个磁头:l         磁道(track)数:磁 ...

  4. sql sever 2008基础知识

    下面是一些总结,如果执行时发现错误,可以查看错误消息进行解决,也可上网查资料 数据库的组成: 主数据文件:有且只有一个,扩展名为.mdf. 次数据文件:可以没有,也可以有任意个.扩展名为.ndf. 日 ...

  5. Java 用jxl读取excel并保存到数据库(此方法存在局限,仅限本地电脑操作,放在服务器上的项目,需要把文件上传到服务器,详细信息,见我的别的博客)

    项目中涉及到读取excel中的数据,保存到数据库中,用jxl做起来比较简单. 基本的思路: 把excel放到固定盘里,然后前段页面选择文件,把文件的名字传到后台,再利用jxl进行数据读取,把读取到的数 ...

  6. 面试官:小伙子,你给我讲一下java类加载机制和内存模型吧

    类加载机制 虚拟机把描述类的数据从 Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 类的生命周期 加载(Loadi ...

  7. python中a+=b 和a=a+b的结果一样吗

    这里涉及到可变类型和不可变类型. 可变类型:列表,字典,集合 不可变:数字,字符串,元祖 先看一下不可变类型的运算: +=运算 >>> a, b = 1, 2 >>> ...

  8. kubernetes-dashboard.yaml

    # Copyright 2017 The Kubernetes Authors.## Licensed under the Apache License, Version 2.0 (the " ...

  9. P5656 【模板】二元一次不定方程(exgcd)

    还不会 exgcd 的请移步窝的学习笔记,这里只讲怎么搞出烦人的答案. 在 \(a,b\) 两者互质的情况下,二元一次不定方程的通解:\(a(x+db)+b(y+da)=c\). 所以要先将 \(a, ...

  10. vue组建通信

    父组件 <template> <div> <zi :str="str" @change_fu="getzi"></zi ...