这是本系列文章的第二篇，继续总结~~这是一个源自于的知识体系一个问题，这个问题是从输入URL到页面加载的过程。先梳理一下这个流程。第一步从浏览器接收到url到开启网络请求线程（浏览器的进程/线程模型，js运行机制）。浏览器的进程浏览器是多进程的。有一个主进程，每个标签页都会开启一个新进程（在某些情况下（比如空白标签页），多个标签页会合并为一个进程）。进程可能包括主进程、插件进程、GPU、标签页等，brower进程主进程负责协调、主控等第三方插件进程。每种插件都会有一个进程，只有在使用插件时才会创建进程。只有一个GPU进程，用于3D绘图。浏览器的默认进程（内核）。每个标签页对应一个进程，负责页面渲染，脚本执行，相互独立，有时会优化（多个空白标签页会合并为一个）browse浏览器多线程内核的每个标签页都可以看作是浏览器的内核进程。这个过程是多线程的。它主要有以下几个线程：GUI渲染线程JavaScript线程（这就是为什么JS一直说是单线程的原因。）事件触发线程定时器触发线程网络请求线程需要为每个网络请求开启一个单独的线程，如果url解析为http请求，会开启一个新的线程处理资源下载。（http2.0可以实现tcp连接复用）js运行机制参考我的另一篇文章js执行机制事件循环第二步开启网络线程发送一个完整的http请求（dns查询，tcp/IP请求，五层互联网协议栈等知识）DNS查询IP如果输入的是域名，需要DNS解析成IP，过程如下：如果浏览器有缓存，直接使用浏览器的缓存，如果没有，则使用localcacheifthelocal如果没有缓存，则使用host，如果没有了，查询DNS服务器（如果中间路由有缓存，可以使用路由缓存等）ipdns查询是非常耗时。如果解析的域名过多，会导致首屏加载变慢。您可以使用dns-prefetch来优化tcp/IP请求。http的本质就是tcp/ip请求的部分需要理解三次握手和断开连接时的四次挥手。三向握手tcp将HTTP长报文分成短报文，通过三向握手建立连接传输数据。客户端：你好，我是客户端，你是服务器吗服务器：你好，我是服务器，你是客户端吗客户端：是的，我是客户端连接成功后，就可以开始传输数据了~~四秒wave主动方：嗨，我要断开，我只能被动接收数据被动方：嗨，我收到了被动方：嗨，我也想断开主动方：好，我是被动的连接接收数据也是关闭。之后，连接断开，无法通信。tcp/ip的并发限制浏览器对同一域名下的tcp并发连接有限制（2-10个不等），在http2.0之前，一个资源下载需要一个tcp/ip请求。get/post的区别虽然get和post在本质上都是tcp/ip，但是除了http层面，在tcp/ip层面也有区别。get只会生成一个数据包（headers和data一起发送），post请求会发送两个数据包（先发送header，收到100后发送数据）。五层互联网协议栈从客户端发送一个http请求到服务端接收，中间会经过一系列的过程。简单总结就是：从应用层发送http请求，在传输层通过三次握手建立tcp/ip连接，然后到网络层进行ip寻址，再到数据链路层进行封装和成帧，最后到物理层使用物理介质进行传输。还有一个完整的OSI七层框架，会话层和表示层更多。会话层：管理不同用户和进程之间的对话，比如控制登录和注销。表示层：处理两个通信系统交换信息的表示，包括数据格式交换、数据加解密、数据压缩等。第三步是从服务器接收请求到相应后台接收请求（负载均衡，安全拦截和后台内部处理）。对于大型项目，负载均衡有大量的并发访问。这种情况下，一台服务器肯定是不够的，所以一般会有几台服务器组成一个集群，配合反向代理来实现负载均衡。用户发起的请求指向调度服务器，调度服务器根据实际的调度算法将不同的请求分配到集群中对应的服务器执行，然后调度器等待实际服务器的http响应，然后返回给浏览器进行安全拦截。添加拦截器、安全拦截验证、跨域验证等。第四步是前台和后台的交互（http头、响应码、消息结构、cookie等，gzip压缩等）。httpheader包括三个通用部分HeaderRequestUrl：请求的服务器地址RequestMethod：请求方法（GET、POST、HEAD、OPTIONS、PUT、DELETE、CONNECT、TRACE）（http1.0定义了三种请求方法，GET、POST,HEAD,http1.1新增5个方法，OPTIONS,PUT,DELETE,CONNECT,TRACE)StatusCode:请求返回的状态码RemoteAddress:请求的远程服务器的地址(会转换成IP)RequestheaderAccept：接收类型，表示浏览器支持的MIME类型（（MultipurposeInternetMailExtensions）是描述邮件内容类型的Internet标准），对应服务器返回的content-typeAccept-Encoding：压缩格式浏览器支持的，比如gzipContent-Type：浏览器发出的实体内容的类型Cache-Control：指定请求和返回缓存机制，比如no-cacheIf-Modify-Since：对应服务器的Last-Modified,用于匹配which她的文件变了，是否使用缓存，只能精确到1s以内，就是http1.0的Expires：这段时间内使用缓存，http1.0Max-age：表示资源在本地缓存多少秒,并在有效时间内使用缓存If-none-Match：对应服务器的Etag，用于匹配文件内容是否变化Cookie：有cookie，访问同域时，会带上Connection：服务端与客户端的通信连接方式，keep-alive，表示使用长连接（数据传输完成，TCP连接保持不间断（不发送RST包），不挥手四次），客户端的长连接不能无限期保持，会有超时时间，服务器有时会告诉客户端超时时间，如果服务器不告诉客户端超时时间，没关系，服务器可能会主动发起四波断开连接TCP连接，客户端客户端可以知道TCP连接无效；另外TCP还有心跳包检测当前连接是否还活着）Host：被请求的服务器URLOrigin：最初发起请求的地方，只会精确到端口Referer：页面来源，会精确到页面地址，csrf拦截该字段User-Agent：用户客户端的一些信息，比如浏览器信息响应头-Methods:服务器允许请求的方法Access-Control-Allow-Origin:服务器允许的请求的originContent-Typemodified:请求资源的最后修改时间Expires:通知客户端使用缓存内此时Max-age：告知客户端在本地缓存多少秒Etag：请求资源的标识，表示该资源是否发生了变化Linkedcookie，服务端通过cookie传递给客户端ghthisheaderkeep-alive：如果客户端设置了keep-alive，服务端会做出相应的响应，比如timeout=20状态的含义1xx---请求已经收到，继续处理2xx---请求已经已被接受，理解3xx---重定向，需要进一步处理才能完成操作4xx---客户端错误（参数错误、语法错误或请求无法实现）5xx---服务器错误普通状态码200---请求已收到并成功返回给客户端302---重定向304---使用浏览器的缓存400---客户端在终端请求错误，请求参数错误等401---请求没有权限403---禁止访问（例如未登录时禁止访问）404---找不到资源500---内部服务器错误503---服务Cookie不可用。Cookie是一种在浏览器中进行本地存储的方式。它们通常帮助客户端与服务器通信。它们用于验证身份并与服务器上的会话一起使用。简单说一下使用场景：用户登录服务器，收到请求，产生session，用户的信息会产生一个sessionid。服务器将cookie写入登录页面。浏览器有这个cookie，访问同一个域名时会自动带上。这个cookiegzipgzip的压缩效率非常高，高达70%以上。具体可以参考我的另一篇文章前端性能优化：gzip第五步缓存问题（http缓存、缓存头、etag、cache-control等）这部分缓存可以参考我的另一篇文章浏览器缓存浏览器收到http包后解析过程的机制（解析html，词法分析成dom树，解析css生成css规则树，合并成render树，然后布局，绘制和渲染，复合层的合成，GPU绘图，处理外部资源，loaded和domcontentloaded等）复合层，复合层，GPU，硬件加速，请参考这篇文章https://juejin.im/entry/59dc9...css可视化模型（element渲染规则，比如containingblock、controlbox、BFC、IFC等概念）BFC部分可以参考这篇笔记BFCJS引擎解析过程（JS解释阶段、预处理阶段、执行阶段生成上下文、VO、作用域链、回收机制、ETC。）JS执行机制可以参考这篇文章js执行机制总的来说，知识重点有以下几点~~核心知识浏览器模型浏览器进程和线程渲染原理构建dom树，css树，render树，reflow，repaint，复合层和简单层，GPU渲染JS解析过程byte->分词->语法树->解析成机器码JS运行机制变量提升，函数提升，VO，AO，thishttp1.0http1.1的重点知识http2.0，httpshttp2.0的主要新特性多路复用（一个tcp/ip连接可以请求多个资源）headercompression（http头压缩，减少体积）binarysegmentationFrame（在应用层增加了一层binaryframing层和传输层，提高传输性能，实现低延迟和高吞吐量）服务器推送（服务器可以对客户端的请求发送多个响应，并可以主动notifyClient)https建立在http的基础上，在请求前建立ssl连接，保证后续通信加密，无法被窃取。简单说一下SSL/TLS握手过程：浏览器请求建立ssl连接，向服务端发送一个随机数client随机数和client支持的加密方式，比如RSA加密。分组加密算法和哈希算法，服务器随机回复一个随机数，将你的身份信息以证书的形式发送给浏览器（包括网址、非对称加密公钥、证书颁发机构等），浏览器接收服务器颁发证书后，验证证书的有效性（颁发机构是否合法，证书中的网站是否与所在网站相同），如果证书可信，一个小锁图标用户收到证书后会出现在浏览器前面（不管信不信），浏览器会生成一个新的随机数premaster-key，然后用证书中的公钥对premaster-key进行加密并指定的加密方式，通过一定的算法使用clientrandom、serverrandom和premaster-key发送给server可以为HT生成一个对称加密的sessionkeyTP连接传输。使用约定的哈希算法计算出握手消息，并使用生成的会话密钥进行加密，将之前生成的所有信息发送给服务器。服务器收到浏览器的回复并使用它。已知的加解密方式和自己的私钥解密客户端发送的信息，获取premaster-key和浏览器一样的规则生成sessionkey，使用sessionkey解密浏览器发送的握手信息，并验证hash是否与浏览器一致sessionkey用于加密服务器发送的一段握手信息，发送给浏览器解密服务器发送的握手信息的hash。如果与服务器发送的哈希值一致，则握手结束。Web安全相关（xss、csrf）xss跨站脚本攻击csrf跨站请求伪造跨域及处理跨域处理参考本系列上一篇文章~~前端需要掌握的技巧总结-新手到中高级前端(1)
