Web运行环境总结

1. 页面加载过程

1.1 加载一个资源的过程

在浏览器地址栏输入URL

浏览器查看缓存(强缓存)

浏览器解析URL获取协议，主机，端口，path

浏览器组装一个HTTP（GET）请求报文

浏览器根据DNS服务器得要域名的IP地址

打开一个socket与目标IP地址，端口建立TCP链接

向这个IP的机器发送http/https请求

服务器收到处理并返回http请求

判断协商缓存

服务器将响应报文通过TCP连接发送回浏览器

关闭TCP连接

浏览器检查响应状态吗做出不同处理

如果资源可缓存，进行缓存

浏览器得到返回的内容

1.2 浏览器渲染页面的过程

根据HTML结构生成DOM Tree

根据CSS生成CSSOM

将DOM和CSSOM整合成RenderTree（渲染树，比DOM树多了样式）

根据RenderTree开始渲染和展示

HTML解析器遇到没有async和defer的script时，会执行并阻塞渲染 （js可能会改变dom结构）

浏览器在Document对象上触发DOMContentLoaded事件

显示页面

图片加载完毕

调用onload

1.3 为什么把css放在head中

在html渲染之前渲染css

如果css放在html元素后面，会先按没有css的情况渲染html，然后加载到css后再重新渲染html元素，这样会损耗性能。

1.4 为什么要把js放在body的最下面

1.不会阻塞body中元素的渲染，能让页面更快出来

2.script能拿到所有的标签

1.5 图片

图片是异步请求，不会影响dom树的渲染

1.6 load,DOMContentLoaded

        window.addEventListener('load',function(){
   
         //页面资源全部加载完成，包括图片视频
        });

        document