可视区和网页

通常网页比屏幕的可视区面积要大,因此当网页内容在可视区中放不下时,一般浏览器会提供滚动条。

从URL到构建完DOM树的过程

  1. 当用户输入网页URL的时候,WebKit调用其资源加载器加载该URL对应的网页。
  2. 加载器依赖网络模块建立连接,发送请求并接收答复。
  3. WebKit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的。
  4. 网页被交给HTML解释器转变成一系列的词语(Token)。
  5. 解释器根据词语构建节点(Node),形成DOM树。
  6. 如果节点是JavaScript代码的话,调用JavaScript引擎解释并执行。
  7. JavaScript代码可能会修改DOM树的结构
  8. 如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载它们,但是它们是异步的,不会阻碍当前DOM树的继续创建;如果是JavaScript资源URL(没有标记异步方式),则需要停止当前DOM树的创建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

在上述的过程中,网页在加载和渲染过程中会发出“DOMContent”事件和DOM的"onload"事件,分别在DOM树构建完成之后,以及DOM树建完并且网页所依赖的资源都加载完成之后发生,因为某些资源的加载并不会阻碍DOM树的创建,所以这两个事件多数时候不是同时发生的。

那么浏览器为什么不将Javscript代码弄成异步加载呢,这样的话不就不会堵塞DOM的加载了吗?

弄成异步确实是可以解决堵塞问题,但是又会出现一个新的问题,如果是异步的,假如你在js中有以下这段代码

var divs = document.getElementsByTagName("div");

那么就会获取到页面中的所有div元素,如果不是异步的,获取到的就只是已经渲染出来的div,也就是说使用异步和不使用异步是有区别的,假如浏览器将所有js都弄成异步的,那么你在dom加载之前就无法进行任何的操作。

多进程模型

相信你一定有过这样的经历:在使用浏览器打开很多个页面的时候,不幸的是其中某个页面不响应或者崩溃了,随之而来的可能是更不幸的事——其他所有页面也都不响应或者崩溃了。最让人不能忍受的是,其中一些页面可能还有未保存或者未发送的信息!

这绝对是不堪回首的过去。但是,现在好了,很多现代浏览器支持多进程模型,这个模型可以很好地避免上面的问题,虽然它很复杂而且也有自身的问题,例如更多的资源消耗,但是它的优势也是非常明显的。在WebKit内核之上,Chromium率先在WebKit之外引入了多进程模型。

多进程模型在不可避免地带来一些问题和复杂性的同时,也带来了更多的优势,而且这些优势非常的重要。该模型至少带来三点好处:其一是避免因单个页面的不响应或者崩溃而影响整个浏览器的稳定性,特别是对用户界面的影响;其二是,当第三方插件崩溃时不会影响页面或者浏览器的稳定性,这时因为第三方插件也被使用单独的进程来运行;其三是,它方便了安全模型的实施,也就是说沙箱模型是基于多进程架构的。其实,这很大程度上也是WebKit2产生的原因。

以上说明了,单线程一旦出现某个问题,后面的代码都将无法运行。

