在现代 Web 开发中，前端性能优化是非常重要的。一个网站的性能表现可以影响用户体验、搜索引擎排名以及营销结果。在优化中，CSS 和 JavaScript 的加载及渲染是需要特别关注的，因为它们直接影响网页的交互及可视化效果。
优化 CSS 加载
合并和压缩 CSS 文件
当一个网站的 CSS 文件数目很多时，浏览器需要对每一个 CSS 文件都发出一个单独的 HTTP 请求，这会造成延迟和额外的网络流量。因此，将多个 CSS 文件合并成一个可以减少请求的次数，提高加载速度。
另外，对 CSS 文件进行压缩也可以减小文件大小，加快加载速度。通过删除注释、多余空格、删除冗余代码以及使用缩写等方法，可以减少文件的大小。可以使用工具如 CSSNano、YUI Compressor、Clean-CSS 等将 CSS 文件进行压缩。
按需加载
当页面中有大量的 CSS 代码时，可以将不必要的 CSS 文件进行按需加载。CSS 懒加载可以减少页面加载时所需的网络带宽和请求次数，从而优化性能。比如，可以通过 JavaScript 动态地创建 <link> 标签并将其插入到页面中，以达到按需加载 CSS 文件的效果。
内联样式
将关键样式内联到 HTML 文件中可以避免浏览器进行额外的请求，从而提升网站加载速度。通常情况下，将样式表注入页面的 <head> 中是最好的方式，但是如果有比较短的 CSS 样式，可以将其内联到 HTML 中，以减少 HTTP 请求的次数。
优化 JavaScript 加载
压缩和缩短 JavaScript 文件
和 CSS 文件一样，可以通过压缩和缩短 JavaScript 文件来提高加载速度。可以使用 UglifyJS、YUI Compressor、Google Closure Compiler 等工具将 JavaScript 文件进行压缩。这些工具的优点是可以删除不必要的空格、注释、缩短变量名等，从而减少文件的大小。
合并 JavaScript 文件
和 CSS 文件合并一样，将多个 JavaScript 文件合并成一个文件也可以减少 HTTP 请求的次数，从而提高加载速度。
延迟和异步加载
将 JavaScript 文件延迟和异步加载是优化页面加载速度的重要手段。延迟加载可以保证页面的 DOM 启动后再开始加载 JavaScript 文件，这可以让页面更快地可交互。另外，可以将 JavaScript 文件用 async 或 defer 属性新增到页面中，以实现异步加载。async 属性的特点是：页面的加载和渲染不会停止，即使 JavaScript 文件还在下载。相反，defer 属性的特点是，当页面完全加载后，才会执行下载的 JavaScript 文件。
将 JavaScript 代码置于底部
将 JavaScript 代码置于底部可以保证页面的 HTML 和 CSS 先被加载和渲染，从而提高网站的加载速度。如果将 JavaScript 放在 <head> 中，它会阻塞页面渲染，直到 JavaScript 文件被完全加载。
总结
本文主要介绍了优化 CSS 和 JavaScript 文件的方法。在实际操作中，需要综合考虑 CSS 和 JavaScript 文件的大小、合并程度、延迟加载、异步加载等多个方面，以最大化地优化网站性能。具体的操作方法可以使用工具和库，例如 Grunt、Gulp、Webpack、RequireJS 等工具，提高开发规模和效率。
示例代码
CSS 文件按需加载
// 创建新的 <link> 标记
var linkTag = document.createElement('link');
linkTag.rel = 'stylesheet';
linkTag.href = '/path/to/stylesheet.css';
// 在文档中插入 <link> 标记
document.getElementsByTagName('head')[0].appendChild(linkTag);JavaScript 延迟加载
<script type="text/javascript" src="example.js" defer></script>
JavaScript 异步加载
<script type="text/javascript" src="example.js" async></script>
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a61bbaadd4f0e0ffec7265