网站性能是一个重要的话题，因为它关系到用户体验和 SEO。在这篇文章中，我们将介绍 35 个优化技巧，这些技巧来自于 Yahoo User Interface (YUI) 团队。
1. 减少 HTTP 请求
减少页面上的 HTTP 请求可以显著提高页面加载速度。你可以通过合并多个文件、使用 CSS Sprites 或者使用内联 CSS 和 JavaScript 来实现。
-- -------------------- ---- -------
---- ---- --- ---
-------
---- -
---------- -----
-
--------
---- ---- -- -- ---
------- ----------------------------
------- ----------------------------2. 压缩 CSS 和 JavaScript
压缩 CSS 和 JavaScript 可以减少文件大小并提高加载速度。你可以使用压缩工具如 UglifyJS 和 YUI Compressor 来实现。
<!-- 压缩后的 JavaScript 文件 --> <script src="js/custom.min.js"></script> <!-- 压缩后的 CSS 文件 --> <link rel="stylesheet" href="css/custom.min.css">
3. 使用 CDN
使用 CDN 可以加快静态资源的加载速度。你可以使用 Google、Microsoft 或者其他流行的 CDN 提供商。
<!-- 使用 Google CDN 加载 jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
4. 使用 HTTP 缓存
使用 HTTP 缓存可以减少对服务器的请求，提高页面加载速度。你可以使用 Cache-Control 和 Expires 头来控制缓存。
<!-- 设置缓存过期时间为 1 小时 --> <meta http-equiv="Cache-Control" content="max-age=3600"> <meta http-equiv="Expires" content="Wed, 07 Apr 2023 18:00:00 GMT">
5. 压缩图片
压缩图片可以减小文件大小并提高页面加载速度。你可以使用图片编辑软件如 Photoshop 或者在线工具如 TinyPNG 来实现。
<!-- 压缩后的图片文件 --> <img src="images/logo.png" alt="My Website Logo">
6. 避免重定向
避免重定向可以减少请求次数和延迟。你可以通过直接使用正确的 URL 或者使用 URL 重写来避免重定向。
<!-- 使用正确的 URL --> <a href="https://www.example.com/">My Website</a> <!-- 使用 URL 重写 --> RewriteEngine On RewriteRule ^old-page.html$ new-page.html [L,R=301]
7. 使用 gzip 压缩
使用 gzip 压缩可以减小文件大小并提高页面加载速度。你可以在服务器上启用 gzip 压缩。
<!-- 启用 gzip 压缩 --> Content-Encoding: gzip
8. 使用异步 JavaScript
使用异步 JavaScript 可以避免阻塞页面加载，提高用户体验。你可以使用 defer 或者 async 属性来实现。
<!-- 使用 defer 属性 --> <script src="js/custom.js" defer></script> <!-- 使用 async 属性 --> <script src="js/custom.js" async></script>
9. 延迟加载 JavaScript
延迟加载 JavaScript 可以减少页面加载时间。你可以使用 LazyLoad 或者其他类似的库来实现。
<!-- 使用 LazyLoad 库 --> <script src="js/lazyload.min.js"></script> <script> var lazyLoad = new LazyLoad(); </script>
10. 避免使用 document.write()
避免使用 document.write() 可以防止页面加载被阻塞。你可以使用 DOM 操作或者其他方式来动态添加内容。
<!-- 动态添加内容 -->
<div id="myDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35439) ，转载请注明来源
[https://www.javascriptcn.com/post/35439](https://www.javascriptcn.com/post/35439)