美文网首页
H5页面性能优化

H5页面性能优化

作者: 手指乐 | 来源:发表于2019-10-22 23:35 被阅读0次
  • 最少化请求个数
    手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个)
    如何减少请求次数:
  1. 合并图片(将若干个小图合并成一个大图、雪碧图)
  2. 合并JS/CSS文件
  • 减少单个文件大小
  1. 使用轻量的JS插件
  2. 优化CSS、删除未使用的规则
  3. 优化单张图片的大小
  4. 压缩CSS和JS、开启Gzip
  5. 缓存(CDN与浏览器缓存)
    cdn是服务器缓存机制
    前端缓存可以用DOM Storage ( sessionStorage 和 localStorage)、数据库(IndexedDB)等把服务器请求的数据缓存到本地,减少对服务器的访问
  • 页面性能分析工具
    chrome的开发者模式,可以跟踪页面加载的所有文件,调用的接口以及他们的加载顺序、大小等信息


相关文章

  • iOS中h5返回使用缓存的网络请求解决方案-后续(WKWebVi

    1.优化性能(将UIWebView替换为WKWebView) 由于h5在UIWebView中的性能真的不行,页面跳...

  • iOS性能优化之页面加载速率

    iOS性能优化之页面加载速率 iOS性能优化之页面加载速率

  • H5性能优化方案(转)

    H5性能优化方案 H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原...

  • 2017GMTC 移动Web优化

    移动Web优化专场主要讲在移动设备上如何优化H5,使得Web运行的性能能够尽可能的接近Natvie。 QQ移动页面...

  • 2020 前端 React 面试

    性能优化 性能优化,永远是面试的重点,性能优化对于 React 更加重要 在页面中使用了setTimout()、a...

  • web页面性能优化以及SEO

    web页面性能优化能够提高页面加载速度,提升用户体验度,基于三秒法则,每个网站都极力优化页面性能。 SEO(Sea...

  • H5移动端的性能优化

    H5 移动端的性能优化V1.0 一、渲染优化 二、css优化 三、加载优化 四、脚本执行优化

  • App页面性能优化 -- Core Animation篇

    写在前面 什么时候需要考虑页面性能问题 如何进行页面性能评估 如何具体实施性能优化 PS: 任何提前优化都是魔鬼 ...

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

  • H5性能优化方案

    H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就...

网友评论

      本文标题:H5页面性能优化

      本文链接:https://www.haomeiwen.com/subject/xethvctx.html