Web性能优化：21种优化CSS，提速的方法

阿里云最近在做活动，低至20折，有兴趣的可以去看看：https://promotion.aliyun。com/...为保证提高可读性，本文采用意译而非直译。这是Web性能优化的第4部分。点击查看上一篇：Web性能优化：使用Webpack分离数据的正确方式Web性能优化：图片优化减少网站体积62%Web性能优化：缓存React事件以提高性能CSS必须经过相对复杂的pipeline，就像HTML和JavaScript一样，浏览器必须从服务器下载文件，解析它，并将其应用到DOM。由于优化程度高，这个过程通常非常快——对于不基于框架的小型Web项目，CSS通常只占总资源消耗的一小部分。框架打破了这种平衡。包括一个JavaScriptGUI堆栈，例如jQueryUI，以观察CSS、JS和HTML的大小增长。通常，开发人员是最后感受到压力的，当他们在强大的8核工作站后面使用T3互联网时，没有人关心速度，这会随着延迟或cpu受限的设备而改变。优化CSS需要多维方法。虽然可以使用各种技术简化手写代码，但手动检查框架代码效率低下。在这些情况下，使用自动简化会产生更好的结果。以下步骤将带我们进入CSS优化的世界。并非所有这些都可以直接应用于您的项目，但记住它们很重要。01.使用缩写使用缩写语句，如下所示的边距语句，可以从根本上减小CSS文件的大小。谷歌搜索CSSShorthand可以找到许多其他速记形式。p{顶部边距：1px；右边距：2px；底部边距：3px；左边距：4px；}p{边距：1px2px3px4px；}02。FindandremoveunusedCSSremoveunnecessaryPartialCSS,j会明显加快网页的加载速度。Google的Chrome浏览器具有开箱即用的此功能。只需转到View>Developer>DeveloperTools，在最近的构建中打开Sources选项卡，然后打开命令菜单。然后，选择ShowCoverage，在Coverage分析窗口中高亮显示当前页面未使用的代码，会让你大开眼界。打开Goog??leChrome开发工具，选择Conlse旁边的Coverage，可以看到未使用的CSS，点击对应项，高亮显示当前页面未使用的代码，睁眼一看：03。更方便的做法是不在逐行分析中导航必然方便。在谷歌浏览器中使用Audits可以快速帮我们分析、使用方法，打开开发者工具，点击Audits栏目，点击Runaudits。开始分析结果。04.注意这些问题请记住，CSS的自动分析总是会导致错误。用压缩后的CSS文件替换未压缩的CSS文件后，彻底测试整个站点——没有人知道优化器会犯什么错误。05.内联关键CSS加载外部样式表所花费的时间是由于延迟——因此，将最关键的代码放在头部。但是，请确保不要过度，并记住执行维护任务的人员也必须阅读代码。你好，世界！