浏览器输入url之后按回车(相对较全的知识详解)

**
大家在面试中经常会遇到面试官问浏览器输入url之后按回车发生了什么,这里我给大家整理了一份比较全的知识,希望大家喜欢

众所周知当我们想搜索一个网站的时候会往浏览器的搜索输入框中输入url进行搜索,但是在你输入url点回车之后浏览器中发生了什么,干了什么呢?**

  1. 首先浏览器会先判断你输入的url是否合法,根据你输入的url判断是把你输入的东西当成url处理还是当成关键字搜索,然后根据你输入的内容自动完成字符编码

  2. 在判断完url是否合法之后,会判断你使用的协议是http还是https。(其中关联的知识点有http协议/HTTPS原理以及HTTPS的安全相关知识

  3. 当协议确认后浏览器则会判断该解析后的url是否有命中各种缓存(浏览器缓存、系统缓存、路由器缓存等),如果命中缓存就会拿到缓存的数据,如果没有命中缓存则进行下一步请求服务器(注:如果是协商缓存的话也会请求服务器)

  4. 在没有命中缓存之后,浏览器会去请求服务器,而在请求服务器的时候,因为我们基本输入的url都是一个类似(www.baidu.com)这样的一个url,这个时候其实服务器是不能识别这样一串的,他能识别的是127.0.0.1这样的一个东西,也就是我们所说的IP地址。所以我们要先向DNS服务器发送请求,查到相对应的url对应的IP地址

  5. 我们在拿到IP地址后,还需要知道对方的端口而在我们拿到服务器的IP地址后我们怎么知道对方的MAC地址呢?通常在一个局域网内是很少的,所以我们一般会通过多个机器的中转才能链接到对方,这个时候就需要我们的ARP协议了,这个协议可以通过下一中转站的MAC地址得到下下个传输的中转站的MAC

  6. 而当我们那到了服务器对应的MAC地址后,我们则会向服务器发送TCP连接请求。这个就涉及到大家知道的三次握手了。

  7. 当握手成功,则向服务器发送HTTP请求,比如我们输入的url是www.baidu.com,则我们会想百度的服务器发送一个www.baidu.com的页面的一个HTTP请求,服务器接收到我们的请求后就会返回数据给浏览器

  8. 浏览器接收到请求后,则会判断该请求是否需要缓存,然后浏览器开始解码,而浏览器拿到HTML代码之后会干什么呢?首先会在内存中开辟一块栈内存,用来给代码的执行提供环境,同时会分配出一个主线程去一行一行的执行代码

  9. 而我们的页面一般都会有一些css文件的引入和图片等带src或link的css文件,当浏览器没遇到一个就会开辟一个全新的子线程去加载资源文件,(这个时候就会有CDN等知识)同时把这些任务放进任务队列(QUEUE TASK

  10. 当主线程自上而下的把代码执行完后会生成一个DOM树,当任务队列中的css文件处理完后,会结合所有的css生成一个CSSOM树,这个CSSOM会和DOM树合并出一个Render Tree(渲染树),用来渲染页面

  11. 之后我们会用Render Tree来计算这些元素在设备视口内的确切位置和大小,也就是回流

  12. 然后根据Render Tree和回流得到的几何信息得到节点的绝对像素,以及拿到节点的其他属性,这个就是重绘

  13. 然后将这些像素发送给GPU显示,一般页面渲染的速度是我们用户设置中的如60赫兹等也就是一秒60次(注:如果在事件循环中有js未执行完,改到了页面的DOM会触发回流和重绘)

到这里整个页面就完成了,上面主要涉及到的知识点有:

  • DNS, HTTP, HTTPS, TCP/IP, ARP等网络相关的知识

  • 浏览器渲染页面机制(DOM Tree, CSSOM Tree, Render Tree, QUEUE TASK, Event Loop, Layout, Painting, Display)

对于上面可做的优化:

  • HTTP缓存DNS缓存CDN

  • 减少HTTPq请求的次数和大小,这样QUEUE TASK处理会快,我们页面渲染的就快,主要:资源合并压缩(雪碧图,GZIP,合并CSS等文件)、图片懒加载(原理:减少线程数)、音视频走流文件(m3u8)

  • 减少操作DOM(原理:减少回流重绘):1.采用vue,react等虚拟DOM、2.分离读写、3.样式集中改变、4.缓存布局信息、5、元素批量修改(文档碎片、模版字符)、6.动画效果应用到position为absolute/fixed元素上、7.css3硬件加速、8.减少使用table/css的javascript表达式

大家喜欢的话可以点赞收藏,之后我会继续发一些和上面的知识点以及一些平常大家容易忽视的知识点的文章

我的下一篇文章:
HTTPS原理以及HTTPS的安全相关知识

这篇文章能帮助大家更好的理解HTTPS

大家有什么知识是想学的也可以评论,我会给大家出一些文章来讲这些知识,因为现在比较流行大前端,所以很多的知识都会去追求原理,而不仅仅是之前的会写会做就性,除了这个浏览器中输入url之后浏览器干了什么里面写到的内容,我还会插一些js的基础知识,一般会讲一些大家平时不太注意到的但是有时会坑到大家的知识,以及会写一些VUE相关的源码理解和思路,也欢迎大家给我建议。

以上的文章如有写的不好的地方也感谢大家指出来,我们共同进步,知识就是用来共享的,在写完下篇HTTPS原理以及HTTPS的安全相关知识之后我会写一个HTTP协议的文章,预计会有三到四篇来讲HTTP协议,然后会写TCP/IP协议,在把上面的这些写完之后我会总和上面的网络协议给大家写一篇计算机网络相关的知识的总览,帮助大家学习计算机网络知识。

在整个浏览器中输入url之后浏览器干了什么系列知识讲完之后我会结合上面的知识给大家写一篇前端优化的知识,会主要讲上面写到的知识如何优化

发布了3 篇原创文章 · 获赞 4 · 访问量 2209

猜你喜欢

转载自blog.csdn.net/MierCurry/article/details/104532604