前端优化随笔

1.引用资源部分优化：

　　·合并引用的css、javascript，并使用压缩模式，这个很好理解吧；

　　·合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图；

　　·使用按需加载，scroll加载的处理方式；

　　·服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来，一般对纯文本内容可压缩到原大小的40%；

　　·异步加载资源，和document构建不相冲突，defer、async的设置；

　　·减少http请求，全局使用，缓存一切可缓存的资源文件；

　　·外联式引用资源，主要是为了页面缓存考虑；

　　·资源文件放在同一个服务器，避免调用第三方资源，万一挂了那(常见的是各种不靠谱的CDN，泪目中)；

　　·dns-prefetch，把这个放这里不知道合适不合适，这个应该算是http请求方面的优化，不知道什么是dns-prefetch是什么的自行谷歌之，俗名叫dns预获取，主要作用是减少请求次数和提前对dns预获取(废话)，什么意思那，简单的说你的站点域名是x.com，而你网站上一些的图片等资源是放在img.x.com上，每次请求会涉及到dns解析问题，对于性能要求极致的站点这个处理就必不可少，在head中加入<link rel="dns-prefetch" href="//img.x.com">就能达到上述的效果，需要注意，虽然dns-prefetch能够加快网页解析速度，但是也不能随便滥用，因为多页面重复DNS预解析会增加重复DNS查询的次数；

2.css&javascript内容优化：

　　·css引用写在头部，javascript引用写在底部、使用异步加载，避免渲染等待；

　　·避免在页面标签中写样式；

　　·不过度引用字体，字体大小的问题；

　　·值为0的时候不用单位；

　　·使用标准的浏览器前缀，或者使用类似scss中的@include的写法，定义详细再引用；

　　·不滥用页面浮动；

　　·避免复杂dom 循环操作；

　　·id的工作效率比class高，但我个人不喜欢写很多id(dom多了不爽)，看情况操作；

　　·使用事件代理代替绑定事件

　3.Dom渲染优化：

　　·使用简洁的html标签结构，避免复杂嵌套；

　　·使用css3书写动画，减少jsdom操作；

　　·适当使用svg、canvas；

　　·避免最下级元素书写页面class