让企业赢在全网营销时代
当前位置: 主页 > 建站知识 > 网页设计 >
联系我们
电话咨询:15066004201
E-mail:727661179@qq.com
地址: 山东省东营市西城区

网站设计时如何改进CSS的呈现速度

作者:admin 点击量:次 2018-09-07

网站设计有没有想过网站的CSS的大小?可能会降低页面的加载速度,拖延页面呈现。 虽然CSS不是网站中最大的资产类型,但它是浏览器发现的第一个。因为浏览器直到CSS被下载和解析后,才渲染页面,所以css必须尽可能的精简。 

网站设计这里有几个技巧来帮助你解决这方面的问题

01.在网站设计时使用浅选择器

CSS方面使用浅选择器可以修剪大样式的千字节。比如在网站设计时以下情况:

nav ul li.nav-item

这可以更简洁地表达:

.nav-item

除了帮助保持CSS的细节外,浏览器还可以更快地渲染由浅选择器定向的元素。浏览器从右到左读取选择器。选择器越深,浏览器渲染并重新渲染这些选择器应用的元素所需的时间越长。对于经常回流的复杂DOM,短选择器也可以减少倾斜。

理想情况下,您希望选择器尽可能的浅,但这并不意味着您应该将所有内容都进行简化。有时您需要额外的特性来扩展组件。

02.使用CSS速记属性

简化不必要的CSS代码这似乎是常识你会发现在编译中不必要地使用的频率非常大。以下是使用中的一些属性示例:

font-size: 1.5rem;line-height: 1.618;font-family: "Arial", "Helvetica", sans-serif;

对于这CSS!让我们整理一下:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

字体速记属性可以凝结几个声明编辑层方便的一行,这样在网站设计占用空间少得多

在上面所示的例子中,速记使用的空间比平常的css编译方法了近40%。

当然,字体代码属性不是您可以使用的唯一速记。例如边缘顶部边缘权限,我们都可以使用速记方法 

填充属性的工作方式相同。为了更多的方法来清理您的CSS,我们可以参考一些简易属性列表。

如果我们需要在级联中进一步覆盖一个值,该怎么办?例如,假设您有一个标题元素,需要更改其较大显示器的字体大小。 

在这种情况下,您可以使用更具体的font-size属性:

h1{

    font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;}@media (min-width: 60rem){

    h1{

        font-size: 2rem;

    }}

这样不仅方便,还增加了组件的灵活性。如果底层字体属性的任何其他部分被修改,这些属性更改将会渗透到更高一层的显示。非常适用于组件覆盖

03.使用预加载资源提示

预加载资源的提示可以提高给浏览器加载你的网站的CSS。该预加载资源的提示告诉浏览器启动的早期获取的代码

例如网站设计时可以将其设置为HTML中的<link>标记:

<link rel="preload" href="/css/styles.css" as="style">

或者作为服务器配置中的HTTP标头:

Link: </css/styles.css>; rel=preload; as=style

在这两种情况下,preload可以让浏览器开始加载/css/styles.css。在HTTP头中使用预加载优先属性可以使浏览器提早加载css,而不是稍后在主体中进行响应

HTTP头中使用预加载的另一个原因是它可以在大多数HTTP / 2启动服务器的事件推送。服务器推送是一种机制,通过这种方法信息在内容请求时被抢先推送到客户端,并提供类似于内联CSS的性能优势。

服务器推送在HTTP / 1上不可用。但是,在HTTP / 1环境中使用预加载仍可以提高性能。

04.用剔除冗余软件来处理css

有些软件或网站可以检查CSS是否存在规则重复冗余代码当然其中大部分是需要收费的,例如我们之前在网站设计时使用的CSS优化

可以检查您的CSS冗余如下: 

csscss -v styles.css

此命令列出哪些选择器共享您可以取消复制以节省空间的规则:

{h1} AND {p} share 3 declarations

  - color: #000

  - line-height: 1.618

  - margin: 0 0 1.5rem

您可以在一个选择器下剔除重复规则: 

h1, p{

    color: #000;

    line-height: 1.618;

    margin: 0 0 1.5rem;}

我们在设计大型的网站时利用这些功能可以节省很多空间