浏览器输入URL到页面呈现详细过程（前端面试必问）

知识点：
1、寻找ip
2、构造http请求
3、http响应
4、构建DOM树
5、构建CSSOM树
6、构建渲染树
7、layout回流
8、painting重绘
9、页面渲染
10、面试常问相关知识点

1、寻找ip

在浏览器中输入ip后，浏览器需要先寻找这个url域名的服务器ip。浏览器先会查看缓存中是否有记录，查找缓存的顺序为：
1、先查找浏览器缓存，后查找系统缓存，最后查看路由器缓存。
2、 如果本地缓存中没有则查找系统hosts文件中是否有记录
3、如果还是没有则继续查询DNS服务器，
4、最后得出ip地址

2、构造http请求

浏览器根据刚刚查找到得ip以及对应的端口号，构造一个http请求，
请求包含了请求方法，请求说明以及请求附带的数据，并 将这个http请求封装在一个tcp包中，

3、http响应

封装好饿tcp包，会依次经过传输层，网络层，数据链路层，物理层，最后到达服务器，服务器对这个请求做出响应，返回相应的数据
浏览器拿到服务器代码后，在内存中开启一个栈内存来给代码执行提供环境，同时分配一个主线程去一行一行解析和执行代码

4、创建DOM树

浏览器在对服务器返回的数据进行解析处理，首先处理的就是html文档，因为html文档是一个树形结构，
浏览器会根据这个html来创建DOM树，从上往下依次创建。（中途遇到js脚本和外部js链接，则先下载和执行完对应的脚本再继续往下创建dom树，这也是需要把js链接放在html代码后面的原因）
在解析DOM的资源时，html的文字，视频，图片，音频会并行下载，
浏览器对每个域的并行下载数量有限制，一般是4—6个

5、创建CSSOM树

CSSOM树跟DOM树的创建方法一样，在DOM树创建完成之后，加载内部样式和外部样式，内联样式来构建CSSOM树，

6、构建渲染树

在DOM树和CSSOM树创建完成之后，把两者合并为渲染树，
（这里有个考点。渲染树的主要作用是排除非视觉节点。比如设置了display：none的属性）

构建完渲染树之后就是进行页面绘制，主要包括回流和重绘

7、layout回流

在第一次绘制页面的时候会进行一次最大规模的回流，根据上面的渲染树计算设备使用时确切的位置，在页面上进行布局，然后渲染页面，（html文字，图片，视频音频等资源），

8、painting重绘

根据渲染树以及回流 得到的几何信息，得到节点的绝对像素

9、页面渲染

在上述步骤都完成后，把像素发送给电脑的GPU（显卡），开始绘制页面

至此，用户就能看见一个页面啦

10、面试常问相关知识点

1、产生回流和重绘的操作和解决办法

产生回流的操作：

1、第一次渲染页面（内容和文字等都发生改变）。
2、浏览器窗口尺寸的改变。
3、页面元素（图片，文字）位置和大小尺寸的改变。
4、新增和删除可见元素。
5、一些style属性发生变化导致元素变化：（如边框，下划线，css伪类）
上面的都比较好理解就是页面元素发生了变化导致回流

产生重绘的操作：

更改元素属性，更改元素的外观（颜色）不更改布局的操作

回流和重绘会导致dom的重新绘制，增加http请求，服务器和浏览器的负担，那么就涉及到了怎么避免这两大哥的产生

如何避免和减少回流和重绘：

1、减少dom和样式的修改，不多次修改样式
2、样式集中，尽量使用外部样式表和外部js，读写分离，这样有利于服务器和浏览器缓存
3、能使用css的就不用js操作样式：（每次js操作都会导致重绘或者回流）
4、页面中多次需要重排的元素，position使用absolute或fixed
5.尽量不使用表格布局（无定宽高的表格宽高由最后一行决定，绘制到最后一行不合理的时候会反复进行计算回流）

2、js延迟加载的三种方式

js延迟加载就是等页面加载完成之后在加载js文件

我查资料的时候查到js延迟加载有6种方式，这里我主要写前三种，有兴趣的同学可自行了解
1、defer属性
2、async属性
3、动态创建DOM样式
4.使用jquery的getscript方法
5.使用setTimeout定时器延迟方法
6.让js在html代码后加载

1、defer属性

defer是script的属性。只能用于外部脚本
写法：
<script src='../../1.js' defer="defer"> </script>

2、async属性

也是script属性，只适用于外部脚本
<script src='../../1.js' async> </script>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序

3、动态创建dom方法

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else 
      window.onload =downloadJSAtOnload;  
</script>  

3、cookie 和session localstorage 和sessionstorage的区别

共同点：
这几个都是用来缓存浏览器或者服务器资源，方便客户端在下一次请求时直接加载资源

cookie和session的区别：

cookie和session都是用来存储用户信息，cookie存放于客户端，session存放于服务器
cookie存放于客户端的信息不安全，存在被盗取的隐患，敏感信息一般用session存放在服务器中
cookies一般在请求时会在http首部发送给服务器，限制大小，一般为4k，session可以存放在文件，数据库，内存中

cookie，localstorage 和sessiontorage的区别

1、生命周期
cookie可设置缓存失效时间，默认为浏览器关闭缓存失效
localstorage除非被手动清除，否则永久保存
sessionstorage仅在当前网页有效，网页或者浏览器关闭后就无效

2、存放数据
cookie存放4k左右数据，比较小
localstorage和sessiontorage可以存放5m左右的信息，比较大

3.http请求
cookie每次都在http请求头中，所以他只能存放4k数据，因为需要频繁传输
localstorage和sessiontorage存放在浏览器中

4、易用性
cookie需要自己封装，原生的cookie不友好
其他两个可采用原生的接口，也可以在此封装

目前总结的就这些，后面遇到的会持续在文字后面总结，欢迎各位大佬关注收藏，后期持续更新此文
文章是自己根据资料自己理解的，又写的不完善的地方希望大佬你直到一下，不胜感激！！！