记在阅读器上遇到的不常见的bug及实现思路

分栏布局column-width,colunm-count,...这些在一般的web需求还是不常用的，然鹅，需求来了，要做阅读，还是横向翻页，后端给的内容是string类型。不是那种epub...这种电子书格式。首要的问题，怎么渲染每一屏，后来几经参照网上在线的web阅读类型的网站，column-width这个api出现在眼前，二话不说，写呗。

分栏布局粗来的ui大概是如下：

设置基本需要设置个每个章节容器宽度，和column-width = 屏幕宽度，基本可实现。但是问题来了，容器宽度哪里来？必须要先渲染后，再获得当前章节的scrollWidth。

通过scrollWidth获得的竟然不是屏幕宽度的整数倍。hack向下取整整屏屏幕宽度倍数，然后，测试小姐姐反馈，怎么每一屏没有填充满，然而，翻css属性，发现column-fill：默认值是balance，意思就平衡每一栏的填充高度，我的理解是尽可能一样高，改成auto，效果好很多，测试反馈好很多，然而在安卓的x5内核上，还是感觉比苹果上少填充2行，通过打日志看window的height,和screen的height，发现高度差竟然有70px多（我拿测试机打出来的），但很明显，安卓顶部状态栏高度明显没有70px那么高，然而打在微信里看结果也一样，可能x5内核统一设置了，我们网页除去顶部状态栏，其他地方全是网页可控制的（包括导航栏），在分栏布局不熟悉下，造成这个问题还以为是浏览器渲染问题呢，最后才hack判断安卓，手动加了50px,看起来效果和ios差不多，基本是填充满整屏幕的。===此布局还没完，再有些章节内容，设置了column-fill会造成概率性造成最后一屏白屏，没内容。hack在追后追加章节结束标准，获取其offsetLeft.尴尬的是当章节内容最后一屏正好一屏，标志位独占一屏，通过判断标志位offsetTop来处理。

ios上缓慢侧滑竟然抖动，问题原因，是当我设置touchmove时，设置了过渡。在touchmove的时候没处理transition-duration：0,但在安卓上确实没问题。奇葩。。。

魅蓝5s第一次进主页（无缓存），竟然没数据？？？通过移动端打log看，竟然是一个封装的route.js为undfined,但是抓包看确实加载了，如果杀进程进页面，数据竟然都有。主页正常，可能是无缓存加载机制问题吧。其次，进入阅读页，竟然未分css栏目，不是想要的效果。通过log看，html行内样式就没设置column-width，但同样杀进程进去，阅读页显示正常，样式也显示成功。说他不支持column-width，也不对，加了-webkit-column-width,倒第一次进去也正常了。。。谁能解释下。

ios一直侧滑很快，会出现空白页。一直点击翻页则不会。在侧滑上更改了过渡时长，效果会稍微好些，出现概率非常低。但还是存在，在看其他相关阅读也存在这个问题。未解决。

关于阅读进度的统计,假设每一页字数都一样。这样统计的方式。

html结构

<div class="reader-swiper" style="min-height: 690px; min-width: 360px; height: 690px; overflow: hidden; transition: all 0s ease 0s; width: 11520px; transform: translate3d(-7200px, 0px, 0px);">
    <div class="reading-section" id="reading-section-16" data-section-id="16" data-width="360" data-height="690" style="height: 690px; column-width: 360px; width: 360px; opacity: 1;">
        <h2 class="reading-paragraph paragraph-1" data-paragraph="1" data-txt="16">16</h2>
        <p class="reading-paragraph paragraph-2" data-paragraph="2">16</p>
        <span id="end-16" style="height:0;width:0"></span>
            
          <div class="title-wrap" style="width: 360;display: block; top: 0px">
            <div class="section-title" style="width: 360px">
            第16章  16
            </div>
            <div class="section-title" style="width: 360px">
            第16章  16
            </div>
          </div>
    </div>
</div>

复制代码

性能

• reader-swiper容器内不能无限添加，最多添加3章，超过，则删除前面或后面的章节。
• 做本地缓存，根据章节md5和后端md做对比。
• 初次进去预渲染前一章或后一章，根据进度去处理。
• 。。。

转载于:https://juejin.im/post/5c9b1fd4f265da60d0004e3d