标签：
随着学习的深入，我们开始对Web前端这个职业的了解越来越多，以前只知道上网，看到五花八门的页面，各种炫酷的效果，却不知道这些
炫酷的页面和效果是怎样做出来的，学习了三个月的前端，知道了很多效果和页面的制作，但还远远不够.课堂上老师提出的问题，我们不能快
速并正确的说出答案，这起到了很好的警醒作用，让我们更加的努力，不能因为能做两个页面了就沾沾自喜。
优化性能：分为前端和后端的优化，其中各有不同之处。
前端：一.减少Http的请求
1 当一个网页中有很多图片，我们可以将所有的图片合并成一张图片，达到优化的效果。
2 一个网页如果要引入几个js文件或者几个CSS文件时，我们可以将所有的JS或者CSS文件合并成一个文件，将其压缩，让后 引入网页，可以达到优化的目的。
3 多使用字体图标。
4 减少使用flash文件，可用CSS动画代替。
5 使用延迟加载
二.http缓存：缓存太多也会影响浏览器的加载速度。
1 http 1.0
Expires:缓存时间
2 http 1.1
Cache-Control:max-age= 缓存时间 ；例：Cache-Control:max-age=3600（以秒为单位）缓存时间为1小时；
no-cache 无缓存
三.代码位置优化：CSS代码放在顶部，JS代码在底部
四.避免使用CSS表达式。
五.尽量使用外部样式表和外部JS.
六.代码和页面的压缩
1.JS代码的压缩
2.CSS代码的压缩
3.Gzip压缩
七.CSS代码优化
1.避免使用@import导入CSS
2.避免使用Filter（滤镜）
3.将CSS能缩写的用缩写
颜色值：例#000000，写成#000，#aabbcc写成#abc
4.CSS选择器的优化
a.匹配的规则越少越好。
b.减少使用属性选择器.例:input[button];
C.减少使用后代选择器。浏览器从右往左收缩选择器；
5.多利用CSS的继承属性：例font、color等
八.JS代码优化
1.使用多线程
a.使用定时器setTimeout、setInterval，异步。
b.使用Webwork技术（对浏览器支持不够好）。
c.使用Google开发的插件Gears（采用webwork技术，解决兼容性）。
2.内存的管理
a.使用delete删除对象的属性（只能删对象，不能删变量等）。
b.从dom节点中删除不必要的节点，用removeChild删除。
3.DOM优化
a.添加节点要使用appendChild或使用JQuery的append方法，这样不会影响其他节点。
b.批量操作DOM
b1.使用innerHTML开销小，速度快，同时让内存更加安全。
b2.如果循环增加节点，应该采用临时变量进行存放，再一次性使用innerHTML添加。
c.删除DOM节点
C1.删除节点前一定要先删除事件再删除节点，否则节点所占的内存不会释放。
D.为节点添加事件
D1.可以尽可能为父元素注册事件，由于浏览器有事件冒泡行为，因此就不需要为每个子元素添加事件.引 用变量。
4.图片的优化
a.减少图片的数量。
b.有些图片像素高。降低图像质量。
c.使用恰当的格式：jpg、gif、png。
5.图片Base64编码：将图片用Base64转成代码，数据头必须为：data:image/png(gif等);base64,
6.回流和重绘
a.影响了周围的框架的CSS样式改动会回流并且重绘。不影响周围框架的CSS改动不会回流但会重绘
b.可以通过改class来代替直接改变CSS属性内容，起到减少回流次数的作用。
后台：（了解）
工具：（进行代码的压缩、合并等功能）
标签：
原文地址：http://www.cnblogs.com/z5206808/p/4541770.html
