前端性能优化--load和DOMContentLoaded

本文详细解析了DOMContentLoaded与load事件的区别。DOMContentLoaded是指DOM文档解析完成即触发,而load事件则是在页面上所有资源(包括图片、音频、视频等)加载完成后才触发。通常情况下,DOMContentLoaded事件会先于load事件触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转自:https://www.cnblogs.com/caizhenbo/p/6679478.html

作者写的很好,通俗易懂,解释的也很全面.

DOMContentLoaded: 就是dom内容加载完毕,HTML文档被解析加载完成.

load:页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件,页面的load事件会在DOMContentLoaded被触发之后才触发。

### 前端性能优化的最佳实践 #### 一、代码分割(Code Splitting) 代码分割是一种重要的前端性能优化策略,它能够按需加载模块,减少初始加载时间。通过将应用程序拆分为多个较小的文件,浏览器可以根据用户的操作动态加载所需的代码部分,而不是一次性下载整个应用逻辑[^1]。 以下是实现代码分割的一些常见方式: - **Webpack 的 `splitChunks` 配置**:可以通过 Webpack 提供的插件配置来自动完成代码分割。 - **React Vue 中的动态导入**:利用 JavaScript 动态导入语法 (`import()`) 实现组件级别的按需加载。 ```javascript // React 示例 function LazyComponent() { const Component = React.lazy(() => import('./HeavyComponent')); return ( <Suspense fallback={<div>Loading...</div>}> <Component /> </Suspense> ); } ``` --- #### 二、懒加载(Lazy Loading) 懒加载是另一种有效的性能优化手段,主要用于延迟加载非关键资源,比如图片或其他静态资产。这种方式可以显著降低首屏渲染的时间并节省带宽消耗[^2]。 ##### 图片懒加载的具体实现方法如下: - 使用第三方库如 Intersection Observer API 或者 Lodash 的 throttle 方法监听滚动事件。 - 当目标元素进入视口范围时触发加载行为。 ```html <!-- HTML 结构 --> <img data-src="image.jpg" class="lazyload" alt="Example Image"> ``` ```javascript // JavaScript 实现 document.addEventListener('DOMContentLoaded', () => { let lazyImages = [].slice.call(document.querySelectorAll('.lazyload')); if ('IntersectionObserver' in window) { let lazyImageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { let image = entry.target; image.src = image.dataset.src; image.classList.remove('lazyload'); lazyImageObserver.unobserve(image); } }); }); lazyImages.forEach(image => { lazyImageObserver.observe(image); }); } else { // Fallback for browsers without IntersectionObserver support. lazyImages.forEach(image => { image.src = image.dataset.src; }); } }); ``` --- #### 三、其他性能优化建议 除了上述两种主要的技术外,还有许多其他的最佳实践可以帮助进一步改善前端性能: 1. **压缩资源** - 对 CSS、JavaScript 文件启用 Gzip/Brotli 压缩算法以减小传输体积。 2. **缓存机制** - 利用 Service Worker 设置离线缓存功能,使用户即使在网络不稳定的情况下也能访问部分内容。 3. **减少重绘与回流** - 尽量避免频繁修改 DOM 节点属性;批量更新样式表而非逐条设置规则。 4. **使用 CDN 加速** - 把公共资源托管到全球分布式的服务器上,缩短地理距离带来的延时影响。 5. **优先级加载** - 确保核心业务逻辑先被解析执行完毕后再处理次要任务。 --- ### 总结 综上所述,从前端框架层面出发采取诸如代码分割以及懒加载这样的措施对于提高网站运行效率具有重要意义。与此同时配合其它辅助性的改进举措共同作用,则可达到更佳的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值