高频面试题中的HTML（一）
面试题总结系列，从html开始，这里只列出来出现频率比较高且觉得有必要的题目，
1. 输入一个URL，回车之后到页面渲染的过程 🏳️🌈
- 地址解析与URL分析；
- DNS解析；
- 和服务器建立连接；
- 客户端发送请求；
- 服务器处理请求并将对应内容给客户端；
- 断开连接；
- 客户端接收文件，解析HTML；
- 页面渲染；
更详细的可以看输入一个URL，回车之后到页面渲染的那些事
2. 性能优化 🏳️🌈
性能指标
性能指标可以分为加载完成时间，首次内容绘制（First Contentful Paint，FCP），最大内容绘制（Largest Contentful Paint，LCP），可交互时间（Time to Interactive，TTI）...一类，这个看团队中的要求。
性能优化
这里只是简单的列下优化方向，
- 首屏加载：加载前的预加载、预解析，加载中的页面渲染优化，加载后的数据、任务切片。
- 代码优化：HTML、JS、CSS优化，框架中的Vue、React代码优化。
- 构建工具：webpack、vite，静态资源的压缩、提取、缓存。
- 项目架构：微前端、渲染队列、加载优先级。
更多可以看写给自己的前端性能优化
业务场景的优化
- 接口数据太多如何优化？ 网络方面，数据流式读取，避免一次性返回所有的数据； 渲染方面，分页，分片渲染，虚拟滚动，canvas绘制内容，webwork；
3. 浏览器缓存 🏳️🌈
强缓存
只要资源未过期直接读取本地资源，并返回状态码200，通过Expires和Cache-Control:max-age=<seconds>两个请求头来控制，为了更精确的控制（max-age参数为请求的相对时间、减少max-age值来手动刷新），Cache-Control的优先级比Expires更高。
协商缓存
强缓存失效时，浏览器携带上一次请求返回的响应头中的缓存标记（如ETag、Last-Modified等）向服务器发起请求，查询缓存的资源是否有效；资源没更新，就返回304，通知浏览器读取本地缓存，否则返回新的内容；参数的优先级方面，ETag要高于Last-Modified，因为ETag有更高的唯一性，对比资源变化会更加精准，资源如果已更新，就返回新的资源，状态码200。
正常情况下，都是先获取强缓存，失效再获取协商缓存，但是有几种情况是直接读取协商缓存：
cache-control的值为must-revalidate，表示客户端必须与服务器进行确认以验证缓存的有效性，即使强缓存仍然有效。cache-control的值为no-cache，表示客户端不应直接使用缓存，而是需要与服务器验证资源的有效性。cache-control的值为max-age=0，设置资源有效时间为0，会直接发起协商缓存的请求。
Web如何设置不进行缓存
no-store：禁止任何缓存（包括内存和磁盘）。 no-cache：每次请求必须向服务器验证（即使缓存未过期）。 must-revalidate：缓存过期后必须重新验证。 Expires: 0：资源立即过期。
4. script属性async和defer的区别 🏳️🌈
两个属性都是下载时不阻塞页面，区别是在下载完成之后的执行顺序，
async：下载时不阻塞页面的解析，但是下载完成之后会立即执行，执行顺序根据下载完成时间。
defer：下载时不阻塞页面的解析，下载完成之后按照在HTML中的顺序执行。
5. cookie、sessionStorage和localStorage的区别 🏳️🌈
| cookie | sessionStorage | localStorage | |
|---|---|---|---|
| 存储容量 | 4KB | 5MB | 5MB |
| 过期时间 | 手动设置，如果未设置过期时间，那么在浏览器关闭时cookie会过期 | 页面关闭自动过期 | 不会自动过期，只能手动删除 |
| 共享范围 | 任意窗口 | 当前窗口或者使用window.open打开的窗口单向共享 | 任意窗口 |
| 与服务器的交互 | 每次HTTP请求都会自动携带cookie | 不参与通信 | 不参与通信 |
6. 如何减少DNS的解析时间
启动DNS预解析；浏览器在解析HTML时，遇到配置了预解析的<link rel="dns-prefetch" href="//example.com">，会发起一个异步的DNS查询，等到资源请求时，就不用再等待DNS解析。
使用 CDN；CDN会将内容分发到离用户更近的节点，减少跨地域DNS查询的时间