输入url按回车后发生的一系列不可描述的事情

　　浏览器输入url后发生的过程

　　1、输入一个url地址

　　url遵守一定的语法规则：scheme://host.domain:port/path/filename

　　scheme：定义因特网服务的类型(协议)，常见的有http，https，file，ftp等

　　host：定义域主机(http一般默认的是www)

　　demain：定义因特网域名，如baidu.com

　　post：端口号(http一般是80，https一般是443)

　　2、浏览器会先查看浏览器缓存--系统缓存--路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步

　　3、浏览器查找域名的ip地址(DNS,域名和ip的映射分布式数据库)

　　大致可以分为几部：

　　浏览器缓存

　　浏览器会缓存DNS记录一段时间，且不同的浏览器的缓存时间不同

　　系统缓存

　　如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用(windows里是gethostbyname)。这样便可获得系统缓存(host)中的记录。

　　路由器缓存

　　查询请求发向路由器，它一般会有自己的DNS缓存。

　　ISP DNS 缓存

　　ISP是互联网服务提供商(Internet Service Provider)的简称，ISP有专门的DNS服务器应对DNS查询请求。

　　根服务器(递归搜索)

　　ISP的DNS服务器还找不到的话，它就会向根服务器发出请求，进行递归查询(DNS服务器先问根域名服务器其的IP地址，然后再问.com域名服务器，依次类推)

　　CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。

　　针对DNS的优化大致方向是减少DNS解析的时间，即尽量通过浏览器对dns的缓存机制来减少对ip的查询，即减少需要解析的域名的个数

　　4、浏览器给web服务器发送一个HTTP(HTTPS)请求

　　TCP三次握手

　　浏览器获得 IP 地址后，就会对目标服务器发起建立 TCP 连接的请求，建立连接主要有三个步骤，一般称为客户端与服务器端的三次握手：

　　第一次握手： 建立连接时，客户端发送syn包(syn=j)到服务器，并进入SYN_SENT状态，等待服务器确认;

　　第二次握手： 服务器收到syn包，必须确认客户的SYN(ack=j+1)，同时自己也发送一个SYN包(syn=k)，即SYN+ACK包，此时服务器进入SYN_RECV状态;

　　第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED(TCP连接成功)状态，完成三次握手。

　　TCP四次挥手

　　客户端或服务器均可主动发起挥手动作

　　第一次挥手: 主动关闭方，将FIN置为1，Seq设置为Z为上一次对方传送过来的Ack值，Ack设置为X为Seq值+1。设置好以上值后，将数据发送至被动关闭方(这里标记为：B)。然后A进入FIN_WAIT_1状态。

　　第二次挥手：B收到了A发送的FIN报文段，向A回复，Ack设置为第一次挥手中的Seq值+1，Seq设置为Y第一次挥手中的Ack值。然后B进入CLOSE_WAIT状态，A收到B的回复后，进入FIN_WAIT_2状态。

　　第三次挥手：B再次向A发送报文，将FIN置为1，Ack设置为X，Seq设置为Y。然后B进入LAST_ACK状态，A收到B的报文后，进入TIME_WAIT状态。

　　第四次挥手：A收到B发送的FIN报文段，Ack设置为Y，Seq设置为X。然后A进入TIME_WAIT状态，B在收到报文后进入CLOSED状态，A在发送完报文等待了2MSL时间后进入CLOSED状态。

　　HTTPS(http+ssl)的非对称加密和对称加密

　　非对称加密

　　握手过程中，服务器会发出一张证书(带着公钥)，客户端用公钥加密了一段较短的数据S，并返回给服务器。服务器用私钥解开，拿到S。此时，握手步骤完成，S成为了一个被安全传输到对方手中的对称加密密钥。此后，服务器与请求响应，只需要用S作为密钥进行一次对称的加密就好。

　　证书包含公钥，所以拿到证书意味着就拿到了对方的公钥

　　对称加密

　　约定加密密钥，请求的数据用密钥加密，服务器用密钥解密

　　一次完整的https请求：

　　1、客户端向服务器发送https请求(443端口)

　　2、tcp三次握手建立tcp连接

　　2、服务器端返回一个安全证书(公钥)

　　3、客户端收到，并进行验证，如果没有问题，就用安全证书(公钥)加密一个随机值。并发送给服务端

　　4、服务端用私钥解密，拿到该随机值

　　5、后面的通信就可以通过随机值用对称加密的方式进行了

　　http默认自带cookie

　　在http请求中，cookie是默认自带的，可以通过设置cookie的HttpOnly和Secure属性来进行控制，详情请移步

　　请求头自带的与tcp相关的属性

　　Connection

