浅谈前端优化

前端可以优化的点非常多，在这里做一个小结，知道了新的方法随时补充。本文主要从三个方面谈谈前端优化：
网络优化，页面优化，其他优化。

一.网络优化：

1.减少请求数

1. 小图片合并雪碧图(background-position实现)。
2. css，js文件合并
3. 减少重定向

2.减小请求资源大小

1. 发布前进行文件，图片压缩
2. 开启gzip压缩

3.缩短请求资源距离

1. 使用CDN，将静态资源分布到离用户最近的cache服务器内

4.缓存

1. HTTP缓存：强缓存，协商缓存
2. 离线存储：appCache
3. LocalStorage

5.使用HTTP2

1. 多路复用
2. HEAD压缩
3. 请求优先级
4. 服务器推送

二.页面优化

1.css代码优化

1. css选择符优化，提高选择符解析效率。(选择符解析时从右到左)
2. 使用外链css，放在页面头部。

2.JS代码优化

1. 减少作用域链查找。将作用域链深处的变量缓存到局部作用域。
2. 减少DOM的访问。缓存DOM
3. 改善循化性能。减少每次迭代的运算量和循环次数。
4. 使用事件代理。
5. 减少重排和重绘。批量更新元素减少重排次数，如设置类class统一更新样式。
6. 元素将触发页面多次重排的情况下：文档片段，隐藏元素，copy到脱离文档流的元素。
7. 使用外链js，放在页面尾部。

4.图片优化

1. 使用css、svg、canvas或iconfont代替图片。
2. 加载优化。(预加载，懒加载)

5.资源加载优化

1.延迟加载。

非首屏必须资源可延迟加载。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

1. 使用setTimeOut或setInterval进行加载延迟
2. 图片滚动加载lazyload（图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的尺寸很小的图片，只有图片在可视区域才去请求加载。）
3. 条件加载。满足某条件或触发某事件开始加载。(onload事件，DOM ready后加载)

2.预加载

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

1. link标签prefetch

2. onload+ajax

   http://www.alloyteam.com/2015/10/prefetching-preloading-prebrowsing/

三.其他方面的优化

1.安全性

1. XSS攻击
2. CSRF攻击
3. 使用https协议

2.兼容性

跨浏览器的处理 。

3.SEO

语义化标签