一道面试题:从用户在浏览器输入网址,看到整个页面,中间发生了哪些事情?
-
HTTP请求阶段
-
HTTP的响应阶段
-
浏览器渲染阶段(就是拿到数据,浏览器如何将内容渲染出来?)
客户端(浏览器:为多线程的程序)
Request请求阶段:DNS解析(获取服务器的ip地址), TCP协议的三次握手建立连接,四次挥手释放连接, HTTPS和HTTP区别, HTTP1 和 HTTP2版本区别
拿到代码,浏览器在内存条中开辟栈内存,为拿到的代码提供执行环境,同时分配一个主线程,去一行行解析代码。进栈执行,出栈退出。
TASK_QUEUE任务队列:
浏览器遇到资源加载,网络请求,分配新的线程去完成加载资源
浏览器开辟新的线程,去加载资源文件 <link href="http://www.xxx.com/test.js"> <script> <img>
生成DOM Tree
生成CSS OM
EventLoop事件循环: 主线程执行完当前任务后,在到主任务队列中执行下一个,这样循环的执行。 微任务 宏任务?????
DOM Tree 和 CSSOM生成 Render Tree
回流:根据Render Tree 和 当前的可视窗口大小(比如说你的电脑的屏幕显示区域的大小),专业用语叫做设备视口(viewpor),来计算元素的确确切位置和大小,这个计算的阶段叫做回流。
重绘:根据回流得到的位置和Render Tree得到的集合信息,得到节点的绝对像素.??
展示: 然后通知GPU绘制(paint)
服务器端(Web服务器)
Response响应阶段:HTTP状态码, 304缓存(性能优化), HTTP报文
补充知识点:
-
线程 Process: 正在运行的程序
-
进程 Thread:有些进程不止同时干一件事情,要同时干多件事情,比如同时进行逻辑运算和读写磁盘,就需要同时运行多个“子任务”,我们把进程中的子任务称作“线程” 。在进程中实际干活的
多线程同时执行,在微观上是操作系统在多个线程中来回切换。
-
栈内存 Stack
-
堆内存 Heap
性能优化:
减少http请求次数和文件大小(资源合并压缩:js,css,使用雪碧图)
*图片懒加载
音视频走流文件