当我们在浏览器地址栏按下键盘的时候，浏览器就会启动一个算法去书签栏和历史记录中按照我们输入的字母进行筛选、展示一个我们可能会访问的URL
当我们选定了URL按下回车时，浏览器就会开始构建请求行，然后检测这个域名是否合法，如果合法就将此任务给网络请求线程
构建好请求行后就会去检测强缓存是否有效（这个步骤不会发送网络请求），如果无效，就会开始调用DNS协议进行域名解析，如果之前访问过这个URL，那么浏览器会把DNS解析后的IP地址保存下来，下次访问就直接命中（大概可以节约50~200ms），如果没有就需要去网络运营商或者DNS服务器上寻找
拿到DNS解析的IP地址后，就会构建HTTP请求，开始TCP三次握手建立稳定链接：客户端向服务器发送一个SYN（同步序列编码），服务端收到后返回一个新的SYN + ACK（在第一个SYN上做计算后生成的回复消息），客户端收到后回复一个ACK，三次握手建立完毕。为什么是三次？两次太少，四次太多
建立好三次握手后，TCP协议为了传输方便，会将HTTP报文切割并编码成一个个数据包，随后转交给网络层
网络层拿到这些数据包后，通过IP地址，配合ARP协议反查出MAC地址，开始传输数据
服务器收到这些数据后，将在TCP传输层协议中被分割的报文还原成完整的，这个时候一般会校验是否有权限、是否设置了缓存以及是否过期等。如果设置了协商缓存，那么会返回304状态码通知浏览器使用协商缓存（这里可以把协商缓存的字段也说下），否则开始响应。响应完毕后，服务器会判断Connection字段是否为keep-alive（在HTTP 1.1中是默认值），不是则断开接下来就是浏览器开始解析请求到的文件，首先调用GUI线程并行解析HTML和CSS文件，对HTML文件使用标记化和建树算法，根据文件中设置的<!DOCTYPE>标准来生成DOM树，对CSS文件进行格式化和标准化生成CSSOM树，最后合并成合成树。注意HTML和CSS文件解析是互不影响的，但是会影响最后的合成树生成的速度，所以CSS文件中不要放@import，它总是在CSS文件解析完毕后再去加载对应的资源
另外GUI线程和JS线程是互斥的，当解析到HTML文件中的script标签时，就会挂起GUI线程，从而阻塞渲染，所以script标签中不要写async，它总是异步加载，然后立即执行，但你可以写defer
拿到合成树后，为了提高渲染效率，因为复杂的图层总是会由GUP单独绘制（GPU加速），不会影响其他的图层，所以开始创建图层树。普通文档流可以算是复杂图层，除此之外absolute、transform、opacity、canvas等元素都能形成复杂图层，所以说动画最好放在absolute等元素上、用transform代替left/top浏览器将这些图层的绘制生成一个个绘制指令，然后交给合成池去进行绘制，生成图块和位图，最后显示出当前的页面
原文链接：网上看到的字节面试题，不自量力写下答案
