有关CSS的性能优化

最新推荐文章于 2023-10-28 00:02:31 发布
最新推荐文章于 2023-10-28 00:02:31 发布
阅读量747 收藏
点赞数
分类专栏： Web性能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/116302694
版权

插件的使用

minifier
  • 下载包：
    npm install -g minifier
  • 使用：
    // 先打开CSS目录：
// 将styles.css缩小为styles.min.css
minify -o styles.min.css styles.css

CSS的优化

使用简写CSS：

  • 需要使用的简写属性是margin、padding、border、background和border-radius、font

  • background 属性：

    background-color: #000;
    background-image: url(images/bg.gif);
    background-repeat: no-repeat;
    background-position: top right;

    可以简写成一行声明：
    background: #000 url(images/bg.gif) no-repeat top right;

  • font 属性

    font-style: italic;
    font-weight: bold;
    font-size: .8em;
    line-height: 1.2;
    font-family: Arial, sans-serif;

    可以简写成下面的：
    font: italic bold .8em/1.2 Arial, sans-serif;

  • border 属性

    border-width: 1px;
    border-style: solid;
    border-color: #000;

    可以简写成：
    border: 1px solid #000;

使用CSS浅选择器：
  • 过于具体的选择器层次很深，而较浅的选择器则只指定匹配元素所需的内容。
    在这里插入图片描述
使用LESS和SASS预编译器：

在这里插入图片描述

  • 原始LESS/SASS代码中的嵌套使CSS选择器过于具体，会延长渲染时间，要尽可能少用这个功能。
减少重复：
  • 多个选择器指定相同的背景色或字体样式。可以通过最小化属性声明的次数，减少代码膨胀，并使CSS更易于维护
实现DRY：
  • 在可行的情况下减少CSS中的冗余
    在这里插入图片描述
  • 鼓励开发者选择描述内容性质而不是其表现形式的选择器名称
  • 使用csscss查找冗余
    安装Ruby
    使用gem安装csscss：gem install csscss
    在客户网站的style.css文件上运行：csscss styles.css -v --no-match-shorthand
    -v参数告诉程序要详细打印出匹配的规则。
    --no match-shorthand参数使程序不会将任何简写规则（如border-bottom）扩展为更明确的规则（如border-bottom-style样式）
    在这里插入图片描述
    在这里插入图片描述
分割CSS
  • 分割指的是根据特定页面模板拆分CSS样式
    在这里插入图片描述
  • 使用 Google Analytics可以分析访客流程图
响应式布局

在这里插入图片描述

  • 调整浏览器窗口的大小，直到布局中断时，就添加另一个临界点，并修复新临界点内的布局问题
设置视口标签

在这里插入图片描述

  • 设备应该以与设备屏幕相同的宽度渲染页面，并且页面的初始比例应该是100%
  • 验证网站的移动友好型
    如果你的网站不适合移动端，下一步将是向网站添加<meta> viewport标签，并使网站能够响应所有设备

对CSS进行新能调整：

@import和<link>比较
  • 避免使用 @import声明：因为@import指令与<link>标签不同，在下载整个样式表之前，不会处理样式表中的@import指令。这种行为会导致网页的总加载时间延迟
    @import 'custom.css';
  • @import串行请求：尽可能多地并行化HTTP请求，串行请求则相反，一个接一个地发生。在外部CSS文件中使用时，@import串行请求
  • @import 所加载的文件里还有@import，会导致一个接一个地串行请求
  • <link>并行请求：HTML 标签是加载CSS的最佳原生方法
  • <link>标签在下载HTML文件后就能发现引用，这与CSS文件中@import指令的行为不同，后者只有在下载样式表后才能发现对外部文件的引用。
  • 从技术上讲，你可以在HTML <style>标签中使用@import而不会影响性能，但是将此方法与<link>标签混合使用，或者在CSS文件中使用@import，将导致串行请求。在实践中，最好坚持使用标签，因为它的行为是可预测的，并且将把CSS导入HTML的任务降级。
