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. windows 服务的安装与卸载之bat脚本命令

    在windows 平台下,服务的安装与卸载可通过bat 脚本命令来完成,同时可编辑服务的描述,具体代码如下: 1.服务的安装DynamicPlanService_installer.bat: @ech ...

  2. css中的定位属性

  3. 【Python3学习】Python环境搭建

    以前电脑上安装过一个python2的环境,这次由于项目跟其他团队人员对的时候,人家的是python3,因为python2也没怎么学,所以对里面还是很不了解的. 所以今天就重新开始python3的学习, ...

  4. 稀疏矩阵 part 3

    ▶ 各种稀疏矩阵数据结构下 y(n,1) = A(n,m) * x(m,1) 的实现,CPU版本 ● MAT 乘法 int dotCPU(const MAT *a, const MAT *x, MAT ...

  5. orcal - 添加用户、授权

    create user jy2 identified by jy2; grant dba to jy2;

  6. tomcat启动成功后访问却404

    1.检查是否把项目添加进tomcat,好久不用tomcat这次就犯了这种低级错误 2.检查路径,tomcat中的访问路径与项目中设置的路径是否一样,因为这次有些配置文件直接复制的源码,但源码中项目名称 ...

  7. 2. spring定时任务

    1.添加命名空间 <!-- 定时注解驱动 --> <task:annotation-driven /> <!-- 进行定时任务的类,将其定义为一个bean --> ...

  8. oracle SQL多表查询

    SQL多表查询 1.集合理论 1.1 什么是集合 具有某种特定性质的事物的总体. 集合的特性:无序性.互异性.确定性. 一个集合可以小到从一个表中取出一行中的一列.              1 ro ...

  9. python大法好——操作mysql

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...

  10. git commit命令

    git commit 主要是将暂存区里的改动提交到本地的版本库.每次使用git commit 命令我们都会在本地版本库生成一个40位的哈希值,这个哈希值也叫commit-id. commit-id在版 ...