2023 6月份面试题 html CSS篇

ZeroAnon
238 阅读8分钟

开始准备面试，在参考了一些大神的总结文章，结合自己收集的一些其他资料，汇总并整理了一份自己的复习资料

script 标签中属性 async 和 defer 的区别？

  • script 会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML
  • async script：解析 HTML 的过程中会进行脚本的异步下载，下载成功后立马执行，因此有可能会阻断 HTML 的解析。多个脚本的执行顺序无法保证。
  • defer script：也是异步下载脚步，加载完成后，如果此时 HTML 还没有解析完，浏览器不会暂停解析去执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

什么是文档的预解析？

当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载，从而使整体速度更快。

需要注意的是，预解析并不改变DOM树，它将这个工作交给主解析过程，自己只解析外部资源的引用，比如：外部脚本、样式及图片。

浏览器的渲染原理

简记： 生成DOM树 --> 生成CSS规则树 --> 构建渲染树 --> 布局 --> 绘制

  1. 首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
  2. 然后对 CSS 进行解析，生成一颗 CSS 规则树。
  3. 根据 DOM 树和 CSS 规则树构建渲染树。渲染树的节点被称为渲染对象，它是一个包含有颜色等属性的矩形。渲染对象和 DOM 元素相对应，但这种关系不是一对一的，不可见的 DOM 元素不会插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
  4. 当渲染对象被创建并添加到树中，它们没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的是计算出各个节点在页面中确切位置和大小。通常这一行为也被称为自动重排。
  5. 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示到屏幕上。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎会尽早的将内容呈现到屏幕上，并不会等到所有 HMTL 内容都解析完之后再去构建和布局渲染树，它是解析完一部分内容就显示一部分内容，同时，可能还通过网络下载其余内容。

什么是回流和重绘？

1.概念：

  • 回流：当 DOM 的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做回流（也可以叫做重排）。表现为重新生成布局，重新排列元素。
  • 重绘：当一个元素的外观发生改变，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

2.常见引起回流和重绘的属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作都会触发回流。

  • 添加或删除可见的 DOM 元素
  • 元素尺寸改变--边距、填充、宽度、高度
  • 浏览器尺寸改变-- resize 事件发生时
  • 计算 offsetWidth 和 offsetHeight 属性
  • 设置 style 属性的值
  • 修改网页默认字体

回流必定会发生重绘，重绘不一定会引发回流。

回流所需的成本比重绘高得多

如何减少回流？

  • 使用 transform 代替 top
  • 不要把节点的属性值放在一个循环里，当成循环里的变量
  • 不要使用 table 布局，可能很小的一个改动会造成整个 table 的重新布局
  • 把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
  • 不要一条一条的修改样式，可以预先定义好 class，然后修改 DOM 的 className
  • 使用 absolute 或 fixed 使元素脱离文档流

sessionStorage，localStorage 和 cookie 的区别

  1. 共同点：都是保存在浏览器端，且同源的
  2. 区别:
  • cookie 始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器之间来回传递；而 sessionStorage 和 localStorage 不会自动把数据发送到服务器，仅在本地保存。cookie 还有路径（path）的概念，可以限制 cookie 只属于某个路径下。
  • 存储大小限制不同。cookie 不能超过 4K，因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如：会话标识。sessionStorage 和 localStorage 虽然也有存储大小限制，但比 cookie 大得多，可以达到 5M 或更大。
  • 数据有效期不同。sessionStorage 仅在当前浏览器窗口关闭之前有效；localStorage 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前有效。
  • 作用域不同。sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 和 cookie 在所有同源窗口中都是共享的。

  • display: none 和 visibility: hidden 两者的区别

  1. display: none 隐藏后不占用文档流；而 visibility: hidden 会占用文档流。
  2. visibility 具有继承性，给父元素设置 "visibility: hidden"，子元素也会继承该属性，但如果重新给子元素设置 "visibility: visible"，则子元素又会显示出来。
  3. visibility: hidden 不会影响计数器的计数，虽然隐藏了，但计数器依然运行着。
  4. 在 css3 中 transition 支持 visibility 属性，但不支持 display。因为 transition 可以延迟执行，因此配合 visibility 使用纯 css 延时显示效果可以提高用户体验。
  5. display: none 会引起回流（重排）和重绘；visibility: hidden 会引起重绘。

BFC（块级格式上下文）

  1. 概念： BFC（Block Formatting Context），块级格式上下文。BFC 是 css 布局的一个概念，是一个独立的渲染区域，规定了内部 box 如何布局，且这个区域内的子元素不会影响到外面的元素。
  2. 布局规则：
  • 内部的 box 会在垂直方向一个接一个的放置
  • box 垂直方向的距离由 margin 决定，同一个 BFC 相邻的 box 的 margin 会发生重叠
  • 每个 box 的 margin 左边，与包含块的左 border 相接触（对于从左往右的格式化，否则相反）
  • BFC 的区域不会与 float box 重叠
  • BFC 是一个独立容器，容器内的子元素不会影响到外面的元素
  • 计算 BFC 高度时，浮动元素也参与计算高度
  1. 如何创建 BFC ？
  • 根元素，即 html 元素
  • float 值不为 none
  • position 值为 absolute 或 fixed
  • display 的值为 inline-block、tabl-cell、table-caption
  • overflow 的值不为 visible
  1. BFC 的使用场景
  • 去除边距重叠问题
  • 清除浮动（让父元素的高度包含子浮动元素）
  • 阻止元素被浮动元素覆盖

css 中优雅降级和渐进增强有什么区别？

  • 优雅降级：一开始就构建完整的功能，然后针对浏览器测试和修复。
  • 渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。

img 的 alt 和 title 的异同？实现图片懒加载的原理？

  • alt是图片加载失败时显示在网页上的替代文字；title是鼠标放在图片上面时显示的文字，是对图片的进一步描述和说明。
  • alt是 img 的必要属性；title不是。
  • 对于网站 SEO 优先来说，搜索引擎对图片意思的判断，主要是靠alt属性，所以在图片alt属性中以简要文字说明，同时包含关键字，也是页面优化的一部分。

懒加载原理：先设置图片的 data-set 属性值（也可以是其他任意的，只要不发生 http 请求就可以，作用是为了存取值）为图片路径，由于不是 src 属性，故不会发生 http 请求。然后计算出页面的 scrollTop 的高度和浏览器的高度之和，如果图片距页面顶端距离小于前两者之和，说明图片要显示出来了，这时将 data-set 属性替换为 src 属性即可。

avatar
文章
阅读
粉丝