页面优化有哪些方法?

一、减少操作量

    1. 尽量减少 HTTP 请求

  • 合并文件,比如把多个 CSS 文件合成一个; 
  • CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位; 

    2. 不要在 HTML 中使用缩放图片

  • 缩放图片并没有减少图片的容量,只是控制了图片的大小。

    3. Image压缩

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

    4. 减少对DOM的操作

  • 减少对DOM的操作,减少页面的重绘。

二、提前做加载操作
    1. 对域名进行预解析
        例如京东的做法
        <link rel="dns-prefetch" href="//misc.360buyimg.com" />  
    2. 预载入组件或延迟载入组件

  • 把 CSS 放到代码页上端 

    3. CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
    4. 使用 new Image对象,对图片进行缓存


三、提升并行加载
    切分组件到多个域 ,提升服务器的响应能力

四、JavaScript和CSS优化
    1. 从页面中剥离 JavaScript 与 CSS

  • 剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

    2. 精简 JavaScript 与 CSS 

  • 使用工具压缩JavaScript和CSS文件

    3. 脚本放到 HTML 代码页底部

  • 减少对页面的阻塞。

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


--------------------- 
原文:https://blog.csdn.net/lxcao/article/details/52948324 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值