网站性能优化的实战指南 (网站性能优化方法 前端)

性能优化是应用程序开发中必不可少的工作之一。其主要目的是为用户提供无缝的速度体验。本文总结了一些可以快速实施的优化策略，不仅适用于 Web 应用，也适用于网站，但仅限于应用本身的优化，不包括逻辑和代码的优化。

资源最小化

资源（静态资源）压缩是指从 HTML、CSS 和 JavaScript 中删除不必要的冗余数据。这包括删除代码注释、格式、空白字符、未使用的代码、换行符等等。目前，前端技术已经提供了现成的工具来完成这些工作。

缩小 HTML、CSS 和 JavaScript 可以加快前端加载时间，因为它减少了需要从服务器请求的代码量。可以使用以下工具生成这些代码的优化版本：

• HTML: PageSpeedinsights、HTMLMinifier
• CSS: ChromeDevTools 中的覆盖率工具、YUICompressor
• JavaScript：JSMin、ChromeDevTools 中的覆盖率工具

延迟加载

延迟加载进一步缩短了前端加载时间。通过延迟加载，首先确保主要内容先加载，如页面框架、文本内容、首屏内容等。在实际应用中，可以对 JavaScript 进行延迟加载。HTML 中有两个相关的属性：async 和 defer。这两个属性都使脚本不会阻塞 DOM 的渲染。

• defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
• async 会使脚本脚本异步的加载并在允许的情况下执行，并且不会按着 script 在页面中的顺序来执行，而是谁先加载完谁执行。

图片懒加载

图片懒加载又称图片延时加载、惰性加载。即在用户需要看到图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度。通常将页面中的 img 标签属性 src 指向一张小尺寸图片或者为空，然后定义 data-src 属性指向真实的图片。当载入页面时，先把可视区域内的 img 标签的 data-src 属性值赋值给 src，然后增加页面滚动事件，把用户即将看到的图片加载。如果不想自己写代码，可以使用第三方脚本库，如 LazyLoad。现代浏览器也实现了懒加载的功能，即为需要实现懒加载的标签增加属性 loading=lazy，如：