高频面试题中的HTML（一）

面试题总结系列，从html开始，这里只列出来出现频率比较高且觉得有必要的题目，

1. 输入一个URL，回车之后到页面渲染的那些事 🏳️‍🌈

1. 地址解析与URL分析；
2. DNS解析；
3. 和服务器建立连接；
4. 客户端发送请求；
5. 服务器处理请求并将对应内容给客户端；
6. 断开连接；
7. 客户端接收文件，解析HTML；
8. 页面渲染；

更详细的可以看输入一个URL，回车之后到页面渲染的那些事

2. 性能优化 🏳️‍🌈

• 性能指标

  性能指标可以分为加载完成时间，首次内容绘制（First Contentful Paint，FCP），最大内容绘制（Largest Contentful Paint，LCP），可交互时间（Time to Interactive，TTI）...一类，这个看团队中的要求。

• 性能优化

  这里只是简单的列下优化方向，

  • 首屏加载：加载前的预加载、预解析，加载中的页面渲染优化，加载后的数据、任务切片。
  • 代码优化：HTML、JS、CSS优化，框架中的Vue、React代码优化。
  • 构建工具：webpack、vite，静态资源的压缩、提取、缓存。
  • 项目架构：微前端、渲染队列、加载优先级。

  更多可以看写给自己的前端性能优化

3. 浏览器缓存 🏳️‍🌈

强缓存，只要资源未过期直接读取本地资源并返回200，通过Expires和Cache-Control:max-age=<seconds>两个请求头来控制，为了更精确的控制（max-age参数为请求的相对时间、减少max-age值来手动刷新），Cache-Control的优先级比Expires更高。

协商缓存，强缓存失效时，浏览器携带上一次请求返回的响应头中的缓存标记（如ETag、Last-Modified等）向服务器发起请求，查询缓存的资源是否有效；资源没更新，就返回304，通知浏览器读取本地缓存，否则返回新的内容；参数的优先级方面，ETag要高于Last-Modified，因为ETag有更高的唯一性，对比资源变化会更加精准，资源如果已更新，就返回新的资源，状态码200。

正常情况下，都是先读取强缓存，再读取协商缓存，但是有几种情况是直接读取协商缓存：

1. cache-control的值为must-revalidate，表示客户端必须与服务器进行确认以验证缓存的有效性，即使强缓存仍然有效。

2. cache-control的值为no-cache，表示客户端不应直接使用缓存，而是需要与服务器验证资源的有效性。

3. cache-control的值为max-age=0，设置资源有效时间为0，会直接发起协商缓存的请求。

4. script属性async和defer的区别 🏳️‍🌈

两个属性都是下载时不阻塞页面，区别是在下载完成之后的执行顺序，

• async：下载时不阻塞页面的解析，但是下载完成之后会立即执行，执行顺序根据下载完成时间。

• defer：下载时不阻塞页面的解析，下载完成之后按照在HTML中的顺序执行。

5. cookie、sessionStorage和localStorage的区别 🏳️‍🌈