前端开发者应该明白的浏览器工做原理

时间 2019-11-07

原文原文链接

原文地址：banggan.github.io/2019/02/20/…html

前言

做为前端开发，咱们日常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟作了什么？相信不少人脑海里都会出现个大概的轮廓，但是一到细化具体的过程就答不上来。那么，做为前端开发者，应该从哪些方面延伸来回答这个问题呢？前端

浏览器工做流程

对于浏览器来讲，当在地址栏输入url地址，浏览器所作的事情就是把一个url变成一个在屏幕上显示的网页,大体的过程是这样的： git

从HTTP请求回来，产生流式的数据，DOM的构建、CSS计算、渲染、绘制，都是尽量的流式处理前一步的产出，不须要等待上一步彻底接受才开始处理，因此咱们在浏览网页的时候，才会逐步出现页面。

浏览器接受url开启一个网络请求线程
浏览器发出一个完整的http请求
服务器接收请求到后台接收请求
使用http请求请求页面
把请求回来的html代码解析成DOM树
CSS的可视化格式模型解析
根据CSS属性对元素进行渲染，获得内存中的位图
对位图的合成
绘制页面

浏览器接受url开启网络请求线程

第一点主要涉及的是浏览器的进程、线程模型以及JS的运行机制：github

多进程的浏览器

大多数浏览器是多进程的，有一个主控进程，以及每个tab页面都会新开一个进程（某些状况下多个tab会合并进程）进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等等。面试

Browser进程：浏览器的主进程（负责协调、主控），只有一个
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才建立
GPU进程：最多一个，用于3D绘制
浏览器渲染进程（内核）：默认每一个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）

多线程的浏览器内核

每个tab页面能够看做是浏览器内核进程，而后这个进程是多线程的，它有几大类子线程：json

GUI线程
JS引擎线程
事件触发线程
定时器线程
网络请求线程

开启网络线程发出一个完整的http请求

该部分主要包括：dns查询、tcp/ip请求构建、五层因特网等内容segmentfault

DNS查询

若是输入的是域名，须要进行dns解析成IP，大体流程：浏览器

若是浏览器有缓存，直接使用浏览器缓存，不然使用本机缓存，再没有的话就是用host
若是本地没有，就向dns域名服务器查询（固然，中间可能还会通过路由，也有缓存等），查询到对应的IP。

tcp/ip请求

这里的tcp/ip请求须要了解3次握手规则创建链接以及断开链接时的四次挥手,能够参考以前的博客：blog.csdn.net/bangbanggan…缓存

五层因特网协议

其实这个概念挺难记全的，记不全不要紧，可是要有一个总体概念。其实就是一个概念：从客户端发出http请求到服务器接收，中间会通过一系列的流程。简括就是：从应用层的发送http请求，到传输层经过三次握手创建tcp/ip链接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。固然，服务端的接收就是反过来的步骤。五层因特尔协议栈其实就是： 1.应用层(dns,http) 2.传输层(tcp,udp) 创建tcp链接（三次握手） 3.网络层(IP,ARP) IP寻址 4.数据链路层(PPP) 5.物理层 OSI七层框架：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。表示层：主要处理两个通讯系统中交换信息的表示方式，包括数据格式交换，数据加密与解密，数据压缩与终端类型转换等会话层：它具体管理不一样用户和进程之间的对话，如控制登录和注销过程服务器

网络通信HTTP协议

HTTP协议是基于TCP协议出现的，在TCP的基础上规定了Request-Response的模型，决定了通信必须由浏览器端发起的，首先来了解下HTTP协议的格式：

HTTP协议格式

HTTP协议大体能够分红如下部分：其中path是请求路径、version是固定的字符串，依次介绍下面的每一个部分：

HTTP Method 请求方法

在requestline里面的方法部分，表示HTTP的操做类型，常见的几种请求方法以下：

GET：浏览器经过地址访问页面均属于get请求
POST：常见的表单提交
HEAD ：跟get相似，区别在于只返回请求头
PUT：表示添加资源
DELETE：表示删除资源
CONNECT：多用于HTTPS和WebSocket
OPTIONS
TRACE

HTTP Status code状态码

常见的状态码有如下几种：

1xx：临时回应
2xx：请求成功，如200
3xx：请求目标有变化，如301和302表示临时和永久重定向，304表示客户端没有更新内容
4xx;请求错误，如403无权限，404访问的资源不存在
5xx：服务端错误，如500服务端错误，503服务端暂时错误等

在前端开发中，最熟悉的系列无非是你们都喜欢的200请求成功的标志，在面试中，问得较多的是304缓存问题和30一、302重定向的问题。

HTTP HEAD（HTTP头）

HTTP头能够看作是一个键值对，在HTTP标准中，Request Header以下图：

Response Header以下图：

在实际的开发中，完整的列表能够参考rfc2616标准。

HTTP Request Body

HTTP请求的body主要用于表单的提交，常见的body格式：

application/json
application/x-www-form-urlencoded:使用form标签提交的html请求，默认产生
multipart/form-data:当有文件上传时，使用的格式

HTTPS

HTTPS在HTTP的基础上增长了两个做用，一是肯定请求的目标服务端身份，二是保证传输的数据不会被篡改或者窃听，该协议使用加密通道来传输HTTP内容，因此首先须要与服务端简历TLS加密通道。能够在此处查看详情：tools.ietf.org/html/rfc281…

HTTP2

HTTP2是HTTP1.1的升级版，有两大改进：一是支持服务端推送，二是支持TCP连接复用：则使用同一个TCP连接来传输多个HTTP请求。详情见:tools.ietf.org/html/rfc754…

构建DOM树

当浏览器使用HTTP向服务端请求页面后，那么如何去解析请求回来的HTML代码、构建DOM树呢？

字符流如何解析成词

首先浏览器读取获取的HTML，根据指定的文件编码方式如UTF-8转换为字符流，再将字符串转换为词Token。那什么是词？词是编译原理中的最小单元，如标签开始、属性、标签结束、注释、CDATA节点。Token会标识出当前Token的种类。举个列子： <p class="a" >hello</p>

这里就能够拆分红<p（p标签的开始）、class="a"（属性）、>（p标签的结束）、hello（文本）、</p>（结束标签）

构建DOM树

接下来就是将词变成DOM树。在构建DOM树时，是一边生成Token一边消耗Token来生成节点的。

<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>
复制代码

构建的DOM树：

构建CSSOM

在构建完DOM树，当前的对象只包含节点和属性，没有任何样式信息，那么浏览器是如何给DOM树添加CSS属性呢？咱们知道浏览器是流式的处理整个过程，咱们拿到DOM树构造好的元素，依次去检查他匹配的规则，再根据规则的优先级，作覆盖和调整。

构建渲染树

当CSSOM树和DOM树都获得以后，将两个树进行合并就获得了渲染树：

布局与绘制

当浏览器生成渲染树之后，就会根据渲染树来进行布局。在这个过程当中，每个元素都要要弄清楚各个节点在页面中的确切位置和大小，把对应的盒变为相应的位图。一个元素可能对应多个盒（如内联元素，可能被分红多行）每个盒都对应着一个位图。合成把部分位图合成变成合成层。最终的绘制过程就是把位图合成层绘制到屏幕上。这里提一个常见的问题，重绘和回流？具体的相关知识参考：segmentfault.com/a/119000001…

总结

浏览器的工做流程大体就是：

构建DOM树-构建CSSOM-构建渲染树-布局-绘制