面试题提升—浏览器+网络部分高频面试题

一、浏览器

1、什么是reflow(回流/重排)

1. reflow的本质：
   • 其实就是：重新计算layout树(布局树)
2. 具体解释：
   • 当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。
   • 为了避免连续多次操作后，导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算。
   • 所以，改动属性造成的reflow是异步完成的。
   • 也同样因为如此，当JS获取布局属性时，就可能会造成：无法获取到最新的布局信息，浏览器在反复权衡下，最终决定获取属性时，立即refow

2、什么是repaint(重绘)

1. repaint的本质：
   ○ 其实就是：重新根据分层信息计算了绘制指令
2. 具体解释：
   • 当改动了可见样式后，就需要重新计算，会引发repaint。
   • 由于元素的布局信息也属于可见样式，所以refow一定会引起repaint

3、为什么transform的效率高？

1. 因为transform既不会影响布局也不会影响绘制指令，它影响的只是：渲染流程的最后一个draw阶段
2. 由于draw阶段在合成线程中，所以transform的变化几乎不会影响渲染主线程。
3. 反之，渲染主线程无论如何忙碌，也不会影响transform的变化。

二、浏览器

1、说说网络的五层模型

1. 从上到下分别为：应用层、传输层、网络层、数据链路层、物理层。
2. 在发送消息时，消息从上到下进行打包，每一层会在上一层基础上加包，而接受消息时，从下到上进行解包，最终得到原始信息。
3. 其中:
   • 应用层主要面向互联网中的应用场景，比如：网页、邮件、文件中心等，它的代表协议有http、smtp、pop3、ftp、DNS等
   • 传输层主要面向传输过程，比如：TCP协议是为了保证可靠的传输，而UDP协议则是一种无连接的广播，它们提供了不同的传输方式
   • 网络层主要解决如何定位目标以及如何寻找最优路径的问题，比如：IP等
   • 数据链路层的作用是将数据在一个子网(广播域)内有效传输，MAC地址、交换机都是属于该层的
   • 物理层是要解决二进制数据到信号之间的互转问题，集线器、双绞线、同轴电缆等都属于盖层的设备

2、GET和POST的区别

• 从http协议的角度来说：GET和POST它们都只是请求行中的第一个单词，除了语义不同，其实没有本质的区别
• 之所以在实际开发中会产生各种区别，主要是因为：浏览器的默认行为造成的。
• 受浏览器的影响，在实际开发中，GET和POST有以下区别：

1. 浏览器在发送GET时，不会附带请求体
2. GET请求的传递信息量有限，适合传递少量数据，POST请求的传递信息量没有限制，适合传输大量数据
3. GET请求只能传递ASCII数据，遇到非ASCII数据需要进行编码，POST请求没有限制
4. 大部分GET请求传递的数据都附带在path参数中，能够通过分享地址，完整的重现页面，但同时也暴露了数据，若有敏感数据传递，不应该使用GET请求，至少不应该放到path中
5. 刷新页面时，若当前的页面是通过POST请求得到的，则：浏览器会提示用户是否重新提交。若是GET请求得到的，则页面没有提示，
6. GET请求的地址可以被保存为浏览器书签，POST不可以

3、http常见请求方法有哪些

1. GET，表示向服务器获取资源
2. POST，表示向服务器提交信息，通常用于产生新的数据，比如：注册。
3. PUT，表示希望修改服务器的数据，通常用于修改
4. DELETE，表示希望删除服务器的数据
5. OPTIONS，发生在跨域的预检请求中，表示客户端向服务器申请跨域提交
6. TRACE，回显服务器收到的请求，主要用于测试和诊断
7. CONNECT，用于建立连接管道，通常在代理场景中使用，网页中很少用到
8. PATCH，用于部分更新指定资源，而不是像 PUT 那样替换整个资源。

4、cookie/sessionStorage/localStorage的区别

1. cookie、sessionStorage、localStorage都是保存本地数据的方式
2. 其中，cookie兼容性较好，所有浏览器均支持。
3. 浏览器针对cookie会有一些默认行为，比如：
   • 当响应头中出现set-cookie字段时，浏览器会自动保存 cookie的值
   • 再比如：浏览器发送请求时，会附带匹配的cookie到请求头中。
