Skip to content

Latest commit

 

History

History
88 lines (72 loc) · 5.27 KB

20201010.md

File metadata and controls

88 lines (72 loc) · 5.27 KB

图文详情页秒开实践

分析指标

页面加载时间 = 页面加载完成时间 - 页面开始加载时间
  • 白屏，用像素点检测白屏
  • 确定指标，非白色的像素点大于 5% 认为页面非白屏

优化

模版优化

模版优化前 将页面公共样式CSS和逻辑JS都抽离出来，形成一个独立而完备的详情页模板，将该模版离线到本地 模版优化后

数据预加载

客户端通过一定的策略去预加载页面数据 数据预加载

模版预热

预先准备好webview并加载模版，减少初始化webview的时间 模版预热

复用模版

前一个页面推出后，只清除正文数据，再次打开的时候直接复用之前的webview模版

网络容灾

  • 多域名备份，防止某个 CDN 出现故障，导致服务雪崩，服务端会下发多个 CDN 链接
  • 快速超时，基于上次正常请求时间为基数做超时时间

服务端渲染

在服务端就会把所有的详情页正文的 HTML 数据组装好，通过将服务端直出内容注入到页面中时，可以直接给 WebView 进行渲染

客户端渲染

  • 图片和视频等非文字内容通过原生组件的方式放在客户端进行渲染，既可以提高渲染效率，也可以减少不必要的流量消耗
  • 缓存共享、请求并行，类似图片等资源如果客户端和H5都在使用的情况，由客户端来拦截http请求，使用客户端的能力来统一下载图片

其他

  • webview占用内存过大时会被杀掉，需要客户端做好webviewreload。

提升数倍页面渲染速度的CSS属性

  • CSS Containment，是一种规范，它的主要目的就是在页面渲染的过程中通过忽略文档中的某些子树来提高页面的渲染性能

    • size: 表示元素盒子的大小是独立于其内容，也就是说在计算该元素提升数倍页面渲染速度的CSS属性盒子大小的时候是会忽略其子元素
    • layout: 该值表示元素的内部布局不受外部的任何影响，同时该元素以及其内容也不会影响到上级
    • style: 声明那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内
    • paint: 声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。

  • content-visibility: auto

  • contain-intrinsic-size指定元素的自然大小

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

不写文档你就输了

Web开发者文档的重要性

  • 好的文档可以帮助用户，了解文档面向的人群，尽量使用通俗易懂的文字来描述
  • 好的文档可以帮助其他开发人员，每位开发者都有自己的编码风格，但团队合作需要有统一的代码规范，如命名、注释等；对于新同学来说也是一种很好了解团队的方式
  • 好的文档也可以帮助开发人员自己，历史代码可能自己就已经忘了(每行代码都有它的作用)。良好的文档可以记录当时的情景，帮助自己回忆。

好的文档有哪些特性？

  • 永远不要假设，无论用户的熟练程度如何，总是从头开始解释各种事情是更好的选择
  • 遵守标准，添加与代码内联的文档时，请使用代码编程语言所期望的标准
  • 图形元素，某些场景来说图形会比文本更直观
  • 分区，整理好文档的目录
  • 修订和更新，校验文档中的错别字，文档有变化及时更新

新闻