请问为什么要监听DOMContentLoaded事件，然后设置 html 的font-size呢？

Question

export const useREM = () => {
  // 定义最大的fontSize
  const MAX_FONT_SIZE = 40
  // 监听 html 文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 拿到 html 标签
    const html = document.querySelector('html')
    // 计算 fontSize，根据屏幕宽度 / 10
    let fontSize = window.innerWidth / 10 // 包含滚动条的宽度
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize

    html.style.fontSize = fontSize + 'px'
  })
}

当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。我查了DOMContentLoaded的触发具体时间，主要解释是：
1、当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件
2、如果文档中包含脚本（async或defer脚本除外），则脚本会阻塞文档的解析
3、脚本需要等 CSSOM 构建完成才能执行

这样看，DOMContentLoaded 至少要等到cssom构建完毕后再能触发，然后在触发的回调函数里设置font-size大小。如果存在非一部的js脚本，还需要等待更长时间。

综上，useREM是不是不放在DOMContentLoaded事件的回调函数里更妥当呢？
是否直接放在head 标签里更加好？

Answer 1

Sunday 2022-06-16 21:23:44

你好

很多时候业务代码的逻辑处理并非越靠前越好，更多的时候我们需要考虑代码可维护性。

在 大型项目中，并不建议把复杂逻辑直接通过 script 进行引入。

• 提问者 吕士杰 #1

  非常感谢！

• 村头王师傅觉得你老土 回复 提问者 吕士杰 #2

  大佬能再讲讲吗，我不太明白这里为什么要用DOMContentLoaded

• Sunday 回复 村头王师傅觉得你老土 #3

  你好，因为我们要监听 DOM 内容解析完成。一般有两种：
  1. window.onload ： 这个是 window下所有资源解析完成的回调
  2. DOMContentLoaded： 这个是 widnow 下所有的 dom 解析完成的回调
  咱们这里不需要等待所有资源，只需要等待 dom 完成，所以使用 DOMContentLoaded