可视区和网页

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

从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. C#-委派和事件

    委派代表一个方法.当不知道后面的方法名称时,可用委派先声明,待使用方法时,再在委派实例化时写入方法名称. 先声明, public delegate int delegateClassName (参数列 ...

  2. js去除字符串中的空格

    //去除空格 function Trime(string){ return string.replace(/\s/ig,""); }

  3. java基础-day6

    第06天 java基础语法 今日内容介绍 u Eclipse断点调试 u 基础语法的练习 第1章   Eclipse断点调试 1.1      Eclipse断点调试概述 Eclipse的断点调试可以 ...

  4. java poi 合并单元格

    java poi 合并单元格 2017年03月29日 16:39:01 翠烟你懊恼 阅读数:26561   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...

  5. mssql中按周进行表分区的方法

    创建一个包含了一个持久化计算列的表,类似于下面.然后以这个列作为分区的依据. CREATE TABLE [dbo].[test] ( ) NOT NULL , [time] [DATETIME] NU ...

  6. iTerm2连接远程-中文乱码问题

    现象 mac 上用是iterm2终端, Shell 环境是zsh. ssh 到Linux 服务器上查看一些文件时,中文乱码. 
这种情况一般是终端和服务器的字符集不匹配,MacOSX下默认的是utf8 ...

  7. Method not found: 'System.Data.Entity.ModelConfiguration.Configuration.XXX

    使用EF flument API  修改映射数据库字段的自增长 modelBuilder.Entity<Invoice>().Property(p => p.Id).HasDatab ...

  8. phpMyadmin提权那些事

    i春秋作家:anyedt phpMyadmin提权那些事 引言:在渗透测试过程中获知到phpMyadmin的账号密码,如何进行提权呢?往下看,我今天和你说说phpMyadmin提权那些事. 0×00 ...

  9. oracle安装完成之后,执行sqlplus命令,提示:bash: sqlplus: command not found...

    1.安装完oracle后,用终端登录,因为不是直接用oracle用户登录的,所以我就执行$ su oracle切换成oracle用户之后,执行"echo $ORACLE_HOME" ...

  10. Vue过渡动画—Vue学习笔记

    要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...