内容简介：作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入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 小技巧
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
HTML 5实战
陶国荣 / 机械工业出版社 / 2011-11 / 59.00元
陶国荣编著的《HTML5实战》是一本系统而全面的HTML 5教程，根据HTML 5标准的最新草案，系统地对HTML 5的所有重要知识点进行了全面的讲解。在写作方式上，本书以一种开创性的方式使理论与实践达到极好的平衡，不仅对理论知识进行了清晰而透彻的阐述，而且根据读者理解这些知识的需要，精心设计了106个完整（每个案例分为功能描述、实现代码、效果展示和代码分析4个部分）的实战案例，旨在帮助读者通过实......一起来看看 《HTML 5实战》 这本书的介绍吧!
