浏览器解析HTML文档的资源并下载

<img />,<style>这些资源是并行请求与加载。

<script>脚本是同步请求与加载,阻塞加载。加载完成并执行后再继续解析HTML。

动态<script>是异步加载,就是说可以同时加载其他资源。

关于<script>的执行,分为立即执行和延迟执行。

对于浏览器来说,不管是<style>, <img />, <script>都是一视同仁,都是并行请求多个资源文件并加载,而不是一次只请求一个资源并加载。

只不过最大连接数有限制, 为6个或2个,并行加载6个资源。

但是遇到<script>会有特殊,即阻塞加载其他资源,比如<img/>等。

<script>加载与执行两个阶段,加载是阻塞其他资源的加载,执行也会阻塞。

执行是肯定会阻塞,这个没有什么异步执行,只有延迟执行和立即执行。

加载是并行加载,但是<script>特殊,故分为同步和异步加载。



HTML解析过程中,遇到<style>, <img/>, <script>会去并行加载外部资源。

同步加载(阻塞模式)但是遇到<script>时,会阻止浏览器的后续处理,停止后续的HTLM的解析,因此阻塞后续页面的处理,比如<img/>, <script>, <style>等资源的加载,以及HTML的渲染,和代码的执行。

异步加载(非阻塞),下载js的同时,还会继续进行后续页面的处理

js 之所以要同步执行,是因为 js 中可能有输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。

<script>的阻塞不仅仅是资源文件的加载,而是HTML的解析和渲染,导致了不能加载包含的资源文件。

执行JS必然会阻塞其他一切资源的加载,但是异步加载不会阻塞资源的加载。

但是加载完之后是立即执行还是延迟执行这个可以通过defer来指定。

async异步加载,立即执行。

defer异步加载,延迟执行。

时间: 2024-10-16 13:35:44

浏览器解析HTML文档的资源并下载的相关文章

浏览器如何解析HMTL文档

浏览器在解析HTML文档时,会把HTML解析为一种称为文档对象模型(Document Object Model)的对象集合,简称DOM.DOM的结构是树状的. 如果学过编程的话,对于“对象”和“树”的概念一定不陌生,不过如果没学过的话,那我还是要好好说说. 对象是一个编程的概念,可以说是把一堆有关联的函数和变量封装起来,称为“类”,变量称为“属性”,函数称为“方法”.属于这个“类”的称为“实例”. 比如我们把“人”这个概念封装为对象,身高.体重这些是属性,走.跳等是方法.老夏是“人”这个类的一个

四种生成和解析XML文档的方法详解

众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 一.介绍及优缺点分析 1. DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作.由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的. [优点]      ①允许应用

Java 解析XML文档

一.解析XML文档方式: 1.DOM方式:将整个XML文档读取到内存中,按照XML文件的树状结构图进行解析. 2.SAX方式:基于事件的解析,只需要加载XML中的部分数据,优点是,占用资源更少,内存消耗小. XML文档: <?xml version="1.0" encoding="UTF-8"?> <students> <student> <name>张三</name> <age>20</

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

艺多不压身 -- 四种生成和解析XML文档的方法详解

众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J DOM:在现在的Java JDK里都自带了,在xml-apis.jar包里 SAX: JDOM: DOM4J: 一.介绍及优缺点分析 1. DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加载整个文档和构造层次结构,然

xml基础及其解析xml文档

xml基础及其解析xml文档 xml基础及其解析xml文档 xml基础语法 中国特色乱码问题 写xml文件的工具 xml中使用的转义字符 处理指令已经过时 xml的两个重要的功能 xml注释 xml解析Java应用程序读取xml文件的内容 xml解析原理 xml解析工具 DOM4J使用 DOM4J中核心API 将xml文档从磁盘读进内存形成Document对象 读取所有的标签节点 读取所有的属性节点 读取所有的文本节点 解决上面提出的问题 xml基础语法 一个基本的xml构成: <!--vers

Chrome设计文档-多进程资源加载

原文:Multi-process Resource Loading 背景 浏览器主进程及browser process处理所有的网络通信.原因有三点: Browser process可以控制每一个renderer进程的网络访问 Browser process可以在进程间管理session状态,保持其一致性 Browser process可以针对每个host管理最大链接数 概述 作为一个多进程应用,Chrome分为三层.最底层的是webkit库,它主要负责页面渲染工作.之上是渲染进程Rendere

四种生成和解析XML文档的方法介绍

解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 1.DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合. 这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作.由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的. [优点] ①允许应用程序对数据和结构做出更改. ②访问是双向的,可

四种生成和解析XML文档的方法详解(介绍+优缺点比较+示例)

四种生成和解析XML文档的方法详解(介绍+优缺点比较+示例) 众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址 DOM:在现在的Java JDK里都自带了,在xml-apis.jar包里 SAX:http://sourceforge.net/projects/sax/ JDOM:http://jdom.org/downloads/index.html DOM4J:http://sourceforge.