webkit技术内幕读书笔记 (二、三)的更多相关文章

  1. Struts2技术内幕 读书笔记二 web开发的基本模式

    最佳实践 在讨论基本模式之前,我们先说说一个词:最佳实践 任何程序的编写都得遵循一个特定的规范.这种规范有约定俗称的例如:包名全小写,类名每个单词第一个字母大写等等等等;另外还有一些需要我们严格遵守的 ...

  2. webkit技术内幕读书笔记 (四)

    资源缓存 资源缓存的目的是为了提高资源使用的效率,其基本思想是建立一个资源的缓存池,当需要请求资源的时候先去资源池查找是否有相应的资源,如果没有则向服务器发送请求,webkit收到资源后将其设置到该资 ...

  3. webkit技术内幕读书笔记 (一)

    本文部分摘录自互联网. Chromeium与Chrome Chromium是Google为发展自家的浏览器Google Chrome而打开的项目,所以Chromium相当于Google Chrome的 ...

  4. 深入理解linux网络技术内幕读书笔记(二)--关键数据结构

    Table of Contents 1 套接字缓冲区: sk_buff结构 1.1 网络选项及内核结构 1.2 结构说明及操作函数 2 net_device结构 2.1 MTU 2.2 结构说明及操作 ...

  5. MySQL技术内幕读书笔记(三)——文件

    目录 文件 参数文件 日志文件 套接字文件 pid文件 表结构定义文件 INNODB存储引擎文件 文件 ​ 有以下类型文件 参数文件:告诉MYSQL实例启动时在哪里找到数据库文件,并且制定某些初始化参 ...

  6. Struts2技术内幕 读书笔记三 表示层的困惑

    表示层能有什么疑惑?很简单,我们暂时忘记所有的框架,就写一个注册的servlet来看看. index.jsp <form id="form1" name="form ...

  7. 深入理解linux网络技术内幕读书笔记(三)--用户空间与内核的接口

    Table of Contents 1 概论 1.1 procfs (/proc 文件系统) 1.1.1 编程接口 1.2 sysctl (/proc/sys目录) 1.2.1 编程接口 1.3 sy ...

  8. Struts2技术内幕 读书笔记一 框架的本质

    本读书笔记系列,主要针对陆舟所著<<Struts2技术内幕 深入解析Strtus2架构设计与实现原理>>一书.笔记中所用的图片若无特殊说明,就都取自书中,特此声明. 什么是框架 ...

  9. Kafka技术内幕 读书笔记之(四) 新消费者——新消费者客户端(二)

    消费者拉取消息 消费者创建拉取请求的准备工作,和生产者创建生产请求的准备工作类似,它们都必须和分区的主副本交互.一个生产者写入的分区和消费者分配的分区都可能有多个,同时多个分区的主副本有可能在同一个节 ...

随机推荐

  1. hadoop一代集群运行代码案例

    hadoop一代集群运行代码案例 集群 一个 master,两个slave,IP分别是192.168.1.2.192.168.1.3.192.168.1.4               hadoop版 ...

  2. js-选项卡套选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单) 文/玄魂 目录 node-webkit教程(6)Native UI API 之Menu(菜单) 前言 6.1  Menu ...

  4. Node.js之绝对选择(2018版)

    [这篇是很早期的文字,由于引用较广泛,担心误导,故按照现在的情形做一些修改] 几年前,完全放弃Asp.net,彻底脱离微软方向.Web开发,在公司团队中,一概使用Node.js.Mongodb.Git ...

  5. Windows核心编程:第12章 纤程

    Github https://github.com/gongluck/Windows-Core-Program.git //第12章 纤程.cpp: 定义应用程序的入口点. // #include & ...

  6. NLog配置JsonLayout中文输出为unicode问题

    日志输出现要改为json格式,网上查询layout配置为JsonLayout就可以了,结果发现输出中文为unicode编码,看很多文章说配置encode="false"就可以了,结 ...

  7. Angular2入门体验

    好的工具往往使得开发应用更快更简单,而不是任何模块都手动开发.angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试.打包.部署等迭代. 本文的目的就是基于TypeScript开发构 ...

  8. Redis---quickList(快速列表)

    1. 概述 考虑到链表的附加空间相对太高,prev 和 next 指针就要占去 16 个字节 (64bit 系统的指针是 8 个字节),另外每个节点的内存都是单独分配,会加剧内存的碎片化,影响内存管理 ...

  9. python socket 编程简单入门

    想讲讲套接字的概念 套接字,即英文socket的中文意译,起源于20世纪70年代,是加利福利亚大学的伯克利版本UNIX(称为BSD UNIX)的一部分.目的是实现主机上运行的一个程序与另一个运行的程序 ...

  10. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...