web前端开发最佳实践-- 高性能的css

web前端开发最佳实践-- 高性能的css

提高网站性能方法：

• 利用缓存
• 动态加载
• 脚本压缩
• 图片压缩

规范的前端代码必须满足以下要求：

• 符合W3C制定的web标准
• 格式规范，主要包括命名，代码缩进，空格和空行以及注释的规范
• 高性能，主要体现在浏览器响应速度，包括网页的加载速度和页面的交互响应速度
• 高安全性

酷炫的技术只是浮云，良好的编码习惯和意识才是真功夫

前端代码的结构组织和文件的命名

• 

如何选择一个前端框架

项目的需求

• 项目数据格式
• 是否有AJAX

项目的特点

• 框架学习时间，运用时间

框架的特点

• 是否满足需求
• 性能如何
• 是否有足够的例子
• 是否持续更新中
• 是否收费

HTML命名规范及格式规范

• html的所有标签名和属性名都要小写
• id名称中关键词用“_”，class名称中关键词用"-"

css选择器包括：

• ID选择器，如：#reader_title{}
• 类选择器， 如：.reader-title{}
• 属性选择器， 如：a[href="http://www.w3.org"]{}
• 伪类和伪对象选择器， 如：:hover{}，::after{}
• 标签选择器 ，如：a{}
• 通配符选择器 ，如：body *{}

组合方式分为三种：

• 后代选择器 如：.reader .title{}
• 子选择器 ,，如：.reader>.title{}
• 相邻选择器 如：.reader+.title{}

css用来兼容ie浏览器的方法

目前市场上ie6已经很少了，但是ie7和ie8还存在一定份额，这两个版本的ie通常是需要进行兼容的主要版本

• 单独写兼容ie的css，如下：
  

w3c把尺寸单位 分为相对长度单位和绝对长度单位两种：

1. 相对长度单位分为：

• 字体相对单位 ：em，ex，ch，rem，注意：em是相对于字体的大小的
• 视窗相对单位： vw， vh，vmin，vmax

2. 绝对长度单位定义的长度是固定的，使用的是物理单位，如：cm，mm,in,px,pt,pc

css图片相关处理

• 设计不同大小的图片，而不是同一张图片在css中设置图片的尺寸
• 使用css Sprite图，将零散的背景图放在一个上面，再用css的background-position进行定位

css高性能实践

• 合并css类中相同的部分
• 压缩代码
• 避免使用@import，因为这个会阻止页面的并行下载

一些工具介绍

• js压缩工具，也可压缩css yui compressor
• js 代码规范检查工具 JSlint
• css 查询新特性的兼容情况 caniuse，也可用 css3clickchart
• 性能分析工具 YSlow
• 获取“雪碧图”的图片位置 spritecow
• 腾讯的“雪碧图”生成工具 sprite-generator
• 给样式加各浏览器前缀 cssFx，css Agent
  ** 借助css预处理技术，给css定义加浏览器前缀，如，使用时为
• 让浏览器兼容css3新特性 modernizr
• 一个如何更有效的使用html5的建议网站 html5please

一些好用插件

• 用Autoprefixer插件来给css样式添加各浏览器前缀