如何在页面渲染时和浏览器窗口调整大小时调用指定函数

1. 原始resize监听代码是否会在首次渲染触发 #

不会。resize事件仅会在浏览器视口尺寸发生变更时触发，页面首次加载渲染的过程不会触发该事件。

2. 调整后的代码是否能实现需求 #

可以正常实现你的需求，但存在两个可优化的点：

• window.onload需要等待页面所有资源（图片、样式表、第三方资源等）全部加载完成才会触发，如果你的函数不需要依赖资源加载完成，仅需要DOM渲染完成就执行，会存在不必要的等待延迟。
• 直接赋值window.onload会覆盖之前可能存在的window.onload逻辑，更推荐用addEventListener注册事件。

推荐优化写法 #

方案1：DOM渲染完成即执行（推荐大多数场景） #

不需要等待图片等资源加载，DOM解析完成就触发函数：

function callName(){
  console.log('Hi Neo!')
}

// 监听resize事件
window.addEventListener('resize', callName)
// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', callName)

方案2：精简写法，注册后直接手动调用 #

如果不需要严格等待DOM加载，代码执行到就可以触发：

function callName(){
  console.log('Hi Neo!')
}

window.addEventListener('resize', callName)
// 直接手动调用一次，实现首次执行
callName()

额外性能优化提示 #

resize事件会在窗口调整过程中高频触发，如果你的callName函数包含复杂计算、DOM操作等重开销逻辑，建议添加防抖逻辑降低执行频率，示例如下：

// 防抖工具函数，默认200ms延迟
function debounce(func, delay = 200) {
  let timerId
  return function(...args) {
    clearTimeout(timerId)
    timerId = setTimeout(() => func.apply(this, args), delay)
  }
}

const callName = debounce(() => {
  console.log('Hi Neo!')
})

window.addEventListener('resize', callName)
callName()

内容的提问来源于stack exchange，提问作者Rick