2025前端最新面试题-基础篇html
1. DOM 对象有哪些？ (文档对象模型)
- document (文档对象)
- element (HTML 元素, 节点对象)
- event (事件对象)
- attribute (表示 HTML 属性)
2. BOM 对象有哪些？
- window
- location
- navigator
- screen
- history
- console
3. HTML 语义化是什么, 有哪些标签?
HTML 语义化标签就是用于方便搜索引擎解析, 也就是 SEO
语义化标签 就是 用正确的标签做正确的事
语义化标签有哪些?
有很多, 基本不会问, 可能会问 HTML5 新增了哪些
HTML5 新增语义化标签 footer、nav、header、article
4. 块级标签、内联标签有哪些?
CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display值， 比如 div 默认 display 属性值为 “block”，成为“块级”元素； span 默认 display 属性值为 “inline”，是“行内”元素。
行内元素有：
a span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 ~ h6 p
5. defer 和 async 区别？
html 文件都是按顺序执行的，script 标签中没有加 defer 和 async 时，浏览器在解析文档时遇到 script 标签就会停止解析, 阻塞文档解析，先加载JS文件，加载完之后立即执行，执行完毕后才能继续解析文档。
而在 script 标签中写入 defer 或者 async 时，就会使JS文件异步加载，即 html 执行到 script 标签时，JS加载和文档解析同时进行，
而 defer 则是JS加载完成后，在文档解析完成后执行JS脚本，而 async 是在JS加载完成后立即执行JS脚本，阻塞文档解析，
小结
- defer -> js 加载 -> 文档解析 -> js 执行
- async -> js 加载 -> js 执行 -> 文档解析
6. 描述从输入 url 到页面展示的完整过程
步骤
- 网络请求
- 解析
- 渲染
网络请求
- DNS 查询 (得到 IP), 建立 TCP 连接 (三次握手)
- 浏览器发起 HTTP 请求
- 收到请求响应，得到 HTML 源代码
继续请求静态资源
- 解析 HTML 过程中，遇到静态资源还会继续发起网络请求
- JS CSS 图片 视频等
- 注意：静态资源可能有强缓存，此时不必请求
解析：字符串 -> 结构化数据
- HTML 构建 DOM 树
- CSS 构建 CSSOM 树 (style tree)
- 两者结合，形成渲染树 (render tree)
优化解析
- CSS 放在
<head>中，不要异步加载 CSS- JS 放在
<body>最下面 (或合理使用 defer async)<img>提前定义 width height
渲染：Render Tree 绘制到页面
- 计算各个 DOM 的尺寸、定位, 最后绘制到页面
- 遇到 JS 可能会执行 (参考 defer async)
- 异步 CSS、图片加载, 可能会触发重新渲染
整个完整解析过程
总结
- 网络请求：DNS 解析，HTTP 请求
- 解析：DOM 树，CSSOM 树，Render Tree
- 渲染：计算、绘制，同时执行 JS
7. 重绘 repaint 重排 reflow 有什么区别？
动态网页，随时都会重绘、重排
- 网页动画
- Modal Dialog 弹窗
- 增加/删除一个元素，显示/隐藏一个元素
重绘 repaint
- 元素外观改变，如颜色、背景色
- 但元素的尺寸、定位不变，不会影响其他元素的位置
重排 reflow
- 重新计算尺寸和布局，可能会影响其他元素的位置
- 如元素高度增加，可能会使相邻元素位置下移
区别
- 重排比重绘要影响更大，消耗也更大
- 所以，要尽量避免无意义的重排
减少重排的方法
- 集中修改样式，或直接切换 css class
- 修改之前先设置 display: none, 脱离文档流
- 使用 BFC 特性，不影响其他元素位置（ BFC 内部不影响外部 ）
- 频繁触发 (resize scroll) 使用节流和防抖
- 使用 createDocumentFragment 批量操作 DOM
- 优化动画，使用 CSS3 和 requestAnimationFrame
注意：CSS3 动画 比 JS 动画更快，是因为 CSS3 触发了 GPU 加速
扩展：BFC
- Block Format Context 块级格式化上下文
- 内部的元素无论如何改变，都不会影响其他元素的位置
触发 BFC 的条件
- 根节点
html>- float: left/right
- overflow: auto/scroll/hidden
- display: inline-block/table/table-row/table-cell
- display:flex/grid 的直接子元素
- position: absolute/fixed