4. 这些默认行为，使得cookie长期以来担任着维持登录状态的责任。
5. 与此同时，也正因为浏览器的默认行为给了恶意攻击者可乘之机，CSRF攻击就是一个典型的利用cookie的攻击方式。
6. 虽然cookie不断的改进，但前端仍然需要另一种更加安全的保存数据的方式
7. HTML5新增了sessionStorage和localStorage，前者用于保存会话级别的数据，后者用于更持久的保存数据。
8. 浏览器针对它们没有任何默认行为，这样一来，就把保存数据、读取数据的工作交给了前端开发者，这就让恶意攻击者，难以针对登录状态进行攻击。
9. cookie的大小是有限制的，一般浏览器会限制同一个域下的cookie总量为4M，而sessionStorage和localStorage则没有限制
10. cookie会与domain(域)、path关联，而sessionStorage和localStorage只与domain关联

5、解释对称加密，非对称加密，摘要的概念

• 密钥是一种参数，它是在明文转换为密文或将密文转换为明文的算法中输入的参数。
• 密钥分为：对称密钥与非对称密钥，分别应用在：对称加密和非对称加密上。

1. 对称加密
   • 对称加密又叫做私钥加密，即：信息的发送方和接收方使用同一个密钥去加密和解密数据。
   • 对称加密的特点是：算法公开、加密和解密速度快，适合于对大量数据进行加密，常见的对称加密算法有：DES、3DES、TDEA、Blowfish、RC5 和IDEA。
2. 非对称加密
   • 非对称加密也叫做公钥加密，非对称加密与对称加密相比，其安全性更好。
   • 对称加密的通信双方使用相同的密钥，如果一方的密钥遭泄露，那么整个通信就会被破解。
   • 而非对称加密使用一对密钥，即：公钥和私钥，且二者成对出现，私钥被自己保存，不能对外泄露。
   • 公钥指的是公共的密钥，任何人都可以获得该密钥。
   • 用公钥或私钥中的任何一个进行加密，用另一个进行解密。
3. 摘要
   • 摘要算法又称哈希/散列算法。
   • 通过一个函数，把任意长度的数据转为一个长度固定的数据串(通常用 16 进制的字符表泰示)算法不可逆

6、请阐述JWT的令牌格式

• jwt本质上是一种令牌格式。
• 它和终端设备无关，同样和服务器无关，甚至与如何传输无关，它只是规范了令牌的格式而已 简而言之，JWT 就是帮助你在网络上证明身份的一种安全方式

1. token分为三段，分别是：header(头部)、payload(载荷)、signature(签名)
2. header：标识签名算法和令牌类型
3. payload：标识主体信息，包含：令牌过期时间、发布时间、发行者、主体内容等
4. signature：是使用特定的算法对前面两部分进行加密，得到的加密结果。
5. token有防篡改的特点，如果攻击者改动了前面两个部分，就会导致和第三部分对应不上，使token失效，而攻击者不知道加密秘钥，因此又无法修改第三部分的值。
6. 所以，在秘钥不被泄露的前提下，一个验证通过的token是值得被信任的。

7、在浏览器地址栏输入地址，按下回车键后，会发生哪些事情

1. 浏览器自动补全协议、端口
2. 浏览器自动完成url编码
3. 浏览器根据url地址查找本地缓存，根据缓存规则看是否命中缓存，若命中缓存则使用缓存，不再发出请求
4. 通过DNS解析找到服务器的IP地址
5. 浏览器向服务器发出建立TCP连接的申请，完成三次握手后，连接通道建立
6. 若使用了HTTPS协议，则还会进行SSL握手，建立加密信道，使用SSL握手时，会确定是否使用HTTP2
7. 浏览器决定要附带哪些cookie到请求头中
8. 浏览器自动设置好请求头、协议版本、cookie，发出GET请求
9. 服务器处理请求、进入后端处理流程，完成处理后，服务器响应一个HTTP报文给浏览器
10. 浏览器根据使用的协议版本，以及Connection字段的约定，决定是否要保留TCP连接。
11. 浏览器根据响应状态码决定如何处理这一次响应
12. 浏览器根据响应头中的Content-Type字段识别响应类型，如果是text/html，则对响应体的内容进行HTML解析，否则做其他处理
13. 浏览器根据响应头的其他内容完成缓存、cookie的设置
14. 浏览器开始从上到下解析HTML，若遇到外部资源链接，则进一步请求资源
15. 解析过程中生成D0M树、CSSOM树，然后一边生成，一边把二者合并为渲染树(rendering tree)，随后对渲染树中的每个节点计算位置和大小(reflow)，最后把每个节点利用GPU(处理图形和图像的计算硬件)绘制到屏幕(repaint)
16. 在解析过程中还会触发一系列的事件，当D0M树完成后，会触发D0MContent Loaded事件，当所有资源加载完毕后会触发load事件

