前端面试--浏览器相关_前端面试关于浏览器-CSDN博客

1.浏览器渲染原理：

根据 HTML 解析出 DOM 树
根据 CSS 解析生成 CSS 规则树
结合 DOM 树和 CSS 规则树，生成渲染树
根据渲染树计算每一个节点的信息
根据计算好的信息绘制页面

提升渲染效率
减少重绘和回流（使用transform代替top，使用visibility替换display:none）
不要把节点属性放在循环里当成循环里的变量
不要使用table布局，很小的改动会造成table的重新布局
css选择符会从右往左匹配查找，避免节点层级过多
将频繁重绘或回流的节点设置为图层，图层能阻止该节点的渲染行为影响到别的节点
性能优化策略
js优化：script标签加上defer属性或async属性
css优化：link标签的rel属性设置为preload，提前加载，提高渲染性能。如<link rel="prefetch">
使用缓存

2.浏览器存储

cookie，原本是解决http协议的无状态性，用来维持状态，而并非本地存储
cookie的原理
cookie的生成方式:http response header的set-cookie
document.cookie='age=20;domain=.baidu.com'
domain可以设置哪些域名可以接受Cookie
cookie的缺陷
（大小限制，性能浪费【Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带 Cookie。】）
安全性【http请求中cookie明文传递，除非用https】

cookie安全性设置
value加密
http-only 不能通过js访问cookie，减少xss攻击
secure：只能在协议为https的请求中携带
same-site规定浏览器不能再跨域请求中携带Cookie，减少CSRF攻击

localStorage的特点
保存数据长期存在，大小为5M，仅在客户端使用，不和服务端同学，接口封装较好
sessionStorage，即便相同域名下的两个页面，只要不在同一浏览器窗口中打开，则sessionStorage无法共享

Web Storage 是对 Cookie 的拓展，它只能用于存储少量的简单数据--字符串，想要得到对象，需要对字符串进行解析。
当遇到大规模的、结构复杂的数据时，Web Storage 也爱莫能助了，需要用indexedDB

indexedDB用于存储大量结构化数据，使用索引来实现对数据的高效搜索。它是运行在浏览器上的非关系型数据库。
indexedDB的特点
键值对存储，异步，支持事务，同源限制，存储空间大，支持二进制存储。

3.浏览器缓存：
为什么要用缓存：重复利用缓存文件，减少带宽，降低网络负荷。
对于一个数据请求包括三个步骤：网络请求，后端处理，浏览器响应。
浏览器请求可以在第一个步骤和第三个步骤中性能优化（直接使用缓存而不发起请求；或发起请求但数据与前端
缓存数据一致，则不将数据传回来，减少响应数据）

缓存位置：service worker、memory cache【内存缓存】、disk cash【硬盘缓存】、push cache【推送缓存】

缓存策略：强缓存和协商缓存，缓存策略由http header来实现

强缓存：通过设置两种http header来实现：Expires【缓存过期时间】和Cache-control
cache-control的值：public，private，max-age,s-maxage,nostore,no-cache,max-stale,min-fresh
【nostore：所有内容不缓存，no-cache:要缓存，只是使用缓存数据时，需要先确认一下数据是否跟服务器上一致】
可以多个指令配合起来使用。
Expires和Cache-Control同时存在的话，Cache-Control的优先级高。Expires是一种兼容的写法【Expires是http1.0
的写法，Cache-Control是http1.1的写法，在不支持http1.1的环境下，Expires就起作用】

强缓存只判断某个时间段用缓存，没有管服务器文件是否更新，所以我们需要通过协商缓存策略。

协商缓存：通过设置两种http header实现：last-Modified和ETag
last-modified和if-modified-since
缺点：如果本地打开缓存文件，即使没有修改也会导致last-modified被修改，服务器不能命中缓存，导致重新发送资源
last-modified只能以秒计算，如果在不可感知的时间内修改完文件，那么服务器会认为命中，不会正确返回资源。
所以http1.1出现了Etag

Etag和if-None-Match
Etag是请求资源时，返回当前资源文件的唯一标识（由服务器生成），只要资源变化，Etag就重新生成。
发送请求时，浏览器将上一次服务器返回的Etag放到request header中的if-None-Match里

Etag和last-modified的比较
①精确度：Etag优
②性能上：last-modified优
③优先级：Etag

浏览器的缓存机制：
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，
若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，
协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，
重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存

输入url到页面展现经历了什么过程
1.dns域名解析（域名--ip地址）
2.TCP连接（三次握手）
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.断开连接（TCP四次挥手）
【浏览器根据域名查找URL对应的IP：浏览器缓存-操作系统缓存-路由缓存-IPS的DNS服务器-根服务器】