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. Socket 套接字的系统调用

    socket 结构 /** * struct socket - general BSD socket * @state: socket state (%SS_CONNECTED, etc) * @ty ...

  2. ELF文件格式内容

    在计算机科学中,是一种用于二进制文件.可执行文件.目标代码.共享库和核心转储格式文件.   ELF文件组成部分 ELF文件由4部分组成,分别是ELF头(ELF header).程序头表(Program ...

  3. linux之HTTP服务

    1.基本的配置   httpd:俗称Apache (A pachey Server) /etc/httpd/conf/httpd.conf            #配置文件 /etc/httpd/co ...

  4. 2w+长文带你剖析ConcurrentHashMap~!

    并发编程实践中,ConcurrentHashMap是一个经常被使用的数据结构,相比于Hashtable以及Collections.synchronizedMap(),ConcurrentHashMap ...

  5. Bad magic number ImportError in python

    是源码编译里面版本不对,删除掉源码pyc然后重新编译就可以了 find .-name '*.pyc'-delete python -m compileall . 更新历史 why when 创建 20 ...

  6. tp5 上传视频方法

    控制器调用 /** * 视频上传 */ public function video_add(){ if (request()->isPost()){ $video = $_FILES['vide ...

  7. Pinpoint 更改agentid 和 agent name 长度限制(Pinpoint系列二)

    本文基于 Pinpoint 2.1.0 版本 本文的内容为了更改 ID 和 Name 长度限制,因为有使用容器或者是服务名称确实比较长,所以根据业务场景,我们需要更改源码来实现这个. 具体更改,参考 ...

  8. 赶紧收藏!这些Java中的流程控制知识你都不知道,你凭什么涨薪?

    Java的流程控制 基础阶段 目录: 用户交互Scanner 顺序结构 选择结构 循环结构 break & continue 练习题 1.Scanner对象 之前我们学的基本语法中并没有实现程 ...

  9. SpringBoot整合MyBatis,HiKari、Druid连接池的使用

    SpringBoot整合MyBatis 1.创建项目时勾选mybatis.数据库驱动.   mysql驱动默认是8.x的版本,如果要使用5.x的版本,创建后到pom.xml中改. 也可以手动添加依赖 ...

  10. 2020阿里Java面试题目大汇总,看看你离阿里还有多远,附答案!

    前言 首先说一下情况,我大概我是从去年12月份开始看书学习,到今年的6月份,一直学到看大家的面经基本上百分之90以上都会,我就在5月份开始投简历,边面试边补充基础知识等.也是有些辛苦.终于是在前不久拿 ...