js阻塞文档渲染与解析那么css呢？

结论一、css：阻塞渲染，不阻塞dom解析

<head>

      <script>

        document.addEventListener('DOMContentLoaded',function(){

            alert(document.getElementById("myinput"))

        })

    </script>

<!--    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

    <input type="text" id="myinput" />

<span class="label label-default">Default</span>

</body>

当css样式还未加载完成的时候，初始的html文档已经加载，解析完毕了

结论二、css的加载阻塞后面加载

<head>

      <!--<script>

        document.addEventListener('DOMContentLoaded',function(){

            alert(document.getElementById("myinput"))

        })

    </script>-->

  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script>

    alert(1)

</script>

</head>

<body>

    <input type="text" id="myinput" />

<span class="label label-default">Default</span>

</body>

由于js的性值，加载后立即执行，可以判断，css阻塞js的加载

css与dom的渲染与解析的更多相关文章

  1. 传统的dom的渲染方式

    DOM渲染的过程大致分为三个阶段: 后端渲染 前端渲染 独立DOM渲染(前后端相结合渲染) 1.后端渲染:DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端D ...

  2. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

  3. React 服务器渲染原理解析与实践

    第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识. 1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端 ...

  4. Django_rest_framework_渲染器/解析器/路由控制/分页

    目录 渲染器 解析器 路由控制 分页 渲染器 简介 什么是渲染器 根据 用户请求URL 或 用户可接受的类型,筛选出合适的 渲染组件. 渲染器的作用 序列化.友好的展示数据 渲染器配置 首先要在set ...

  5. vue（数据改变，DOM不渲染问题）

    1.组件内部,属性值地址空间内引用地址改变,DOM不能渲染. 问题举例:this.items = [[],[],[],[]] 1.在items 中,修改任意一项数组中的值,DOM是不会更新的,2.解决 ...

  6. 第二章、drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 (详细版)

    目录 drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 Postman接口工具 drf框架 注册rest_framework drf框架风格 drf请求生命周期 请求模块 ...

  7. css加载是否会阻塞dom树渲染

    这里说的是头部引入css的情况 首先,我们都知道:css是由单独的下载线程异步下载的. 咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下. 会影响什么呢? 一个就是DOM树解析, ...

  8. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  9. Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2

    在<Angular开发实践(六):服务端渲染>这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window. document. navigator等浏览器 ...

随机推荐

  1. http中的filter拦截servlet之后获取body，字符流关闭，无法继续传入控制器

    https://blog.csdn.net/pyxly1314/article/details/51802652

  2. C语言数据结构基础学习笔记——静态查找表

    查找:在数据集合中寻找满足某种条件的数据元素的过程称为查找. 查找表:用于查找的数据集合称为查找表,一般有以下操作:①查找是否在表中:②查找属性:③进行操作. 查找表又分为: ①静态查找表:只可以进行 ...

  3. jenkins使用git拉取gitlab代码

    1 在安装jenkins的主机上新加一个jenkins用户, 切换到jenkins用户登录, 生成公钥私钥ssh-keygen -t rsa -C "your email" -f ...

  4. python-web自动化-鼠标操作

    鼠标操作由ActionChains类来完成鼠标操作 perform() 执行鼠标操作move_to_element() 鼠标悬浮:最常用的操作double_click() 双击操作context_cl ...

  5. mass

    @python青岛qq群 1.爬取豆瓣,登录一次爬取后再循环就退出登录,抓不到了: 2.用requests.session试试,只要session对象不释放,就能记住登录状态的cookie: 3.se ...

  6. python--对象实例化过程

    实例化过程: class luffy_stu: def __init__(self,name,age,sex): self.name = name self.age = age self.sex = ...

  7. CI、CD相关概念

    1.CI:持续集成(CONTINUOUS INTEGRATION) 基本概念 CI的全称是Continuous Integration,表示持续集成. 在CI环境中,开发人员将会频繁地向主干提交代码. ...

  8. centos7,zabbix3.2通过zabbix_java_gateway监控jmx[java/tomcat]

    网络上很多教程也比较多和全了,但是自己做时候多多少少的坑备注下吧. 1,监控原理简单说一下,就是zabbix_server通过代理(zabbix_java_gateway)来获取agent端(tomc ...

  9. 魔力Python——对象

    Python之中,一切皆对象. 本文分为4部分: 1. 面向对象:初识 2. 面向对象:进阶 3. 面向对象:三大特性----继承,多态,封装 4. 面向对象:反射 0. 楔子 面向过程和面向对象的是 ...

  10. Centos7的防火墙关闭

    第一步.centos7安装service 第二步. 或者可以不用service,有另一个办法.