请选择 进入手机版 | 继续访问电脑版

优化CSS并加速网站的21种方法

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


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

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

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

01. 使用简写

1571448819576179.jpg

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

p { margin-top1px;

    margin-right2px;

    margin-bottom:  3px;

    margin-left4px; }

p { margin1px 2px 3px 4px; }

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

1571448824927414.jpg

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

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

1571448829289104.png

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

1571448835387382.png

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

04. 注意这些问题

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

<html>

  <head>

    <style>

      .blue{color:blue;}

    style>

    head>

  <body>

    <p class="blue">

      Hello, world!

    p>

06.允许反并行解析

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

@import url("a.css");

@import url("b.css");

@import url("c.css");

"stylesheet" href="a.css">

"stylesheet" href="b.css">

"stylesheet" href="c.css">

07. 用 CSS 替换图片

几年前,一套半透明的 png 在网站上创建半透明效果是司空见惯的。现在,CSS过 滤器提供了一种节省资源的替代方法。例如,以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本。

img {

    -webkit-filter: grayscale(100%);

    /* old safari */

    filter: grayscale(100%);

}

08.使用颜色快捷方式

常识告诉我们,六位数的颜色描述符是表达颜色最有效的方式。事实并非如此——在某些情况下,速记描述或颜色名称可以更短。

target { background-color#ffffff; }

target { background#fff; }


鲜花

握手

雷人

路过

鸡蛋
粉丝0 阅读316 回复0
上一篇:
下一篇:
网站建设要怎么做效果才会比较好?发布时间:2020-04-12

精彩阅读

阅读排行榜

关注官方微信

微信号:ssucp688

QQ:1484682328

全国服务热线:

400-123-456789

(工作日:周一至周五 9:00-16:00)
www.ymscz.com
1484682328@qq.com

Archiver-手机版-小黑屋- 源码素材站

Powered by 源码素材站 2001-2021   正在备案中