页面优化有哪些方法?

一、减少操作量

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

 

参考:页面优化有哪些方法

posted @ 2017-07-12 19:47  gq_orange  阅读(431)  评论(0编辑  收藏  举报