搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库

webview性能优化二

前端到全栈学习之路 2018-12-15
举报

简单回顾一下之前性能优化一里面的要点

  • webview初始化时间需要na配合预加载

  • 建立连接,服务器的时间,可以优化dns解析时间,webview使用的域名和na的一致。

  • chunck编码,优先将页面静态资源输入,然后再处理api请求

下面开始今天的内容

页面框架渲染

页面在解析到足够多的节点,且css加载完成进行渲染,这期间等待的时间我们称为白屏时间。

页面渲染大概会经历这么几个流程

  • DOM下载

  • DOM解析

  • CSS请求+下载

  • CSS解析

  • 渲染

  • 绘制

  • 合成

经分析,我们知道DOM解析的时间还是不低的,特别是在低端机器上。这块是我们优化的大头。 还有一点就是js和css不能放在一块放在head里面,因为css会阻塞js的解析,不放一块是不会互相阻塞的。

优化

  • 雅虎14条

  • css的加载会在html解析到css标签开始,所以css要往前移

  • css标签下面不能放任何js标签,包括内联,不然会阻塞html解析

  • 如果必须要在head里面放js,那么js需要放在css之前。

js解析和执行

经研究,一般偏重的框架,例如react仅仅初始化时间就达到50ms~350ms,低端手机更加慢 测试代码

 
   
   
 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7.    <title>Document</title>

  8.    <style>


  9.    </style>

  10. </head>

  11. <body>

  12.    <script>

  13.        var t1 = performance.now();

  14.    </script>

  15.    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

  16.    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  17.    <script>

  18.        function test () {

  19.            console.log('1');

  20.        }

  21.        test();

  22.        var t2 = performance.now();

  23.        console.log(t2 - t1);

  24.    </script>

  25. </body>

  26. </html>

优化

  • 高性能的页面还是需要后端渲染

  • React还是太重了,面向用户的还是慎重考虑

  • js的编译和执行会有缓存,app中尽量使用同一框架

  • 这是百度首页的时间,基本上百度首页是在1s的体验上时候可见了 

webview性能优化总结

  • webview初始化

  • 内容chunk输出

  • 脚本执行慢,让脚本在页面最后执行

  • 预加载和预缓存会让页面更快

  • dns和客户端保持一致复用

webview体验

除了打开的速度,webview还有很多体验不如native的地方

长按选择

这个可以通过css来解决

 
   
   
 
  1. -webkit-user-select:none;

  2. -khtml-user-select:none;

  3. -moz-user-select:none;

  4. -ms-user-select:none;

  5. user-select: none;

点击延迟

在webview中,点击大概有300ms延迟,唯一例外的是chrome可以设置meta禁止缩放。

解决办法,引入fastclick解决

页面滑动期间页面不渲染不执行

在我们滚动的时候,经常需要滚动条吸顶。这个功能在pc和native中都好实现,可在webview中成了难题。

 
   
   
 
  1. 在页面滚动期间,Scroll Event不触发

不仅如此,webview滚动期间还有各种限定

  • setTimeout和setIntervar不触发

  • gif动画不播放

  • 很多回调会延迟到页面停止滚动之后

  • background-position: fixed不支持。

这些限制让webview在滚动期间很难有好的体验。 这些限制大部分都是可以突破的,但至少对于吸顶功能还是可以做支持

  • 在ios上,使用position: sticky可以做到元素吸顶

  • 在安卓上可以监听touchMove事件在滑动期间做到元素position切换,但是惯性运动就失效来


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《webview性能优化二》的版权归原作者「前端到全栈学习之路」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端到全栈学习之路微信公众号

前端到全栈学习之路微信公众号:frontendtofullstack

前端到全栈学习之路

手机扫描上方二维码即可关注前端到全栈学习之路微信公众号

前端到全栈学习之路最新文章

精品公众号随机推荐

举报