可视区和网页

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

从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. excel双击文件打开时空白,使用菜单打开正常的解决办法

    excel双击文件打开时空白,使用菜单打开正常的解决办法 打开 excel的选项 找到高级->常规 取消“忽略使用动态数据交换...”的勾,确定. 问题解决.

  2. bzoj4873(最大权闭合子图)

    今天学了最大权闭合子图..然后找了这道题,发现完全不会..... 看了题解发现这种有诸如选了一个就一定要选另外的一些的限制又要求最优值的题有的可以转化成最大权闭合子图, 这个题我们首先想到不会选相交的 ...

  3. noip第9课资料

  4. C/C++ 打开串口和关闭串口

    通常使用下列函数来通过Win系统来对外围设备进行通信处理: 0. 前言 做串口方面的程序,使用CreateFile打开串口通信端口.在对串口操作之前,需要首先打开串口.使用C++进行串口编程,如果采用 ...

  5. 最短路 模板 【bellman-ford,dijkstra,floyd-warshall】

    Bellman-ford: /* bellman ford */ #include <iostream> #include <cstdio> #include <cstr ...

  6. JVM的參數

    博客:https://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html#CMSInitiatingOccupancyFraction_v ...

  7. EBS环境提交新请求默认是"单一请求"

    http://blog.csdn.net/samt007/article/details/38304239 用过EBS的请求都知道,提交一个新报表都要点好几个按钮,其中一个很麻烦的就是选择提交新请求的 ...

  8. GDI+配置

    GDI+的配置过程: 一.打开stdafx.h文件,在其中加入: #include "Gdiplus.h" #pragma comment(lib,"Gdiplus.h& ...

  9. Decimal类型截取保留N位小数向上取, Decimal类型截取保留N位小数并且不进行四舍五入操作

    Decimal类型截取保留N位小数向上取Decimal类型截取保留N位小数并且不进行四舍五入操作 封装静态方法 public class DecimalHelper { /// <summary ...

  10. 你所不知道的ASP.NET Core MVC/WebApi基础系列 (一)

    转自博客:https://www.cnblogs.com/CreateMyself/p/9235968.html 前言 最近发表的EF Core貌似有点多,可别误以为我只专攻EF Core哦,私下有时 ...