可视区和网页

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

从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. 20171126--idleHadnler的理解使用

    相关参考文献: http://www.jianshu.com/p/94d6131a53b2 http://bbs.51cto.com/thread-1094228-1.html https://zhu ...

  2. 20170905工作日记--listview优化大全

    1. 适配器设计模式 实例描述:我们国家的电器使用普通的扁平两项或三项插头,而去外国的话,使用的标准就不一样了,比如德国,使用的是两项圆头的插头,那么我们使用的手机充电器插头无法插到德国的插排中去,那 ...

  3. Java技术----Java泛型详解

    1.为什么需要泛型 泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇将立足于代码介绍.总结了关于泛型的知识.希望能给你带来一些帮助. 先看下面的代码: List list = ...

  4. Swift3 今日(TodayExtension)扩展图文笔记

    >图片1(创建今日扩展) >图片2  >图片3(设置大小)  >图片4(绘画控件) >图片5(设置共享文件)  >图片6(设置群组ID) >图片7(设置URL ...

  5. 使用UTL_HTTP时遭遇ORA-29273

    http://blog.itpub.net/8520577/viewspace-1295182/ 项目中需要使用utl_http访问webserivce.使用utl_http时报错ORA-29273. ...

  6. Spring 使用javaconfig配置

    除了使用xml,spring提供javaconfig配置,下面是简单的例子: 1.声明接口 /** * */ package com.junge.demo.spring.service; /** * ...

  7. Convolutional Restricted Boltzmann Machines

    参考论文:1.Stacks of Convolutional Restricted Boltzmann Machines for Shift-Invariant Feature Learning   ...

  8. Android---------------ContentProvider的学习

    1.Uri  uri = Intent.getData()------------->可以获得Uri的地址 2.Cursor cursor = getContentResolver().quer ...

  9. 网页登入验证码的实现(java&html)

    前端界面实现(由于验证码是动态获取所以用jsp格式) <%@ page language="java" contentType="text/html; charse ...

  10. VS2017新建视图中文乱码解决办法

    问题:VS2017 ASP.NET Core 新建视频默认为ASNI编码格式 解决办法 1:直接将视图页面通过记事本打开,然后另存为UTF-8解决. 2:安装扩展TextTools解决视图文件编码问题 ...