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. 刘志梅201771010115.《面向对象程序设计（java）》第十四周学习总结

    实验十四  Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1)设计模式:反复使用.经过分类编目的.代码设计经验的总结. 在Alexander的模式分类和软件模式的分类 ...

  2. [STM32F103]PWM输入捕获配置

    l 初始化定时器和通道对应IO的时钟. l 初始化IO口,模式为输入: GPIO_Init(); GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IPD; //PA0 ...

  3. hive动态分区问题--分区为中文

    报错如下: Loading data to table data_da.tmp_wlw_test partition (stat_date=2017-05-11, business_type_name ...

  4. Memcache,redis，rabbitMQ,SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  5. Pycharm去掉项目所有 # 注释

    通过快捷键ctrl+shift+R 进入 项目全局替换窗口,点击右上角 勾选正则,然后 搜索框输入 (#.*) 即可 ,然后点击 replace all 去掉所有注释

  6. 解决idea spring boot项目中target中没有同步更新最新目录文件及资源

    idea不像eclipse那样自动将新保存的文件或目录及其他资源更新到target目录中,必须在pom.xml中设置 <build> <resources> <resou ...

  7. 转载：HTTPS证书的产生过程详解

    1.RSA身份验证的隐患 身份验证和密钥协商是TLS的基础功能,要求的前提是合法的服务器掌握着对应的私钥.但RSA算法无法确保服务器身份的合法性,因为公钥并不包含服务器的信息,存在安全隐患:    客 ...

  8. Java反射讲解

    首先我们通过代码来看看发射的作用到底是什么. 1. 首先准备两个很简单的业务类 2. 非反射方式切换不同的业务方法调用 当需要从第一个业务方法切换到第二个业务方法的时候,使用非反射方式,必须修改代码, ...

  9. Swift用户通知授权

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIAppli ...

  10. 监控linux服务器是否能登陆 邮件报警

    import smtplibfrom email.mime.text import MIMETextimport telnetlibimport timedef SendEmail(fromAdd,t ...