-
代码切割(Code Splitting):这是一种将你的代码拆分为多个较小的包的技术,然后按需加载或并行加载这些包。这可以显著减少首次页面加载时所需的时间。
-
延迟加载(Lazy Loading):这种技术是指只当内容需要被展示时,才去加载它。比如,可以延迟载入图片直到用户滚动到它们的位置。这也可以减少首次页面加载的时间。
-
预加载(Preloading):预加载允许浏览器预先获取你指定的资源,这可以加快你的页面加载速度。关键资源(如关键CSS、关键图片)可以在
link
标签使用rel-prepend
属性进行预加载。 -
预渲染(Prerendering):通过预渲染,浏览器可以在用户需求之前,静默地预先加载页面。这样当用户点击页面链接时,页面能即刻展示,而无需等待加载。
-
避免不必要的重流和重绘:DOM的改变会导致浏览器重新渲染部分或全部的UI,尽量通过改变
class
而非直接操作样式,合理使用documentFragment
,避免频繁的DOM操作。 -
压缩和优化你的图片:用适合的格式保存图片,并确保每张图片都已经压缩。使用新的图片格式,例如 WebP,可以进一步减少图片的大小。
-
利用 CDN(内容分发网络):CDN将你的内容分发到全球的服务器网络,无论用户位于何处,都可以从最接近他们的服务器获取内容,从而减少延迟。
代码示例:
1)代码切割
实例配置 Webpack,使其将代码分割到不同的包中。只有在用户实际需要特定功能的时候,才会加载对应的包。// 例如在一个React项目中 // 不使用代码切割,所有代码都在一个包中 import DetailPage from './DetailPage'; // 使用代码切割,当用户访问DetailPage时,才加载对应的代码 const DetailPage = React.lazy(() => import('./DetailPage'));
2)懒加载
对于网页中不立即需要的资源(如图像),你可以延迟加载这些资源。
// 例如在一个图片滚动列表中 // 同样也适用于异步数据段,比如用户需要滚动到底部才加载的评论等 window.addEventListener('scroll', lazyload); function lazyload() { var images = document.querySelectorAll('.lazy'); images.forEach(img => { if(img.getBoundingClientRect().top < window.innerHeight) { let src = img.getAttribute('data-src'); img.setAttribute('src', src); img.classList.remove('lazy'); } }); }
3)预加载
对于你知道用户将需要的资源(如特定的JS模块或CSS文件),可以提前加载。<head> <!-- 为主要的CSS文件和JavaScript文件添加preload属性 --> <link rel="preload" href="main.css" as="style"> <link rel="preload" href="main.js" as="script"> </head>