CSS简单性能优化

最新推荐文章于 2024-09-26 20:51:25 发布

前端星辰

最新推荐文章于 2024-09-26 20:51:25 发布

阅读量113

点赞数 1

文章标签：性能优化 css 服务器

本文链接：https://blog.csdn.net/m0_56976483/article/details/120950040

版权

这里看书加上一些我自己的理解和感悟

一、减少HTTP请求

在写css样式表的的时候,控制样式表的数量很重要,因为每次向服务器请求都是需要时间的，从请求到成功显示页面需要这么几个过程，先是本地浏览器向服务器发送请求，再是服务器接收到请求并在数据库中找到相关文件并发送过来，发送到本地浏览器还需要经过下载和渲染两个过程，如果样式表link标签写的太多，频繁的发送接收肯定会影响页面显示效率,这还不包括用cookie或者请求头部花费的时间

顺便说一下我对link标签中属性的理解，html好比一个水杯，css好比要装到水杯里的水，当我要装水时，首先需要知道水跟水杯是什么关系，水杯是用来装水的，水是被水杯装的，好比rel=“stylesheet”，rel在这里是relationship(关系)的意思，再者需要知道水在哪里，这就是href的作用，href是HypertextReference(超文本引用)的意思，然后就是怎么装的问题了，type=“text/css”官方的解释是在浏览器加载css样式表时告诉浏览器正在加载样式表，好让浏览器更好的做出反应，也就是告诉浏览器如何装水（即如何加载样式表）

<link rel="stylesheet" href="css/style.css" type="text/css">

有时候我们在用IDE(编辑器)自动生成样式表时，会看到注释的@import，这是一个属于css的加载方式，可以在style标签中写，也可以在链接外部css样式表中写，但是它与link有许多区别，import兼容性不好，只能适用于IE5以上，同时最重要的是import要等html加载完才开始加载，可能会导致页面闪烁，就是刚开始显示html结构突然一闪到了彩色页面，import的使用也会影响页面的效率，当你在外联样式表使用@import的时候，会造成连环加载的情况，先加载一个css时又去加载另一个css

<style>
  @import url(css/style.css);
</style>

二、压缩和缓存内容

css的压缩效率很高，原因是css的属性和值很多都是重复的，css文件压缩后会减少70%~80%，同时不需要自己来压缩，多数Web服务器会自动压缩线上资源

还有就是缓存，清除缓存有这样一个方式,通过javascript的方式，动态加上link标签并在地址后面加上随机的数字，也可以通过HTTP首部请求告诉浏览器让浏览器将缓存保存较长的一段时间

<!-- 结构内容 -->
<script>
    //清除缓存的方法
    document.write(
    /*  <link rel='stylesheet' type='text/css' href='style.css?v=  和 '> 是两个字符串，同时 
    new Date()是个数字*/

" <link rel='stylesheet' type='text/css' href='style.css?v= " + new Date().getTime() +     " '> "
      );
</script>

三、渲染阻塞

有src属性的标签必须等资源下载完后才能继续加载html网页，也就是你在在写着数学作业，突然发现今天要交英语作业，必须停下来先写英语作业才能继续写数学作业，因此script外部引用就是有src的标签，必须要等javascript下载完，才能继续html和css解析，这就是所谓“渲染阻塞”

原来主流的方法是在html页面底部结束标签</body>之前加载javascript

  <!-- 页面内容 -->
  <script src = "scripts/script.js">
</body>

现在比较现代的做法是在head中使用script标签，并添加async(异步)或defer(推迟，延期)属性

推荐使用defer属性，async属性会在脚本执行完毕后阻断html解析，而defer是在html解析完毕后再执行加载的脚本,还有就是这两个属性比较新兼容性较差，IE10和更早的版本不支持或不完全支持它们

<head>
  <!-- 异步加载，下载后立即执行>
  <script src = "scripts/script.js" async></script>
  <!-- 异步加载，但在html解析后执行>
  <script src = "scripts/script.js" defer></script>
</head>

参考文献

《精通CSS 高级Web标准解决方案》第三版

【英】安迪·巴德【瑞典】埃米尔·比约克隆德著

李松峰译

中国工信出版集团人民邮电出版社