在<head>中放置CSS
  • 你应该尽早在文档中放置对CSS的引用，最早可以加载CSS的位置是<head>标签。
  • 这样做可以缓解两个问题：无样式内容的闪烁问题，以及在加载时提高页面的渲染性能。
防止无样式内容闪烁
  • 将CSS保留在HTML <head>标签中的一个强有力的原因是，它可以防止用户看到你的网站处于无样式状态。这种现象被称为无样式内容闪烁

在这里插入图片描述

使用flexbox
  • 渲染内容时，flexbox往往是性能更优的解决方案
使用CSS过渡
  • CSS过渡对于包含简单线性动画，且动画要求不多的网站来说是不二之选
  • 在密集的DOM回流过程中减少了抖动，并且CSS过渡不会产生脚本开销。我的测试表明，CPU性能总体提高了22%
  • 你正在构建的网站可能需要更复杂的动画行为，此时，使用JavaScript解决方案——requestAnimationFrame()方法会获得更好的性能
  • 如果你的需求很简单，并且可以使用CSS实现高性能过渡，而不是通过JavaScript动画库向页面添加更多负载，那就请使用CSS过渡吧。
    在这里插入图片描述
使用will-change属性优化过渡
  • 告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。
  • 误用它会影响设备上资源的分配方式 ，你可能会尝试在所有DOM元素上激活此属性，以优化页面上的所有过渡
  • 这可能会对页面性能产生负面影响，特别是在分层很多和复杂的页面中。如果你使用了它，那就是让浏览器做好准备，以防页面上的每个元素都发生更改。这显然对性能不利
  • 使用will-change时要考虑的另一件事是：需要给属性足够的时间工作。以下是will-change属性的不良用法
    在这里插入图片描述
  • 浏览器没有时间来应用必要的优化。此时要想更好地使用该属性，则应当将其应用于父元素的：hover状态，以便浏览器可以预测将要发生的情况
    意思就是当鼠标移动上#siteHeader时，告诉里面的a标签：你的background-color将会改变哦
    在这里插入图片描述
  • 你可以预测元素的潜在更改，而不是假设它们会发生
理解关键CSS
  • 关键CSS，即折叠之上的内容
  • 非关键CSS，即折叠之下的内容
渲染阻塞
  • 渲染阻塞指的是阻止浏览器将内容绘制到屏幕的任何活动。
  • 使用@import指令或<link>标签加载外部CSS时，会发生渲染阻塞，尽管<link>标签是加载CSS的好方法，但它也会阻塞渲染
    在这里插入图片描述
  • 等待大约860毫秒，文档才开始绘制
内联
  • 可以将网站的CSS直接内联到
  • 中的<style>标签。这可以减少内容开始渲染前所需的时间
    虽然内联对于HTTP/1服务器端和客户端是一种合适的实践，但它不应该用于HTTP/2服务器。这个功能可以通过使用HTTP/2的服务器推送特性来实现，同时保持可缓存性。
关键CSS的原理
  • 加载首屏样式：将首屏样式存储到<style>标签中，并将其内联到HTML，剩下的样式将从外部文件加载
  • 如果样式是通过<link>标签加载的，那么在浏览器必须等待CSS时，渲染就会被阻塞。但是当样式内联到HTML中时，用户只需要等待加载HTML的过程，随后浏览器就能解析CSS，页面就能渲染
  • 缺点：会失去其可移植性，以后每次加载页面时都会出现无法有效缓存的情况。
  • 加载首屏以外内容的样式：
  • preload资源提示会在后台获取页面其余部分的样式。
  • 这样可以在不阻塞渲染的情况下加载CSS。CSS完成下载时，标签上的onload事件处理程序将被触发。下载完成后，rel属性的值就会从preload转换为stylesheet。这将<link>标签从资源提示更改为普通CSS引入。（意思就是浏览器会再次向服务器发出请求请求CSS资源，这样就会阻塞，首先改为preload，是异步，让它先去请求，之后请求成功时，改为stylesheet就可以使用CSS资源啦）
    在这里插入图片描述
