前端进行网站性能优化的方法有哪些?
① 减少HTTP请求
合并CSS和JS文件、使用CSS精灵图合并图片、使用内联SVG代替图片等等。
② 优化文件大小
压缩图片文件、使用适当的图片格式、压缩JS和CSS文件等等。
③ 使用CDN
将静态资源(图片、CSS、JS)等文件放置到CDN上,减少服务器的负载。
④ 减少重绘和重排
尽量减少DOM操作,减少使用会导致重排的CSS属性,如width、height等等。
⑤ 注意DOM结构
将CSS样式表放在页面顶部优先加载、减少CSS表达式的使用、优先使用<link>加载外部样式。
将<script>放到页面底部、非关键的JS文件使用async属性进行异步加载、使用defer属性进行延迟加载、减少JS对DOM的操作。
⑥ 预加载和预取资源
使用<link rel="preload">在页面加载时提前加载关键资源(如字体、CSS、JavaScript、图像等)。
使用<link rel="prefetch">在当前页面加载完成后,利用空闲时间预取未来可能需要的资源。
⑦ 启用缓存
设置适当的缓存头(如Cache-Control、Expires),让浏览器缓存静态资源,减少重复加载。
使用Service Workers缓存资源,提高离线访问和重复访问的性能。