点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]
前言
年前准备换工作&＃xff0c;总结了一波面试最频繁的面试问题跟大家交流。此文章是关于浏览器的常见问题&＃xff0c;大概面试10家遇到6家提问类似问题&＃xff08;主要是大厂和中厂&＃xff09;。
问题: 从浏览器地址栏输入url到请求返回发生了什么
你一看这种烂掉牙的问题&＃xff0c;小case&＃xff0c;但996面试大佬由此延展的问题已经远远超越了这个问题本身了&＃xff0c;不信你就接着看。
我回答了首先会进行 url 解析&＃xff0c;根据 dns 系统进行 ip 查找。
话音刚落&＃xff0c;此时一位喜欢修福报的公司的大佬打断了我&＃xff0c;说url为啥要解析&＃xff0c;dns查询规则是什么&＃xff1f;我一听就心里想&＃xff0c;不按套路出牌啊&＃xff0c;网上一般都没问这两个问题&＃xff0c;心里再一想&＃xff0c;俗话说&＃xff0c;万事开头难&＃xff0c;扛过这一波&＃xff0c;答出来&＃xff0c;就是阳光明媚&＃xff0c;万物骚动的春天&＃xff01;
先说为什么url要解析&＃xff08;也就是编码)
我回答大概内容是&＃xff1a;因为网络标准规定了URL只能是字母和数字&＃xff0c;还有一些其它特殊符号&＃xff08;-_.~ ! * &＃39; ( ) ; : &＃64; & &＃61; &＃43; $ , / ? # [ ]&＃xff0c;特殊符号是我下来查的资料&＃xff0c;实在背不住这么多&＃xff0c;比较常见的就是不包括百分号和双引号&＃xff09;&＃xff0c;而且如果不转义会出现歧义&＃xff0c;比如http:www.baidu.com?key&＃61;value,假如我的key本身就包括等于&＃61;符号&＃xff0c;比如ke&＃61;y&＃61;value&＃xff0c;就会出现歧义&＃xff0c;你不知道&＃61;到底是连接key和value的符号&＃xff0c;还是说本身key里面就有&＃61;。
大佬接着毒打我说&＃xff0c;那url编码的规则是什么呢&＃xff0c;我说utf-8
大佬接着穷追不舍&＃xff0c;为啥是utf-8呢&＃xff0c;所有浏览器都是这样吗&＃xff1f;中文的话用gb2312编码吗&＃xff0c;还有就是万一浏览器不是你说的这样统一用utf-8&＃xff0c;你怎么保证都是utf-8的编码?
我支支吾吾的说&＃xff0c;我了解的大概是这样&＃xff0c;不太清楚, 应该和html本身的编码格式有关&＃xff0c;然后怎么保证utf-8的编码&＃xff0c;我觉得可以用encodeURIComponent
大佬说encodeURIComponent比encodeURI有什么区别?
区别就是encodeURIComponent编码范围更广&＃xff0c;适合给参数编码&＃xff0c;encodeURI适合给URL本身&＃xff08;locaion.origin&＃xff09;编码,当然项目里一般都是用qs库去处理
然后说说dns解析流程&＃xff0c;并且html如何做dns优化
首先dns这个属于很久以前在计算机网络谢希仁版看到过了&＃xff0c;有一些细节忘了&＃xff0c;但是大致流程是记得的。比如说查询一个网址为&＃xff1a;www.baidu.com
1、器中输入https://www.baidu.com 域名&＃xff0c;操作系统会先查hosts件是否有记录&＃xff0c;有的话就会把相对应映射的IP返回。
2、hosts文件没有就去查本地dns解析器有没有缓存。&＃xff08;这个我没答上来&＃xff09;
3、然后就去找我们计算机上配置的dns服务器上有或者有缓存&＃xff0c;就返回
4、还没有的话就去找根DNS服务器(全球13台&＃xff0c;固定ip地址)&＃xff0c;然后判断.com域名是哪个服务器管理&＃xff0c;如果无法解析&＃xff0c;就查找.baidu.com服务器是否能解析&＃xff0c;直到查到www.baidu.com的IP地址
注:后面查资料才发现dns查询有两种模式&＃xff0c;一种是转发模式&＃xff0c;一种是非转发模式&＃xff0c;我上面说的4是非转发模式。
前端的dns优化&＃xff0c;可以在html页面头部写入dns缓存地址&＃xff0c;比如
终于抗过了第一轮的猛问&＃xff0c;接着我继续说从浏览器地址栏输入url到请求返回发生了什么
查找到IP之后&＃xff0c;就是http协议的三次握手&＃xff08;以及后面会涉及到四次分手&＃xff09;
我刚恢复节奏&＃xff0c;准备侃侃而谈&＃xff0c;修福报的大佬再次打断了我&＃xff0c;说三次握手&＃xff0c;为啥两次不行&＃xff0c;顺便说一下3次握手发生了什么。
没有办法&＃xff0c;继续回答大佬&＃xff0c;我说我先回答三次握手发生的事情吧&＃xff0c;简答来说&＃xff1a;
第一次握手&＃xff1a;主机A发送位码为SYN&＃xff1d;1的TCP包给服务器&＃xff0c;并且随机产生一个作为确认号&＃xff08;这是tcp包的一部分&＃xff09;&＃xff0c;主机B收到SYN码后直到A要求建立连接;
第二次握手&＃xff1a;主机B收到请求后&＃xff0c;向A发送确认号&＃xff08;主机A的seq&＃43;1&＃xff09;&＃xff0c;syn&＃61;1&＃xff0c;seq &＃61; 随机数 的TCP包&＃xff1b;
主机A收到后检查确认号是否正确&＃xff0c;即第一次A发送的确认号是否&＃43;1了&＃xff0c;以及位码ack是否为1&＃xff0c;若正确&＃xff0c;主机A会再发送确认号(主机B的seq&＃43;1)&＃xff0c;ack&＃61;1&＃xff0c;主机B收到后确认seq值与ack&＃61;1则连接建立成功。
接着补上小问题为什么两次握手不行&＃xff0c;因为第二次握手&＃xff0c;主机B还不能确认主机A已经收到确认请求&＃xff0c;也是说B认为建立好连接&＃xff0c;开始发数据了&＃xff0c;结果发出去的包一直A都没收到&＃xff0c;那攻击B就很容易了&＃xff0c;我专门发包不接收&＃xff0c;服务器很容易就挂了。
接着&＃xff0c;大佬说出个加分题&＃xff0c;我看你不是科班出身&＃xff0c;能答多少是多少。问题是,从网卡把数据包传输出去到服务器发生了什么&＃xff0c;提示我OSI参考模型
我一听&＃xff0c;好嘛&＃xff0c;这不是计算机网络的知识吗&＃xff0c;幸亏之前看过书&＃xff0c;但也是好久以前看过了&＃xff0c;只能凭借自己的理解解答了。
我说&＃xff0c;先从局域网把数据发送到公司的交换机&＃xff08;如果交换机没有缓存本地mac地址和IP地址的映射&＃xff0c;此时会通过ARP协议来获得&＃xff09;&＃xff0c;交换机的好处是可以隔离冲突域&＃xff08;因为以太网用的是CSMA/CD协议,这个协议规定网线上同一时刻只能有一台机器发送数据&＃xff09;&＃xff0c;这样就可以不仅仅同一时刻只有一台机器发送网络包了
然后交换机再将数据发送到路由器&＃xff0c;路由器相当于公司网关&＃xff08;我们公司小&＃xff09;&＃xff0c;路由器具有转发和分组数据包的功能&＃xff08;路由器通过选定的路由协议会构造出路由表&＃xff0c;同时不定期的跟相邻路由器交换路由信息&＃xff09;&＃xff0c;然后这算是经过了物理层&＃xff0c;数据链路层&＃xff08;以太网&＃xff09;,开始到网络层进行数据转发了
然后路由器转发IP数据报&＃xff0c;一般公司的IP地址都会经过NAT转换&＃xff0c;让内网的ip也能够访问外网&＃xff0c;我们公司我注意了一下是192.168打头的内网ip地址。通过路由器的分组传输&＃xff0c;所有数据到达服务器。
然后服务器的上层协议传输层协议开始发挥作用&＃xff0c;根据tcp包里的端口号&＃xff0c;让服务器特定的服务来处理到来的数据包&＃xff0c;并且tcp是面向字节流的(tcp有四大特性&＃xff0c;可靠传输、流量控制、拥塞控制、连接管理)&＃xff0c;所以我们node的request对象&＃xff0c;它的监听事件data事件为什么要用字符串一起拼接起来呢&＃xff08;buffer&＃xff09;&＃xff0c;就是因为tcp本身就是字节流&＃xff0c;request对象使用的data&＃xff08;http层面&＃xff09;是tcp传来的数据块。
最后数据由传输层转交给应用层&＃xff0c;也就是http服务&＃xff08;或者https&＃xff09;&＃xff0c;后端经过一系列逻辑处理&＃xff0c;返回给前端数据。
答完这里&＃xff0c;我说大佬我只知道大概的流程&＃xff0c;具体细节我不是很清楚&＃xff0c;但自己后面会补上。。。
大佬让我继续&＃xff0c;我就接着3次握手之后接着说道&＃xff0c;建立完链接&＃xff0c;就该请求html文件了&＃xff0c;如果html文件在缓存里面浏览器直接返回&＃xff0c;如果没有&＃xff0c;就去后台拿
刚说到缓存&＃xff0c;立马就有一种不详的预感&＃xff0c;果不其然大佬先让把缓存解释一下。缓存这种问烂的问题&＃xff0c;本以为能轻松应对&＃xff0c;结果还是被问了个满头包。。。。
我说的大概意思是:
浏览器首次加载资源成功时&＃xff0c;服务器返回200&＃xff0c;此时浏览器不仅将资源下载下来&＃xff0c;而且把response的header(里面的date属性非常重要&＃xff0c;用来计算第二次相同资源时当前时间和date的时间差)一并缓存;
下一次加载资源时&＃xff0c;首先要经过强缓存的处理&＃xff0c;cache-control的优先级最高&＃xff0c;比如cache-control&＃xff1a;no-cache,就直接进入到协商缓存的步骤了&＃xff0c;如果cache-control&＃xff1a;max-age&＃61;xxx,就会先比较当前时间和上一次返回200时的时间差&＃xff0c;如果没有超过max-age&＃xff0c;命中强缓存&＃xff0c;不发请求直接从本地缓存读取该文件&＃xff08;这里需要注意&＃xff0c;如果没有cache-control&＃xff0c;会取expires的值&＃xff0c;来对比是否过期&＃xff09;&＃xff0c;过期的话会进入下一个阶段&＃xff0c;协商缓存
协商缓存阶段&＃xff0c;则向服务器发送header带有If-None-Match和If-Modified-Since的请求&＃xff0c;服务器会比较Etag&＃xff0c;如果相同&＃xff0c;命中协商缓存&＃xff0c;返回304&＃xff1b;如果不一致则有改动&＃xff0c;直接返回新的资源文件带上新的Etag值并返回200;
协商缓存第二个重要的字段是&＃xff0c;If-Modified-Since&＃xff0c;如果客户端发送的If-Modified-Since的值跟服务器端获取的文件最近改动的时间&＃xff0c;一致则命中协商缓存&＃xff0c;返回304&＃xff1b;不一致则返回新的last-modified和文件并返回200;
果不其然&＃xff0c;大佬问了一些缓存不常问的&＃xff0c;首先就是问我知道什么是from disk cache和from memory cache吗&＃xff0c;什么时候会触发&＃xff1f;
1、先查找内存&＃xff0c;如果内存中存在&＃xff0c;从内存中加载&＃xff1b;
2、如果内存中未查找到&＃xff0c;选择硬盘获取&＃xff0c;如果硬盘中有&＃xff0c;从硬盘中加载&＃xff1b;
3、如果硬盘中未查找到&＃xff0c;那就进行网络请求&＃xff1b;
4、加载到的资源缓存到硬盘和内存&＃xff1b;
接着大佬又问知道什么是启发式缓存吗&＃xff0c;在什么条件下触发&＃xff1f;
这个问题给我的感觉就两个字&＃xff0c;懵逼&＃xff01;然后如实回答不知道。&＃xff08;查了下资料大概如下&＃xff09;
启发式缓存:
如果响应中未显示Expires&＃xff0c;Cache-Control&＃xff1a;max-age或Cache-Control&＃xff1a;s-maxage&＃xff0c;并且响应中不包含其他有关缓存的限制&＃xff0c;缓存可以使用启发式方法计算新鲜度寿命。通常会根据响应头中的2个时间字段 Date 减去 Last-Modified 值的 10% 作为缓存时间。
// Date 减去 Last-Modified 值的 10% 作为缓存时间。
// Date&＃xff1a;创建报文的日期时间, Last-Modified 服务器声明文档最后被修改时间response_is_fresh &＃61; max(0,&＃xff08;Date - Last-Modified)) % 10
接着回答&＃xff0c;我说返回html之后&＃xff0c;会解析html,这部分知识我提前准备过&＃xff0c;但是答的不是很详细&＃xff0c;大概意思就是cssom &＃43; domTree &＃61; html,然后布局和绘制
构建DOM树(DOM tree)&＃xff1a;从上到下解析HTML文档生成DOM节点树&＃xff08;DOM tree&＃xff09;&＃xff0c;也叫内容树&＃xff08;content tree&＃xff09;&＃xff1b;
构建CSSOM(CSS Object Model)树&＃xff1a;加载解析样式生成CSSOM树&＃xff1b;
执行Javascript&＃xff1a;加载并执行Javascript代码&＃xff08;包括内联代码或外联Javascript文件&＃xff09;&＃xff1b;
构建渲染树(render tree)&＃xff1a;根据DOM树和CSSOM树,生成渲染树(render tree)&＃xff1b;
渲染树&＃xff1a;按顺序展示在屏幕上的一系列矩形&＃xff0c;这些矩形带有字体&＃xff0c;颜色和尺寸等视觉属性。
布局&＃xff08;layout&＃xff09;&＃xff1a;根据渲染树将节点树的每一个节点布局在屏幕上的正确位置&＃xff1b;
绘制&＃xff08;painting&＃xff09;&＃xff1a;遍历渲染树绘制所有节点&＃xff0c;为每一个节点适用对应的样式&＃xff0c;这一过程是通过UI后端模块完成&＃xff1b;
接着面试官问我一些页面渲染层的一些优化手段&＃xff0c;大概如下&＃xff1a;
页面渲染优化
HTML文档结构层次尽量少&＃xff0c;最好不深于六层&＃xff1b;
脚本尽量后放&＃xff0c;放在前即可&＃xff1b;
少量首屏样式内联放在标签内&＃xff1b;
样式结构层次尽量简单&＃xff1b;
在脚本中尽量减少DOM操作&＃xff0c;尽量缓存访问DOM的样式信息&＃xff0c;避免过度触发回流&＃xff1b;
减少通过Javascript代码修改元素样式&＃xff0c;尽量使用修改class名方式操作样式或动画&＃xff1b;
动画尽量使用在绝对定位或固定定位的元素上&＃xff1b;
隐藏在屏幕外&＃xff0c;或在页面滚动时&＃xff0c;尽量停止动画&＃xff1b;
尽量缓存DOM查找&＃xff0c;查找器尽量简洁&＃xff1b;
涉及多域名的网站&＃xff0c;可以开启域名预解析
最后面试官问我&＃xff0c;如何诊断页面渲染时各个性能指标&＃xff0c;我大概说了&＃xff0c;通过chrome浏览器的工具&＃xff0c;比如看网络请求情况的network&＃xff0c;还有看页面渲染情况的perfermance&＃xff0c;以后有机会自己总结一篇。
转自&＃xff1a;孟祥_成都 https://juejin.cn/post/6928677404332425223
觉得本文对你有帮助&＃xff1f;请分享给更多人关注「全栈开发者社区」加星标&＃xff0c;提升全栈技能
本公众号会不定期给大家发福利&＃xff0c;包括送书、学习资源等&＃xff0c;敬请期待吧&＃xff01;
如果感觉推送内容不错&＃xff0c;不妨右下角点个在看转发朋友圈或收藏&＃xff0c;感谢支持。
好文章&＃xff0c;留言、点赞、在看和分享一条龙吧❤️
京公网安备 11010802041100号