Web前端面试指导 四十七 页面优化有哪些方法

               

题目点评

页面优化的方法非常多，最好能够对这些优化方案进行分类，这些方案最好能够结合实际开发遇到的问题来表述。

优化的方案

一、减少操作量

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实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。