内容简介：作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟做了什么？相信很多人脑海里都会出现个大概的轮廓，可是一到细化具体的过程就答不上来。那么，作为前端开发者，应该从哪些方面延伸来回答这个问题呢？对于浏览器来说，当在地址栏输入url地址，浏览器所做的事情就是把一个url变成一个在屏幕上显示的网页,大致的过程是这样的：从HTTP请求回来 ，产生流式的数据，DOM的构建、CSS计算、渲染、绘制，都是尽可能的流式处理前一步
作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟做了什么？相信很多人脑海里都会出现个大概的轮廓，可是一到细化具体的过程就答不上来。那么，作为前端开发者，应该从哪些方面延伸来回答这个问题呢？
浏览器工作流程
对于浏览器来说，当在地址栏输入url地址，浏览器所做的事情就是把一个url变成一个在屏幕上显示的网页,大致的过程是这样的：
从HTTP请求回来 ，产生流式的数据，DOM的构建、CSS计算、渲染、绘制，都是尽可能的流式处理前一步的产出，不需要等待上一步完全接受才开始处理，所以我们在浏览网页的时候，才会逐步出现页面。
- 浏览器接受url开启一个网络请求线程
- 浏览器发出一个完整的http请求
- 服务器接收请求到后台接收请求
- 使用http请求请求页面
- 把请求回来的html代码解析成DOM树
- CSS的可视化格式模型解析
- 根据CSS属性对元素进行渲染，得到内存中的位图
- 对位图的合成
- 绘制页面
浏览器接受url开启网络请求线程
第一点主要涉及的是浏览器的进程、线程模型以及JS的运行机制：
多进程的浏览器
大多数浏览器是多进程的，有一个主控进程，以及每一个tab页面都会新开一个进程（某些情况下多个tab会合并进程） 进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等等。
- Browser进程：浏览器的主进程（负责协调、主控），只有一个
- 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
- GPU进程：最多一个，用于3D绘制
- 浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）
多线程的浏览器内核
每一个tab页面可以看作是浏览器内核进程，然后这个进程是多线程的，它有几大类子线程：
- GUI线程
- JS引擎线程
- 事件触发线程
- 定时器线程
- 网络请求线程
开启网络线程发出一个完整的http请求
该部分主要包括：dns查询、tcp/ip请求构建、五层因特网等内容
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缓存问题和301、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树都得到之后，将两个树进行合并就得到了渲染树：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 前端速来！2017年6月前端开发者干货大合集
- 前端开发者必备的Nginx知识
- 给前端开发者的5点建议
- 前端开发者必备的 Nginx 知识
- 讲真！开发者要了解的微前端架构
- 前端开发者都应知道的 jQuery 小技巧
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Open Data Structures
Pat Morin / AU Press / 2013-6 / USD 29.66
Offered as an introduction to the field of data structures and algorithms, Open Data Structures covers the implementation and analysis of data structures for sequences (lists), queues, priority queues......一起来看看 《Open Data Structures》 这本书的介绍吧!
