前端优化总结

前段时间阿里巴巴笔试，最后一题叫写下你所知道的所有前端优化方式。

当时时间不够，一时没想太全，如今终于还是签下了阿里，现在总结一下，做个记录。

水平有限，有错的地方，希望有人指证共同进步。。。。

网络加载层面的：


cdn节点加速

使用多个域名

css，js合并成一个文件减少请求数

gzip压缩，css，js的压缩

小图片的合并也就是css sprite

使用缓存，缓存js，css，图片等。js，css后面加上版本号用来进行升级

异步无阻塞加载js，增加同时下载js的数目。

按需加载，监听滚动条或其他事件。需要的时候再加载资源。

内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.

减少 DNS 查找 (Reduce DNS Lookups)，比如一些国外域名解析很慢，网站里最好不要包含这些有问题的域名。

对于 PNG 图片，考虑用 Pngcrush 或类似的工具进行优化。

使用get
         之所以用get性能更好的原因是有测试表明，即使数据很小，大部分浏览器（除了Firefox）在使用post时也会发送两个TCP的packet，所以性能上会有损失





浏览器渲染方面的：


js会阻塞渲染，对于 运行比较耗时的js使用settimeout处理，这样可以避免阻塞渲染

外部js的下载也会阻塞渲染，所以对于一些页面初始化不需要的js文件，使用异步加载方式在domready之后加载，或者放在页面最底部

使用bigrender，bigpipe方式来改造页面

dom的层级要少点，保持在3-4级

避免使用css express，太耗性能

css选择器是从右往左的，根据它可以做一些优化，减少冗余的选择标签，参见

https://developers.google.com/speed/docs/best-practices/rendering?hl=zh-CN#UseEfficientCSSSelectors

尽量减少重绘，跟回流






js执行方面的：


减少闭包的使用，不要嵌入太多

少用全局变量

将dom节点等使用局部变量缓存起来，减少查找

使用事件绑定机制

操作css时尽量使用css class少用 style.XXX

操作dom时，先拼接html然后一次性apend。减少回流跟重绘。