css优化
>>.li设置了display:inline-block,会有空隙,可在父元素ul下设置font-size:0
>>.ie下不支持margin:0 auto;
>>.hide() 和.css("display","none")有什么区别?
——目前理解,.hide()可以加时间
网络上有提及visibility:hidden,说这个是相当于透明的效果,高度什么的属性还是在的,还是有占位的,恩先上班
---------------------------------------------------------------
>>默认的样式表
每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,则按浏览器内置的样式表来渲染。
*FF下的浏览器默认样式可以通过:resource://gre-resources/html.css来查看。
所以网上有各种reset.css资源,重新定义标签样式,“覆盖”浏览器的CSS默认属性
---------------------------------------------------------------
>>关于CSS的命名
如果单纯的ul与.test PK,还真拿不定谁的渲染速度更快些。但是,一旦牵扯到层级与标签,100%确定,.test这种最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素,则#test ul{}速度是最快的,先id获取,再tag获取,这些可都是JavaScript内置的方法。但是,因为CSS的渲染方式是“从右往左”渲染的,就拿#test ul{}举例,先渲染页面上所有的ul标签,再去寻找id为test的元素
CSS命名,只要出现了层级,出现了标签,就是一次额外的渲染,层级越多,渲染的开销也就越大,这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”,“无标签”。
对于原则第一条“无ID”,其实与性能没有多大关系,只是一般ID都与JavaScript有奸情,如果再牵扯到CSS样式,如此复杂的三角关系,日后不好处理啊。
border:0这种属性,仍然会渲染边框样式。所以正确的写法应该是:border:none,避免无意义的渲染;能用.div 的,就尽量不要用.nav ul li a .div 这样的写法。
---------------------------------------------------------------
对于body,p,h1~6这些标签,本身的padding值就是0,所以只需要margin:0就可以了
因为ul,ol还要独立设置list-style样式,而常用的标签ul,ol列表元素有默认的padding值,所以较为高效的写法应该是:
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-style:none; margin:0; padding:0;}
---------------------------------------------------------------
推荐博客http://www.zhangxinxu.com/,不懂这算不算友情链接要不要经过博主旭哥同意不管了他写的博客就是好技术就是棒就想推荐旭哥看到要是不高兴了快来联系我丫高兴了更要联系我丫
css优化的更多相关文章
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- 关于js优化和css优化
css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- css优化,提高性能
CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint ...
- CSS优化压缩
顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...
- css优化篇
平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...
- PHP中,JS和CSS优化工具Minify的使用方法
为减少HTTP请求,我们往往需要合并和压缩多个JS和CSS文件,下面记录下网上关于实现这个功能的PHP源码以及开源项目Minify的使用方法 一.实现合并和压缩多个JS和CSS文件的代码请参考 1.一 ...
- js css优化-- 合并和压缩
在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...
- WEB前端性能优化之二——css优化
1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...
随机推荐
- C语言复习(1)
test.c #include <stdio.h> int main(){ printf("hello\n"); return 0; } 1.预处理阶段 由于在test ...
- c++ 静态持续变量
c++为静态存储持续性变量提供了3种链接性: 外部链接性(可在其他文件中访问) 内部链接性(只能在当前文件中访问) 无链接性(别有用心能在当前函数或代码中访问) 如果没有显示的初始化静态变量会把它设置 ...
- 前端科普文—为什么<!DOCTYPE> 不可或缺
When question comes 你一定在 HTML 页面最前面看到过这样一行代码(比如 百度): <!DOCTYPE html> 或者说类似这样的(比如 博客园-韩子迟 PS:博客 ...
- 深入学习JavaScript(二)
函数表达式和函数声明 函数声明 function 函数名(参数){函数体} 函数表达式 function 函数名(可选)(参数){函数体} 示例: function foo(){} // 声明,因为它 ...
- [BZOJ1579][Usaco2009 Feb]Revamping Trails 道路升级(二维最短路问题)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1579 分析: 设d[i][j]表示从1走到i.改了j条边的最短路径长度 如果设i相连的 ...
- Apache CXF实现WebService发布和调用
第一种方法:不用导入cxf jars 服务端: 1. 新建Web工程 2.新建接口和实现类.测试类 目录结构图如下: 接口代码: package com.cxf.spring.service; imp ...
- linux 常用命令总结
PS命令: 1.命令格式: ps[参数] 2.命令功能: 用来显示当前进程的状态 3.命令参数: a 显示所有进程 -a 显示同一终端下的所有程序 -A 显示所有进程 c 显示进程的真实名称 -N ...
- Beta版本冲刺Day6
会议讨论: 628:配置Mysql的时候遇到了问题,在修改数据库用户密码时无法修改,并且服务器好像连接不上去了,其他组员则继续他们的任务.601:将一些原来的界面进行了修改,修改成了更加美观的外形. ...
- SpringMVC学习--拦截器
简介 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 拦截器定义 定义拦截器,实现HandlerInterceptor接 ...
- js和jQuery的日常
让当前页面显示整个屏幕 - (iframe 从后台跳转到前台的时候容易多层嵌套)$(document).ready(function(){ if(window.top != window.self) ...