Web性能优化：21种优化CSS和加快网站速度的方法

发布时间：2019-03-19 02:38 所属栏目：21 来源：前端小智

导读：这是 Web 性能优化的第 4 篇，上一篇在下面看点击查看： Web 性能优化：使用 Webpack 分离数据的正确方法 Web 性能优化：图片优化让网站大小减少 62% Web 性能优化：缓存 React 事件来提高性能 CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一

这是 Web 性能优化的第 4 篇，上一篇在下面看点击查看：

Web 性能优化：使用 Webpack 分离数据的正确方法
Web 性能优化：图片优化让网站大小减少 62%
Web 性能优化：缓存 React 事件来提高性能

CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。

框架打破了这种平衡。包括一个 JavaScript GUI 堆栈，如 jQuery UI，可以观察 CSS, JS 和 HTML大小逐渐的变大。通常，开发人员最后才会感到压力，当他们用一个强大的 8 核工作站后面，使用 T3 internet 时，没有人关心速度，这随着延迟或 cpu 受限设备的出现而改变。

优化CSS需要一个多维的方法。虽然手工编写的代码可以使用各种技术进行简化，但是手工检查框架代码是低效的。在这些情况下，使用自动化的简化会产生更好的结果。

下面的步骤将带我们进入 CSS 优化的世界。并不是每一个都可以直接应用到你的项目中，但是一定要记住它们。

01. 使用简写

使用缩写语句，如下面所示的 margin 声明，可以从根本上减小 CSS 文件的大小。在 google 上搜索 CSS Shorthand 可以找到许多其他的速记形式。

p { margin-top: 1px;  
    margin-right: 2px;  
    margin-bottom:  3px;  
    margin-left: 4px; }  
p { margin: 1px 2px 3px 4px; }

02. 查找并删除未使用的 CSS

删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码，让您大开眼界。

打开谷歌浏览器开发都工具，在 Conlse 旁边更多选择 Coverage，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码，让你大开眼界：

03. 以更便捷的方式做到这一点

在逐行分析中导航并不一定便捷，使用谷歌浏览器的 Audits 就可以快速帮我们分析，，使用方式，打开开发者工具，点击 Audits 栏位，点击 Run audits 后就开始分析结果。

04. 注意这些问题

请记住，对 CSS 的自动分析总是会导致错误。用压缩后的 CSS 文件替换未压缩CSS文件之后，对整个网站进行彻底的测试——没有人知道优化器会导致什么错误。

05.内联关键 CSS

加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在 head 中。但是，请确保不要做得过火，记住，执行维护任务的人员也必须读取代码。

<html>  
  <head>  
    <style>  
      .blue{color:blue;}  
    </style>  
    </head>  
  <body>  
    <div class="blue">  
      Hello, world!  
    </div>

06.允许反并行解析

@import 将 CSS 样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于 @import 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列 <link> 标记，浏览器可以立即获取这些标记。

@import url("a.css");  
@import url("b.css");  
@import url("c.css");  
<link rel="stylesheet" href="a.css">  
<link rel="stylesheet" href="b.css">  
<link rel="stylesheet" href="c.css">

07. 用 CSS 替换图片

（编辑：ASP站长网）