阅读 70

浏览器输入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不友好
其他两个可采用原生的接口,也可以在此封装

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

文章分类
前端
文章标签