HTML

1、HTML5 新增了哪些语义化标签？语义化的意义是什么？

语义化的含义：

常用语义化标签：

对 SEO 的影响：

对无障碍(a11y)的影响：

2、DOCTYPE 的作用是什么？标准模式和怪异模式有什么差异？

DOCTYPE 的作用：

两种模式的差异：

3、浏览器缓存中，强缓存和协商缓存有什么区别？

强缓存(涉及的响应头)：

协商缓存(涉及的响应头)：

实际项目中的缓存策略：

4、如何实现响应式图片和图片懒加载？

srcset / sizes：

picture 与 source：

懒加载的几种实现：

CSS

1、请列举你知道的元素居中方案，并说明各自的适用场景和坑？

水平居中：

垂直居中：

flex 方案：

grid / 绝对定位方案：

遇到的问题及解决：

2、介绍 position 的各个取值，以及 sticky 的生效条件？

position 取值及区别：

sticky 失效的常见原因：

3、CSS 选择器的权重是如何计算的？样式冲突时怎么排查？

权重计算规则：

!important 与行内样式：

继承与层叠顺序：

实际冲突的排查方式：

4、Flex 和 Grid 有什么区别？分别适合什么场景？

Flex 的特点：

Grid 的特点：

两者的核心区别：

你的选型依据：

5、CSS 自定义属性(变量)和预处理器变量有什么区别？如何做主题切换？

CSS 自定义属性：

预处理器变量(Sass/Less)：

两者的区别：

暗黑模式/主题切换方案：

JS

1、请介绍原型、原型链，以及 new 的执行过程和 class 继承？

原型与原型链：

new 的执行步骤：

instanceof 的原理：

class 继承与 extends：

与寄生组合继承的差异：

2、说说事件循环，宏任务和微任务的执行顺序？

事件循环的执行机制：

宏任务/微任务分别有哪些：

3、深拷贝和浅拷贝的区别？如何实现一个深拷贝？

区别：

常见实现方式及缺陷：

循环引用如何处理：

性能优化

1、核心 Web 指标(LCP / CLS / INP)分别衡量什么？如何优化？

LCP：

CLS：

INP：

2、打包体积优化有哪些手段？请说出 2 个并举例说明？

一：

二：

提交