实现关键CSS
  • VisualFold书签工具
    在这里插入图片描述
  • 使用preload资源提示异步加载CSS
    这段代码不仅异步加载了CSS，还考虑了那些禁用JavaScript的用户，通过传统方式从<noscript>标签（如最后一行所示）加载非关键CSS。这些用户将受到旧的CSS加载行为的阻塞渲染行为的影响，但他们不会得到无样式的页面。
    在这里插入图片描述
  • 0.1秒是用户感觉界面瞬间做出反应的极限
提升可维护性
  • 每次文档发生更改时，将关键CSS复制并粘贴到文档的<head>中是很低效的。而且内联polyfill脚本也很麻烦
    PHP的file_get_contents功能就非常适合此任务。此函数从磁盘读取文件，并允许将其内联到文档。使用该函数在文档的<head>中内联关键CSS的方法如
    在这里插入图片描述
Anita-Sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用的style.css
weixin_34341117的博客
11-07 4689
*{ -webkit-box-sizing:border-box; /* 设置盒模型为内减模式 */ -moz-box-sizing:border-box; box-sizing:border-box;}html{ font-family:"microsoft yahei",Helvetica,Arial,sans-serif; font-weight:normal; font-sty...
min.css----全世界最快的CSS框架
weixin_30802273的博客
08-21 640
有一个CSS框架，叫min.css，它号称是全世界最快的。难怪，它的代码就这一点。你看它的页面例子，像Bootstrap，但比后者轻多了，它只是一些CSS样式，没有JavaScript代码。min.css的组件有：基本代码(必须)、标题、按钮、表单、导航栏、表格、图标、网格、消息框。对，这就是min.css的全部。1.基本代码 body,textarea,input,selec...
服务器上文件不能编辑器,为什么在wp的主题编辑器上编辑style.min.css时不起作用，但是在服务器上的文件管理器中却起作用了？...
weixin_32953371的博客
08-13 288
我遇到了一个问题-将我自己的CSS代码添加到WP主题和插件无法正常工作。我为WP使用了插件Contact Form 7, 并且想向其中添加自己的CSS。为此, 我在Chrome DevTools(键盘上的F11)上检查了CSS文件, 发现它名为style.min.css, 实际上, 当我在DevTools上对其进行编辑时, 我得到了结果。然后, 我在WP主题编辑器上找到了该文件, 但是当我进行更改...
style.min.css
07-04
使用v-charts组件时，需要在css文件加载的css文件。
CSS响应式布局
页面仔小杨
03-04 229
CSS布局 https://www.bilibili.com/video/BV1ov411k7sm http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 什么是媒体查询 概念：为不同尺寸的屏幕设定不同的css样式 示例： <style> .box { width: 200px; height: 200px; } @media screen and (min-device-width:
html面试题：关于在h5中style标签所处位置带来的影响
lalala_dxf的博客
02-07 1467
前面两者样式使用的位置基本是固定的，第三个嵌入式的位置可以随意插入到文档的任意位置，页面都能够将样式渲染出来。你可以将style标签放在head标签中，也可以将之放到body标签之内任何一个位置，也可以放在body结束标签之后，html结束标签之前，甚至可以放在html结束标签之后。，假如你把style标签放置在body标签中，或者放到html结束标签之后，当文档加载解析到了style标签的时候，发现他给页面的某些标签设置了样式，于是浏览器。，在这个过程中，时间明显的浪费了，这也就导致页面的加载速度变慢。
精通CSS-添加样式
qq_36973122的博客
08-16 2707
精通CSS-添加样式
wordpress后台加载速度缓慢解决办法
小问题大疑惑
02-05 1062
1、gravatar用户头像 加载的时间长；很多朋友使用的WordPress主题，基本都是使用的gravatar头像，很遗憾的是，目前gravatar基本被墙光了。禁用gravatar头像办法如下： 后台-设置-评论-去掉勾选显示Avatars 参考：https://developer.aliyun.com/article/532834 2.load-scripts.php和 load-styles.php 通过谷歌开发者工具分析是load-scripts.php和 load-styles.php 这
CSS性能优化提高css性能的方法
09-27
主要介绍了CSS性能优化提高css性能的方法，不规范的css会导致很多性能问题，所以学习掌握css性能优化技巧是非常必要的，对css性能优化知识感兴趣的朋友一起学习吧
对css性能优化的一点看法
09-25
怎么会突然想起谈css与性能优化呢？其实这个问题我已经想了很久了，想写，但是也不知道从何写起，今天就简单的说一下，近段使用通过使用page Speed，对css性能优化的一点看法吧！
CSS 网站性能优化笔记
09-25
**CSS网站性能优化笔记** 网站性能优化是提升用户体验的关键步骤之一，CSS作为构建网页样式的重要工具，其优化能显著提高页面加载速度。以下是一些针对CSS的优化策略： 1. **去除空白区域**：在CSS代码中，空格、...
css性能优化的方法
最新发布
子玉的博客
10-28 719
6. 避免使用过多的浮动：浮动元素会影响其他元素的布局和渲染，如果使用过多的浮动，会导致页面的渲染速度变慢。5. 避免使用@import：@import会阻塞页面的加载，并且会增加页面的请求次数。1. 减少样式表数量和大小：通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小，从而减少网络请求和提高加载速度。在需要使用样式的地方，尽可能使用ID选择器代替类选择器。2. 使用简洁的选择器：使用尽可能简洁的选择器来匹配元素，避免使用过于复杂的选择器，可以减少匹配时间和提高渲染速度。
【CSS性能优化技巧】
AmyGeng123的博客
11-09 1007
css性能优化方法: 1、压缩css，减少文件体积；2、使用link引入css文件；3、合理设计CSS布局，注意复用样式，减少渲染上花的时间；4、少用“*”选择器；5、慎用浮动、定位等高性能属性；6、尽量减少页面重排、重绘；7、属性值为0时，不加单位等等。
global.min.css 页面通用样式
weixin_34408717的博客
03-22 408
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML中css和js链接版本号的用途
modabobo
08-29 165
背景 在搜索引擎中搜索关键字.htaccess缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从缓存中获取css、js等静态文件，而不必从你的服务器再次下载读取，这样在一定程度上加快了网站的打开速度，又可以节约一下你的服务器流量。 问题 最近在修改更新我的IT-Homer博客时，遇到了一...
怎么进行css性能优化
weixin_67002441的博客
07-05 401
使用合适的CSS预处理器：CSS预处理器（如Sass或Less）可以提供更强大和可维护的CSS编写方式。预处理器提供了变量、嵌套、混合等功能，但在编译为最终的CSS文件时，要确保生成的CSS代码是简洁且高效的。压缩和合并CSS文件：通过消除空格、注释和无用的代码，减少CSS文件的尺寸。使用适当的选择器权重：选择器的权重决定了CSS规则的优先级。使用媒体查询进行响应式设计：通过在不同的屏幕尺寸上应用不同的CSS样式，可以减少不必要的样式渲染和布局计算。避免使用昂贵的CSS属性：一些CSS属性（如。
如果要做优化，CSS提高性能的方法有哪些？
CRMEB小程序商城的博客
03-17 1881
一、前言 每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验 因此，在整个产品研发过程中，css性能优化同样需要贯穿全程 二、实现方式 实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联首屏关键CSS 在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体
5个css性能优化工具
05-19
以下是5个常用的CSS性能优化工具： 1. PurifyCSS：帮助你剔除未使用的CSS代码，从而减少文件大小和加载时间。 2. Critical CSS：提取关键CSS并将其嵌入HTML文档中，以便更快地呈现页面上部分内容。 3. CSSNano：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值