再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载
- 如果页面中没有script标签,DOMContentLoaded事件并没有等待CSS文件、图片加载完成。
- 如果页面中静态的写有script标签,DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。

- 默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。
- JavaScript 不仅可以读取和修改 DOM 属性,还可以读取和修改 CSSOM 属性。
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行
- 还可以用媒体类型(media type)和媒体查询(media query)来解除对渲染的阻塞。 media=“print",会加载,但不会阻塞;media="(min-width:320px)",会在符合查询条件下阻塞(适配css会执行)
- 大css文件拆分成多个小css文件,并发加载
- 如果 script 标签中包含 defer,那么这一块脚本将不会影响 HTML 文档的解析,而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。即:整个 document 解析完毕且 defer-script 也加载完成之后(这两件事情的顺序无关),会执行所有由 defer-script 加载的 JavaScript 代码,然后触发 DOMContentLoaded 事件。defer不会改变script中代码执行顺序
- 如果 script 标签中包含 async,则 HTML 文档构建不受影响,不需要等待 async-script 执行。但是,async-script 加载完成后,就会立即执行!如果页面还是没有解析完成,就会停下来(阻塞页面)等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行,但一定在 load 触发之前执行。而且:多个 async-script 的执行顺序是不确定的。
- uninitiated:xml 对象被产生,但没有任何文件被加载。
- loading:document正在下载,文件尚未开始解析。
- loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。
- interactive:document完成了解析,但是资源还在下载,对象模型是有效但只读的。
- complete:代表加载成功,文档加载完成,并且所有resource都加载完毕
- onload:表示加载好,换言之,没有加载好不会执行;
- onAbort:图片加载的时候,用户通过点击停止加载时出发
- onerror:如果图片不存在(网络很不通畅,也可能触发 onerror事件)
- complete:图片显示出来以后为true,
再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载的更多相关文章
- 细谈unity资源加载和卸载
转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要 在了解unity的资源管理方式之后,接下来细谈一下Unity的资源是如何从磁盘中加载到运行时的内存中,以及又是如 ...
- 【原】从一个bug浅谈YUI3组件的资源加载
篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替 前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是 ...
- Spring源码分析(十一)bean的加载
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 经过前面的分析,我们终于结束了对XML配置文件的解析,接下来将会面临更大 ...
- NET Core微服务之路:再谈分布式系统中一致性问题分析
前言 一致性:很多时候表现在IT系统中,通常在分布式系统中,必须(或最终)为多个节点的数据保持一致.世间万物,也有存在相同的特征或相似,比如儿时的双胞胎,一批工厂流水线的产品,当然,我们不去讨论非IT ...
- React Native 断点调试 跨域资源加载出错问题的原因分析
写在前面 ————如果从头开始看还没解决,试试文章最后的绝招 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解 ...
- 高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完 ...
- 再谈 webpack build 及 加载优化
之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下 之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看 现在讲讲一个页面的首屏加载速度该如何提升 提前说明 需要 we ...
- 浏览器加载和渲染HTML的过程(标准定义的过程以及现代浏览器的优化)
先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...
- jQuery实现DOM加载方法源码分析
传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... } 但 ...
随机推荐
- obj-c编程01:第一个类和对象的范例
这是obj-c学习过程中的第一篇博文,接下来还会有未知的N篇内容(关键是不知道obj-c有多难搞啊!),而且在以后不断的学习中,还会不断的在以前写的博文中修改和添加新的内容.在遇到暂时无法解决的问题时 ...
- break和continue的简单介绍
1.break break 用于完全结束一个循环,跳出循环体!不管是哪种循环,如果在程序中遇到Break,系统将完全结束该循环,开始执行循环之后的代码: public class TestBreak ...
- 重定向和servlet生命周期
重定向(1)什么是重定向服务器通知浏览器向一个新的地址发送请求.注:可以发送一个302状态码和一个Location消息头.(该消息头包含了一个地址,称之为重定向地址),浏览器收到之后,会立即向重定向地 ...
- Gradle初探
(一):创建一个Gradle项目 1. 环境准备 1.1. 先上Gradle官网下载最新版的程序,地址:https://gradle.org/gradle-download/. 1.2. 配置环境变量 ...
- 网易面经(Java开发岗)
网易面经(Java岗) 网易两面面经整理 岗位:我投递的是杭研所的Java开发岗位.行程:半天的时间南京=杭州之间穿行,单程2个小时,从杭州东站=网易大厦,单程1个小时(如果能买到城站高铁动车票可以从 ...
- Java SE学习笔记 --->高级类特性 ---> toString() 方法
概述: toString() 方法在面向对象当中十分常见,使用频率很高,和equals() 方法一样,也是Object类中定义的方法. jdk中 源码: java.lang.Object类中ToStr ...
- java线程之线程同步
本篇由于涉及多线程操作,所以线程是使用实现Runnable接口来创建的. 在上篇所示线程任务中,我们不难发现,是存在三步操作的: 第一:打印语句: 第二:计算sum=sum-1: 第三:线程休眠. 那 ...
- SOFA 源码分析 — 自动故障剔除
前言 集群中通常一个服务有多个服务提供者.其中部分服务提供者可能由于网络,配置,长时间 fullgc ,线程池满,硬件故障等导致长连接还存活但是程序已经无法正常响应.单机故障剔除功能会将这部分异常的服 ...
- 解决iframe在移动端(主要iPhone)上的问题
前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...
- Http 状态码(status code)常用总结
本来计划写一篇浏览器错误码使用的详细总结,近来想了想,第一这不是很深入的知识点.主要还是一种规定:第二对常用的几种的一个使用场景已经有所了解了,所以今天就写一个简单的汇总,并黏贴常用几个错误码的介绍在 ...