8、cookie和session的区别

1. cookie的数据保存在浏览器端；session的数据保存在服务器
2. cookie的存储空间有限；session的存储空间不限
3. cookie只能保存字符串；session可以保存任何类型的数据
4. cookie中的数据容易被获取；session中的数据难以获取

9、如何消除session

1. 过期时间：
   • 当客户端长时间没有传递sessionid过来时，服务器可以在过期时间后自动清除session
2. 客户端主动通知
   • 可以使用JS监听客户端页面关闭或其他退出操作，然后通知服务器清除session

10、介绍csrf攻击

1. CSRF是跨站请求伪造，是一种：挟制用户在当前已登录的Web应用上执行非本意的操作的攻击方法
2. 它首先引导用户访问一个危险网站，当用户访问网站后，网站会发送请求到被攻击的站点，这次请求会携带用户的cookie发送，因此，就利用了用户的身份信息完成攻击
3. 防御CSRF攻击有多种手段:
   • 不使用cookie
   • 为表单添加校验的token校验
   • cookie中使用sameSite字段
   • 服务器检查referer字段

11、介绍xss攻击

1. XSS是指：跨站脚本攻击。
2. 攻击者利用站点的漏洞，在表单提交时，在表单内容中加入一些恶意脚本，当其他正常用户浏览页面，而页面中刚好出现攻击者的恶意脚本时，脚本被执行，从而使得页面遭到破坏，或者用户信息被窃取。
3. 防范XSS攻击，需要在服务器端过滤脚本代码，将一些危险的元素和属性去掉或对元素进行HTML实体编码

12、列举优化网络性能方法

1. 优化打包体积
   • 利用一些工具压缩，混淆最终打包代码，减少包体积
2. 多目标打包
   • 利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本
   • 这样一来，每个版本中的兼容性代码就会大大减少，从而减少包体积
3. 压缩
   • 现代浏览器普遍支持压缩格式，因此服务端的各种文件可以压缩后再响应给客户端
   • 只要解压时间小于优化的传输时间，压缩就是可行的
4. cdn
   • 利用cdn可以大幅缩减静态资源的访问时间，特别是对于公共库的访问，可以使用知名的cdn 资源，这样可以实现跨越站点的缓存
5. 缓存
   • 对于除 html 外的所有静态资源均可以开启协商缓存，利用构建工具打包产生的文件hash值来置换缓存
6. http2
   • 开启http2后，利用其多路复用、头部压缩等特点，充分利用带宽传递大量的文件数据
7. 雪碧图
   • 对于不使用http2的场景，可以将多个图片合并为雪碧图，以达到减少文件的目的
8. defer、async
   • 通过defer和async属性，可以让页面尽早加载js文件
9. prefetch、preload
   • 通过 prefetch 属性，可以让页面在空闲时预先下载其他页面可能要用到的资源
   • 通过 preload d 属性，可以让页面预先下载本页面可能要用到的资源
10. 多个静态资源域
    • 将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个tcp连接，并
      行下载

13、简述域名的解析过程

• 本机和域名服务器一般都会有高速缓存，它存在的目的是为了减少查询次数和时间

1. 查找本机hosts文件中是否有解析记录，如果有，直接使用
2. 查找本地域名服务器中是否有解析记录，如果有，直接使用
3. 查询根域名服务器，得到顶级域名服务器ip
4. 查询顶级域名服务器中是否有解析记录，如果有，直接使用
5. 根据顶级域名服务器反馈的ip，查询权限域名服务器，如果有解析记录，直接使用
6. 如果以上都找不到，域名解析失败_