专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端h5性能优化 h5页面性能优化

ins518 2024-10-11 16:38:54 技术文章 12 ℃ 0 评论

为什么需要优化

现在PC的性能绝大多数情况是没问题的，但移动端性能就比较乱了，各种兼容性能的问题，因此对移动端 H5 页面进行性能优化是非常重要的。

移动端的页面本身渲染性能差于混合型开发的APP，不关注性能优化，将极大的影响网页的体验。

用户的感受

当用户能够在1-2秒内打开H5页面，看到页面的展示，或者开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许有一部分用户会退出重新进入，但更多的用户会直接放弃使用。

优化方案

首屏加载

当页面资源较多时，用户从点击开始加载页面，用户第一感觉是什么时候「加载完成」？正常情况下，应该是在能看到屏幕范围内，页面内容完全展示，如果在网络状态不好的情况下，会出现资源加载进度条，这样避免页面没有加载完，展示不全的页面，影响用户体验，因此「首屏加载」时间是一个重要的优化点。

在加载时间较长的时候，务必要让用户明确感知到加载完成的提示，通常是在加载过程中显示Loading的进度条，加载完成的时候隐藏它。从心理上，这会让用户有一种“期待”感，而不至于太过枯燥。

对于一些重量级的移动WEB应用，例如「游戏H5」、「场景式H5」，开始前需要加载很多资源，为了让后面的游戏过程更为流畅，一个带百分比的进度条就显得格外重要。

按需加载

按需加载能够提升首屏加载速度，但尽可能避免对低性能的移动设备的影响，按需加载可能带来更多的重绘，从而降低了渲染性能，出现卡顿死机现象。

资源懒加载 Lazyload

懒加载已经有很多成熟方案，PC端常用的优化点，同样适用于移动端。

  • 用户主动触发时的交互内容（如：滚屏加载1，一种常见的无刷新动态加载数据的方案）
  • 首屏未使用到的资源

①.滚屏加载是一种常见的无刷新动态加载数据的方案，通常用在列表形式数据展示中。一方面，数据不是通过翻页进行加载，这样就避免了再一次请求和渲染整个页面；另一方面，数据显示的数量是受限的，例如第一次只请求了10条数据，也就只需要渲染这10条数据，下拉滚屏的时候，再去获得下面10条数据。


资源预加载 Preload

预先加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。

  • 无条件预先加载：页面加载完成（load）后，马上获取其他资源。以 google.com 为例，首页加载完成后会立即下载一个 Sprite 图片，此图首页不需要，但是搜索结果页要用到。
  • 有条件预先加载：根据用户行为预判用户去向，预载相关资源。以 google.com 为例，开始输入时会有相关关键词提示，产生额外资源加载。
  • 「被」预先加载：页面即将上线新版前预先加载新版内容。网站改版后由于缓存、使用习惯等原因，会有旧版的网站更快更流畅的反馈。 为缓解这一问题，在新版上线之前，旧版可以利用空闲提前加载一些新版的资源缓存到客户端，以便新版正式上线后更快的载入。如「6.18」、「双十一」这类重大促销节之前，可以预先下载一些相关资源到客户端（浏览器、App 等），有效利用浏览器缓存和本地存储，降低活动当日请求压力，提高用户体验。

第三方资源异步加载

第三方资源有的时候不可控，例如埋点统计、地图显示、分享组件等，诸如此类第三方资源使用时需慎重，充分考察它们对于性能的影响，使用异步加载的方式进行，防止第三方资源挂掉影响到页面本身的功能。

减少HTTP请求数

Web 前端页面大量的响应时间花在下载图片、样式、脚本等资源上。而浏览器对每个域名的连接数是有限制的（参考：浏览器允许的并发请求资源数是什么意思？），减少请求次数是缩短响应时间的关键。

  • 图片资源
  • CSS Sprite1
  • base64:URL （内联资源，有兼容问题，不会被缓存）2
  • SVG Sprite（未来趋势，国外大量网站在使用）
  • Icon Font
  • 对于少量图片压缩，推荐用腾讯智图
  • 利用CSS3技术绘制简单icon
  • Javascript、CSS、HTML等
  • 合并文件（Node.js工具流Webpark）
  • 并压缩（Node.js工具流Gulp）
  • 安排JS/CSS放到合理的部分
  • 尽量使用CSS3动画代替JS/Flash动画
  • 避免空标签，避免空src
  • 避免内联样式
  • touchstart，touchend，click分情况使用
  • 使用<!DOCTYPE html>
  • 使用UTF-8字符集
  • 使用引入CSS ，避免使用@import
  • 尽量使用外链JS和CSS资源
  • 尽量将脚本放入页面底部
  • 不要去兼容IE6了，好吗？
  • 服务端、域名等部署
  • 服务端启用Gzip技术
  • CDN自动合并技术
  • 利用CDN加速静态资源
  • 资源分域存放，分域请求（如：img.360buyimg.com存放图片）
  • 设置合理资源缓存时间
  • 减少Cookie
  • 配置Etag文件版本标识，高效利用缓存，避免重复下载
  • 服务端接口合并
  • 避免与服务端接口不必要的数据传输
  • 合理选用GET、POST请求方式3

①.通过简洁的设计减少页面所需资源，进而减少 HTTP 请求，比如我的博客就很简洁，但是在商业公司开发项目往往并不能做到简洁，为了提升用户感知和视觉体验，往往会加载很多点缀的小图片，这时候CSS Sprite就发挥作用了。②.某些图片特立独行，它们很尺寸很小，在网站中很少更新，且在网站群大量使用，这个时候 base64:URL 就发挥大作用了。③.根据 HTTP 规范，GET 用于获取数据，POST 则用于向服务器发送数据，所以 Ajax 请求数据时使用 GET 更符合规范（GET 和 POST 对比）。

减少DNS查询

确认 URL 以后，浏览器首先要查询域名（hostname）对应服务器的 IP 地址，一般需要耗费 20-120 毫秒 时间，浏览器缓存 –> 本地Hosts查询 –> DNS服务器。DNS 查询完成之前，浏览器无法识别服务器IP，因此不下载任何数据。

基于性能考虑，ISP运营商、局域网路由、操作系统、客户端（浏览器）均会有相应的DNS缓存机制。

  • IE 缓存 30 分钟，可以通过注册表中 DnsCacheTimeout 项设置；
  • Firefox 混存 1 分钟，通过 network.dnsCacheExpiration 配置；
  • Chrome - > 设置 - > 选项 - > 高级选项 - > 去勾 “用预提取 DNS 提高网页载入速度”

避免出现资源访问失败

开发过程中，发现很多开发者没有设置图标icon，然而服务端根目录也没有存放默认的Favicon.ico，从而导致请求404出现，通常我们在APP里的webview打开，不会去加载这个Favicon.ico，但是很多页面能够分享出去，如果用户在浏览器打开，就会调取失败，一般尽量保证该图标默认存在，文件尽可能的小，并设置一个较长的缓存过期时间。

另外应及时清理过期导致出现请求失败的资源。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表