前端性能优化

1、把样式表置于顶部：可以把已收到的内容尽可能的显示出来，改善了用户体验
2、避免使用css表达式：计算频率很大，（如果使用，尽可能的使用一次性的表达式，如第一次执行是给一个指定的样式，）影响性能
3、使用外部js和css:放在外部可以在浏览器中产生缓存，减少html文档的大小
4、消减js和css:所有的注释、不需要的空白（空格、字符、tab缩进）等都要去掉，（JSMin YUI Compressor用于css）
5、用link代替@import ，因为它相当于将css放在网页内容底部。
6、避免使用 CSS Filter（CSS滤镜）；因为每次都要计算，影响性能，这种滤镜的使用会导致图片在下载的时候，阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。 

尽量使用css 缩写，减少查询层级：.header .logo 要好于.header .top .logo; 减少查询范围：.header> li 与.header li; 避免Tag标签与class或id共存，如a.top butto#submit;删除重复的css;

7、尽量把脚本置于页面底部：可以提高页面的加载速度，利于用户体验，
8、剔除重复脚本：减少性能损失
9、较少DOM访问：缓存已经访问过的、避免使用js来修改页面布局

尽可能使用css动画
因为使用css动画比javascript驱动的效率高，而且还可以减少代码，很多的css动画使用GPU处理的，因此动画本身很流畅。

2、链接css,避免使用@import 可以是多种介质类型包含在一个css文件中。
3、控制DOM的大小：   使用：before,:after伪元素
延迟加载和呈现内容
使用时间委托，更简便的将节点转换成字符串存储。

10、使用data url 代替图片src:提升页面大小的效率，不仅仅是取决于使用精灵或者压缩代码，可以减少请求，提交页面加载速度
11、尽可能对Image和table设定宽高值，不需要通过集散元素大小后重绘，而且即便是图片损毁而没有展现，也不会进而破坏了页面本来定布局。
12、尽量不要存在空的src和alt,空的图片src仍然会使浏览器发送请求到服务器

13、把多张图片合成一张的好处(css sprites)：可以减少请求，加快网速，特别是实现鼠标浮上替换背景图的时候，效果更好，因为图片是一次性加载完成的，而且最好使用水平排列图片，垂直排列会增加文件大小。，把颜色较劲的组合在一起，可以降低颜色数；不要在图像之间留有较大空隙。因为对于用户代理来说它需要更少的内存来把图片解压为像素地图。

14、尽量避免使用css Expressions(CSS表达式) 如：background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ，CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

 

15、不要在html中缩放图片

不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片。

16、优化图像
当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化

• 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。可以使用imagemagick检查：
  identify -verbose image.gif
• 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
  convert image.gif image.png
• 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

17、精简javascript和css

尽量不要有空格，少些注释

18、避免404

404代表服务器没有找到资源，我们要尽量避免404,客户端发送一个请求，但是服务器却返回一个无用的结果，相当于浪费了时间。而且还阻塞了其他脚本的下载 ，而且下载下来的404页面，客户端还会将其当成javascript去解析。

19、使用getajax请求

浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。