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. SA vs NSA

    5G: What is Standalone (SA) vs Non-Standalone (NSA) Networks? According to the recent 3GPP Release 1 ...

  2. 一次请求中，经过 nginx+uWSGI+flask应用程序搭建服务的执行过程

    Flask框架有自带的http server,但是缺点非常明显,并发能力,及时响应非常差,只适合开发时自测使用. 在我接触过的项目中,生产环境使用nginx+uWSGI+flask应用程序进行部署服务 ...

  3. MySQL面试试题与答案

    本次试题设计两个表:student.exam student表 exam表 一.写一条SQL语句,按学号排序输出数学成绩 SELECT s.sno sno,score FROM exam e,stud ...

  4. LeetCode 147. Insertion Sort List 链表插入排序 C++/Java

    Sort a linked list using insertion sort. A graphical example of insertion sort. The partial sorted l ...

  5. ActiveMQ(4)---ActiveMQ原理分析之消息消费

    消费端消费消息的原理 我们通过上一节课的讲解,知道有两种方法可以接收消息,一种是使用同步阻塞的MessageConsumer#receive方法.另一种是使用消息监听器MessageListener. ...

  6. servlet对象的生命周期

    servlet对象默认第一次访问的时候创建,服务器关闭的时候销毁.当servlet对象创建的时候会调用init方法,当对象销毁的时候,会调用destroy方法,每次访问servlet时,都会调用ser ...

  7. OpenStack构架简介

    OpenStack既是一个社区,也是一个项目和一个开源软件,提供开放源码软件,建立公共和私有云,它提供了一个部署云的操作平台或工具集,其宗旨在于:帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云 ...

  8. node-服务器

    原生: const http=require('http'); http.createServer((request,response)=>{ response.writeHead(200,{& ...

  9. linux随机字符串

    pwgen  -s 32 1 openssl passwd -salt openssl rand -base64 32 openssl rand -hex 100

  10. MySQL一般查询日志或者慢查询日志历史数据的清理

    general log&slow query log 对于MySQL的一般查询日志和慢查询日志,开启比较简单,其中公用的一个参数是log_output,log_output控制着慢查询和一般查 ...