webview & h5 中遇到的问题

酱籽
691 阅读3分钟

设计稿上的尺寸如何转化

rem 单位

使用rem为元素设定字体大小时，相对的只是HTML根元素

举个例子：

如果设计稿是 1080px ，7.5*144 = 1080

7.5是自定义的，确保7.5144=1080(设计稿尺寸)完成屏幕的适配 ，如果屏幕变成了360，7.5不变，144px会变成48px（487.5=1080）

也可以将7.5设成10.8，144设成100，也能达到一样的效果


// 响应式rem适配方案 -------适用于设计稿为1080px
$rem: 1rem / 144;

@function rem($px) {
  @return $px * $rem;
}

function detectOrient () {
  var width = document.documentElement.clientWidth || window.innerWidth
  var height = document.documentElement.clientHeight || window.innerHeight
// 竖屏
  if (width <= height) { 
    if (width >= 1200) {
      width = 1200
    }
    if (width <= 320) {
      width = 320
    }

    // 设置html 根元素的字体大小
    document.documentElement.style.fontSize = (width / 7.5) + 'px'
    return false
  } else { 
 // 横屏
    if (height >= 1200) {
      height = 1200
    }
    if (height <= 320) {
      height = 320
    }
    document.getElementsByTagName('html')[0].style.fontSize = height / 7.5 + 'px'
    return false
  }
}

detectOrient()
window.onresize = function () {
  detectOrient()
}

暗黑模式是怎么实现的

手机系统有一个暗黑模式，切换的时候，要求h5随之变化。

几种方案：

  1. 使用cookie，将cookie  dark=1 设置到 .xxx.com 下，拿到cookie值得知此时的模式

  2. 整俩页面，一个黑一个白，让他们自己切换url (哪个小天才想出来的)

  3. 本次是什么实现的？如果cookie 获取不到，安卓又不愿意改，那就没办法了。比如本次需求，使用的方式是，前一页面获取到了cookie，再将下一个页面url带上dark=1的查询参数，那我们实际上要做的就是带有dark=1的这个页面，获取后即可判断。 为下一页调取了安卓提供的方法 —— loading加载动画，并获取cookie为下一页设置可判断暗黑模式的根据 

存在的问题

每次切换模式，都会退出当前页面，需要重新进入，这样再次进入，就会切换黑白模式

首次进入列表页时，需要调用关闭loading，因为上一页给设置了

防抖&节流

本来想着不用监听input查询，后来经过某些人的离奇之手，让我想到也有这么一些有毒的人，致力于要搞垮你的系统，开足马力狂点回车，就要给你玩坏，所以我想了想，又做了一个限制。

防抖：

指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

节流：

连续触发事件但是在 n 秒中只执行一次函数

浏览器渲染机制

发生了什么？

切换暗黑模式的时候，会有白色背景闪烁，主要是css的引入时机问题

Webview打开H5加载流程

初始化Webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 ->DOM 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片-> 页面完整展示

DOM渲染之前耗时主要在两部分：初始化Webview 和 数据请求，一般Webview首次初始化在400ms这个量级，二次加载能少一个量级。

数据请求依赖网络，网络请求一般经过：DNS查询、TCP 连接、HTTP 请求和响应。数据包括HTML、JS和CSS资源，这些都是在webview在loadRequest 之后做的，这一阶段，用户所见到的都是白屏

H5页面渲染

  1. 处理 HTML 标记并构建 DOM 树

  2. 处理 CSS 标记并构建 CSSOM(CSS Object Model) 树

  3. 将 DOM 与 CSSOM 合并成一个渲染树

  4. 根据渲染树来布局，以计算每个节点的几何信息

  5. 将各个节点绘制到屏幕上

这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM

H5页面加载度量

  1. 白屏时间（first paint time）：地址栏输入网址后回车 到 浏览器出现第一个元素(网络、服务端性能，前端页面结构设计)

  2. 可操作时间(dom Interactive)：地址栏输入网址后回车 到 用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

  3. 首屏时间：地址栏输入网址后回车 - 浏览器第一屏渲染完成（白屏时间，资源下载执行时间等）

  4. 总下载时间：页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间；

  5. 加载时间：页面所有元素加载完成；

  6. 在App中打开H5页面，还需要统计WebView的初始化时间

Load 和 DOMContentLoaded 区别

  1. Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕

  2. DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载

参考资料

（其他的文章关的太快找不到了，后面再补充）

前端真好玩

avatar
文章
阅读
粉丝