大型网站中会有多个CSS文件,性能优化是不要的。主要有以下几个方法:

一:压缩样式表:

  通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载、解析和执行。对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。

二:合并多个CSS文件

  因为每一个文件就是一个HTTP请求,合并CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

三:使用link标签而不使用@inport

 <link rel="stylesheet" href="style.css">
@import url('style.css');

  link与@import区别:

  • link是XHTML标签,而@import是CSS提供的一种方式。link处理加载CSS文件还可以加载其他其他文件,还可以定义rel连接属性。而@import只能加载css
  • 加载顺序差别:当一个页面被加载的时候,link引入的css文件也会同时被加载。而@import引入的css文件只有在页面加载完成后才会加载。@import加载css会出现闪烁(页面开始没有样式)。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

页面中的CSS性能优化的更多相关文章

  1. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

  2. CSS性能优化探讨

    大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...

  3. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  4. Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析

    Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...

  5. vue中关于v-for性能优化---track-by属性

    vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...

  6. css性能优化

    1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏 ...

  7. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  8. 前端开发,页面加载速度性能优化,如何提高web页面加载速度

    一个网页访问速度的快慢,  不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...

  9. CSS性能优化的几个技巧

    前言 随着互联网发展至今,对于网站来说,性能显的越来越重要了,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.所以,我们需要重视与CSS相关的性能优化. 项目开发初期我们可能因 ...

随机推荐

  1. EasyUI DataGrid合并单元

    <table id="tt"></table> $('#tt').datagrid({     title:'Merge Cells',     iconC ...

  2. php if语句判定my查询是否为空

    <?php header("Content-type: text/html; charset=utf-8"); $username=$_GET['username']; $p ...

  3. WORD里怎样能做到局部“分栏”就是一页里有的分有的不分

    选中你要分的部分再分栏如果不想分的部分也被分了,那就可以选中不想分的那部分,选择“分栏”->“一栏” 转自:http://zhidao.baidu.com/question/9873268.ht ...

  4. Effective C++ 条款26

    尽可能延后变量定义式的出现时间 我们知道定义一个对象的时候有一个不争的事实,那就是分配内存.假设是我们自己定义的对象.程序运行过程中会调用类的构造函数和析构函数. 我们打个例如,假设天下雨了,你带把雨 ...

  5. Administrator privileges required for OLE Remote Procedure Call debugging: this feature will not work..

    VC++ 6.0单步调试(F10)出现警告框: 解决方法: 右键VC++ 6.0程序图标

  6. Laravel5.1 搭建博客 --上传文件及文件管理

    教程源自:Laravel学院 这一节 咱来说说上传文件的功能实现,我们会把上传的文件保存到项目本地,不仅上传 还有删除和预览功能. 1 配置 我们先从配置开始做起,先修改我们自己创建的 blog.ph ...

  7. iOS文件路径相关的方法

    文件路径相关的方法在NSPathUtilities中,主要是操作路径 获得一个路径 NSString *documents = [NSSearchPathForDirectoriesInDomains ...

  8. Eclipse配置Tomcat并运行

    这篇文章介绍Eclipse配置tomcat.我们假设已经安装好JDK并且配置好了JDK的环境变量.然后我们需要下载并安装Eclipse和tomcat:Eclipse:http://www.eclips ...

  9. ios 将p12文件转换为pem

    cd 到 文件所在目录 执行以下命令,生成ck.pem文件. openssl pkcs12 -in ck.p12 -out ck.pem -nodes

  10. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...