必看

1. Html

5 min
h5 是什么？

h5 是什么？

H5 是一个产品名词，包含了最新的 HTML5、CSS3、ES6 等新的技术来制作的应用。

HTML5 是一个技术名词，指代的就仅仅是第五代 HTML。

defer vs async

alt text

html 第一行有什么用，Doctype？

告诉浏览器当前 HTML 是用什么版本编写的，DOCTYPE 会影响代码验证，并决定了浏览器最终如何显示你的 Web 文档。

<!DOCTYPE html> 表示是 html5，不需要引入 DTD

简述 requestAnimationFrame，优点

requestAnimationFrame Api 是在每一次重新渲染之前执行，这个 API 的出现，就是专门拿来做动画的。以前我们做动画，用的更多的是 setInterval 或者 setTimeout，但是这些 API 本意不是拿来做动画的。使用 requestAnimationFrame Api 拿到做动画，最大的优点就是频率是和浏览器重新渲染的频率一致。

用于在下一次浏览器重绘之前执行回调函数。它通常用于实现高性能的动画。优点是：

  • 高效：它会在浏览器的刷新频率（通常是 60FPS）下调用回调函数，避免了不必要的重绘。
  • 节能：当页面不可见或在后台时，requestAnimationFrame 会暂停调用，从而节省资源。（setTimeout 页面不可见时仍然执行）
  • 平滑动画：它与浏览器的刷新同步，能提供更流畅的动画效果。

什么是 reflow？

reflow 的本质就是重新计算 layout 树。大概发生在浏览器渲染的第三个阶段，比较前置，

当进行了会影响布局树的操作后，比如元素的几何信息，宽高这些，就需要重新计算布局树。

什么是 repaint？

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发 repaint。

由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

移动端下适配不同屏幕的原理是什么，有几种方案？

  • 流式布局、
  • 媒体查询、
  • rem + flexible、
  • vw/vh、viewport 缩放等方案。

实际项目中我会根据场景选择，比如后台管理系统用媒体查询，H5 活动页用 rem 或 vw/vh，老项目可能用 viewport 缩放。针对字体、组件大小的适配，我更倾向 rem + postcss-pxtorem 或 vw，因为它们能结合设计稿精准还原。

  1. rem+动态的 font-size，这个方案分两步，一个是要根据客户端大小动态设置动态的 font-size
    1. 设置动态 font-size？
      • 媒体查询（用的比较少） 弊端：需要写大量的媒体查询，其次是实时性不高，媒体查询只是个范围，断点
      • js 动态修改：
        • 手淘的方案 lib-flexible 也用的比较少，不更新了，由于 vw 已被广泛支持，该库的作者也推荐使用 vw 方案
          1. 调整 body font-size（根据 dpr）
          2. 计算 rem html 的 clientWidth / 10
          3. 监听 resize 和 pageShow 更新 2 步骤
        • 自行实现
    2. rem 单位计算
      • scss/less 换算
        .px2rem(@px) {
  width: 1rem * (@px / 37.5) // 37.5 = 375 / 10, 375 是设计稿宽度
}
      • 库 postcss-pxtorem
      • vscode 插件
  2. 方案二 vw，这个是目前普遍在用的方案，vw 方案可以简单理解为 html font-size 设置为 10vw （开玩笑的方案）
    • 直接使用 vw，vh，开发的时候开始用 px，用工具转换为 vw
      • 手动换算
        @vwUnit: 3.75
.px2vw(@px) {
  result: (@px / @vwUnit) * 1vw
}
      • 库 postcss-px-to-viewport

vw 相比于 rem 的优势：

  • 不需要去计算 html 的 font-size 大小，也不需要给 html 设置这样 font-size;
  • 不会因为设置 html 的 font-size 大小，而必须给 body 再设置一个 font-size，防止继承
  • 因为不依赖 font-size 的尺寸，所以不用担心某些原因 html 的 font-size 尺寸被篡改，页面尺寸混乱
  • vw 相比于 rem 更加语义化，1vw 是 1/100 的 viewport 的大小；
  • 可以具备 rem 之前所有的优点；
  1. 废弃的
  • 百分比 基本不用，因为不确定包含块，参照物很难统一
  • flex 布局：辅助