浅谈页面性能优化

网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。

        不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？

        一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。

一、减少操作量

1. 尽量减少 HTTP请求
1) 合并文件，比如把多个CSS 文件合成一个； 
2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位； 

2.  不要在HTML 中使用缩放图片
缩放图片并没有减少图片的容量，只是控制了图片的大小。

3. Image压缩
使用工具对图片进行压缩，保证质量的同时减少了图片的大小。

4. 减少对DOM的操作
减少对DOM的操作，减少页面的重绘。

二、提前做加载操作

1. 对域名进行预解析
例如京东的做法
<link rel="dns-prefetch" href="//misc.360buyimg.com" />  

2. 预载入组件或延迟载入组件

3. 把 CSS放到代码页上端 
CSS 放到最顶部，浏览器能够有针对性的对HTML 页面从顶到下进行解析和渲染。

4. 使用 new Image对象，对图片进行缓存

三、提升并行加载

切分组件到多个域，提升服务器的响应能力

四、JavaScript和CSS优化

1. 从页面中剥离 JavaScript与 CSS
剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。

2. 精简 JavaScript与 CSS 
使用工具压缩JavaScript和CSS文件

3. 脚本放到 HTML代码页底部
减少对页面的阻塞。

五、异步加载

  使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。