在网站设计时有没有想过网站的CSS的大小?可能会降低页面的加载速度,拖延页面呈现。 虽然CSS不是网站中最大的资产类型,但它是浏览器发现的第一个。因为浏览器直到CSS被下载和解析后,才会渲染页面,所以css必须尽可能的精简。
在网站设计时这里有几个技巧来帮助你解决这方面的问题。
在CSS方面使用浅选择器可以修剪大样式的千字节。比如在网站设计时以下情况:
nav ul li.nav-item
这可以更简洁地表达:
.nav-item
除了帮助保持CSS的细节外,浏览器还可以更快地渲染由浅选择器定向的元素。浏览器从右到左读取选择器。选择器越深,浏览器渲染并重新渲染这些选择器应用的元素所需的时间越长。对于经常回流的复杂DOM,短选择器也可以减少倾斜。
在理想情况下,您希望选择器尽可能的浅,但这并不意味着您应该将所有内容都进行简化。有时您需要额外的特性来扩展组件。
简化不必要的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;
}}
这样不仅方便,还增加了组件的灵活性。如果底层字体属性的任何其他部分被修改,这些属性更改将会渗透到更高一层的显示中。非常适用于组件覆盖。
预加载资源的提示可以提高给浏览器加载你的网站的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环境中使用预加载仍可以提高性能。
有些软件或网站可以检查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;}
我们在设计大型的网站时利用这些功能可以节省很多空间。
上一篇:郑州网站建设|什么是加速移动页面
下一篇:网站建设时图片无法加载如何解决