页面中的CSS性能优化
大型网站中会有多个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性能优化的更多相关文章
- CSS性能优化的8个技巧
本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...
- CSS性能优化探讨
大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...
- 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理
第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...
- Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析
Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...
- vue中关于v-for性能优化---track-by属性
vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...
- css性能优化
1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 前端开发,页面加载速度性能优化,如何提高web页面加载速度
一个网页访问速度的快慢, 不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...
- CSS性能优化的几个技巧
前言 随着互联网发展至今,对于网站来说,性能显的越来越重要了,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.所以,我们需要重视与CSS相关的性能优化. 项目开发初期我们可能因 ...
随机推荐
- python 神经网络实例
#http://python.jobbole.com/82758/ # import numpy as np # # # # sigmoid function # def nonlin(x, deri ...
- JVM与外界通过数据通道进行数据交换
使用I/O流访问file中的内容. JVM与外界通过数据通道进行数据交换. 分类: 按流分为输入流和输出流: 按传输单位分为字节流和字符流: 还可以分为节点流和过滤流. 节点流:负责数据源和程序之间建 ...
- ]flexslider 中文文档 使用教程 参数手册
[原创]flexslider 中文文档 使用教程 参数手册 要改前人用的flexslider功能,但苦于找不到详细的文档教程,折磨了好久……(所以我才说不爱乱用插件) 为了福利下之后也苦于这个问题 ...
- 【BZOJ】1676: [Usaco2005 Feb]Feed Accounting 饲料计算(差分)
http://www.lydsy.com/JudgeOnline/problem.php?id=1676 太水的一题了.. 差分直接搞. #include <cstdio> #includ ...
- ACM计算几何模板——圆和球
#include <iostream> #include <cmath> using namespace std; #define eps 1e-10 /********** ...
- Excel随机生成数据
CONCATENATE函数是一个文本连接函数,非常简单,和&的效果一样. CONCATENATE是一个文本连接函数 语法:CONCATENATE(text1,text2,text3...... ...
- 修改Android 界面颜色
btnGetCode.setTextColor(getResources().getColor(R.color.dark_white)); Color.parseColor("#1a71d4 ...
- XDocument简单入门
[+] 1.什么是XML? 2.XDocument和XmlDocument的区别? 3.XDocument 4.XmlDocument 5.LINQ to XML 6.XML序列化与反序列化 因为 ...
- Hadoop1.2.1 启停的Shell 脚本分析
停止shell脚本以此类推.
- js 高程 函数节流 throttle() 分析与优化
在 js 高程 22.3.3章节 里看到了 函数节流 的概念,觉得给出的代码可以优化,并且概念理解可以清晰些,所以总结如下: 先看 函数节流 的定义,书上原话(斜体表示): 产生原因/适用场景: 浏览 ...