　　Connection 头(header) 决定当前的事务完成后，是否会关闭网络连接。如果该值是“keep-alive”，网络连接就是持久的，不会关闭，使得对同一个服务器的请求可以继续在该连接上完成。

　　在http1.0的时候Connection的值默认为close

　　在http1.1的时候Connection的值默认为Keep-Alive

　　浏览器会自发做的事

　　浏览器能安全的添加斜杠,如www.baidu.com ->www.baidu.com/ ,而www.baidu.com/222 ->www.baidu.com/222不会，因为浏览器…

　　优化 ：

　　通过部署cdn来减缓数据返回的事件

　　优化握手次数

　　在头部设置Accept-Encoding类型，通过返回gzip来减少数据体积

　　通过设置http缓存来优化性能，请移步

　　5、永久重定向响应

　　为了优化搜索引擎，把多个域名进行归类，如把baidu.com,www.baidu.com,www.baidu.com归类

　　返回301，通知浏览器跳转,有利于SEO

　　6、浏览器跟踪重定向地址，请求头不变

　　7、服务器“处理”请求

　　8、服务器发回一个HTML响应

　　9、浏览器开始显示HTML

　　处理HTML标记，构建DOM树。

　　处理CSS标记，构建CSSOM树。

　　将DOM树和CSSOM树融合成渲染树(会忽略不需要渲染的dom)。

　　根据渲染树来布局，计算每个节点的几何信息。

　　在屏幕上绘制各个节点。

　　中间遇到各种资源时，会进行资源的下载

　　可能存在问题：

　　资源下载

　　css下载时会阻塞渲染(带有media属性除外，不会阻塞浏览器解析)。

　　遇到 script 标签时，DOM构建停止，此时控制权移交至js，直到脚本(下载)执行完毕，此时浏览器有优化一般会下载其他资源，但是不会解析。如果js中有对CSSOM的操作，还会先确保CSSOM已经被下载并构建。

　　图片资源下载不会产生阻塞。

　　重绘重排导致重新进行渲染树的生成

　　重排(回流)

　　会重新计算布局，通常由元素的结构、增删、位置、尺寸变化引起，如：img下载成功后，替换填充页面img元素，引起尺寸变化;也会由js的属性值读取引起，如读取offset、scroll、cilent、getComputedStyle等信息。

　　重绘

　　简单外观的改变会引起重绘，如颜色变化等。

　　重排一定重绘。

　　优化：

　　dom

　　简化dom结构，减少DOM树和渲染树构建成本，减少页面元素个数

　　如使用列表表格数据分页，简单表格不要使用复杂第三方组件等方式。

　　js

　　将js脚本标签放在页面body底部，减少对其他过程的阻塞。

　　延迟执行：对不修改页面的外链script使用defer属性，使脚本并行下载不阻塞，下载后不立刻执行，而在所有元素解析之后执行。

　　这里简单的介绍下defer和async的区别：

　　相同点：

　　加载文件时不阻塞页面渲染

　　对于inline的script(内联脚本)无效

　　使用这两个属性的脚本中不能调用document.write方法

　　有脚本的onload的事件回调

　　不同点：

　　html的版本html4.0中定义了defer;html5.0中定义了async

　　每一个async属性的脚本都在它下载结束之后立刻执行，可能会打乱原有的顺序

　　每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行

　　减少和合并不必要的dom相关操作，如使用DocumentFragment、修改classname而不是各项style等，减少对重绘和重排的触发。

　　css

　　将css放入head中，提前加载，并防止html渲染后重新结合css引起页面闪烁。

　　减少css层级和css选择器复杂度，提高解析速度，虽然浏览器有优化。

　　使用更高性能的css样式，如flex代替float。

　　开启复合层，如使用3d变换、opacity等，使该元素及其子元素不导致外部的重排，但是也有坑。

　　合理使用脱离文档流的样式，减少对外部重排的影响，如absolute。

　　文件数量

　　减少首次下载的文件数量大小.

　　使用图片懒加载，js的按需加载等方式，使用storage存储进行js、css文件的缓存(PWA)。

　　拆分页面资源，首屏数据优先加载等。

　　动态路由、懒加载

　　10、浏览器发送获取嵌入在HTML中的静态资源

　　11、浏览器发送异步(AJAX)请求

　　简单的介绍下fetch相对于ajax的优缺点

　　优点

　　内置promise，链式调用，也可以使用async await来解决回调地狱

　　res提供了多种转换格式的方法，json(),blob()

　　缺点

　　默认不带cookie，带cookie需要指定credentials = include

　　需要底层支持，或者使用第三方兼容包

　　不能做超时处理，没有abort方法

　　遇到常见的错误码不会报错，需要手动去封装

作者：传智播客前端与移动开发培训学院

首发： http://web.itcast.cn