前记

平时在写 bug 的时候慢慢的就会有了一些避开 bug 的经验，慢慢的记录下来，避免自己一次次的踩进去。

技术问题

1. hybrid 开发中，安卓手机上小于 12px 字体的垂直居中不对齐问题，可以通过内边距 padding 来折中处理【可能是安卓上的 webview 实现有关系】
2. 无线端 1px 处理的边框被隐藏问题，主要是父元素的 overflow:hidden 引起的【通过伪元素 after 根据 prd 放大缩小实现】
3. 无线端搜索框使用 form 的onsumbit监听 search 类型的 input 的enter事件，最后不要通过 keycode 等方式来监听 enter；
4. scheme 跳转问题：包括 url 中文没有 encodeURIComponent、没有写全https: 而是用//,
5. 关于微信分享的问题：分享文字内容敏感、分享了短链接，而短链接没有配置服务域名等会有问题；
6. 在 jquery 的onclick的回调事件传入匿名箭头函数，并使用 this 会导致问题。
7. 处理当前页面 url 参数的时候没有考虑 url 上具有 hash 的情况，可能会导致参数追加到了 hash 上，或者获取最后一个参数时同时获取了 hash 内容。
8. ::-webkit-scrollbar{display: none;} 隐藏滚动条 和 -webkit-overflow-scrolling: touch启动弹性滚动【在 app 端没有同时生效】
9. postcss处理多行截断文本时会丢去其中一个属性 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: 2; 也就是其中的 -webkit-box-orient: vertical; 需要添加 /* autoprefixer: off */ 来避免被处理
10. 点击穿透，当原生 click 事件和 fastclick 事件混用时，如果 fastclick 事件触及点发生了 dom 元素的变更 [遮罩层的隐藏等]，会导致300ms 后的 click 落在了变化后的 dom 上，引起诡异的问题。
11. 折叠屏不能仅通过监听 resize 事件来做重新的展示，因为在一些浏览器微信环境中滚动的页面会时的环境的导航条隐藏，出发 resize，可以同时判断视口宽度是否变化。
12. 全局滚动位置设置的时候document.body.scrolltop 和 document.documentelement.scrolltop 在不同的环境分别起作用，最好的办法是先设置其中一个，然后读取设置的值，如果没有设置成功的话再设置另一个。
13. + new Date()和 0+ new Date() 的问题
14. 关于伪假 0、[].length等会被 react 渲染
15. 滚动穿透问题，当使用全局滚动时，如果有弹窗内容，并且弹窗内容也可以滚动，那么弹窗内容滚动到边界时就会穿透到全局，引起全局范围的对应方向的滚动。处理的话需要在弹窗时将全局滚动失效，并记录当前滚动位置，在关闭弹窗时，恢复全局滚动以为文档滚动位置还原。
16. 视频字段播放的问题注意点：需要注意兼容性和微信设置非全屏播放，以及在 app 进入后台时或者新开 webview 时需要暂停视频播放

17. 在 ios 系统中，window，html，document，body 绑定 click 事件，并且代理元素是不可点击元素（如 div span 等）的话，事件不会触发。但是如果是可点击元素（如 button,a）的话，点击事件正常。

    1. 将 click 事件直接绑定到目标元素(即 .target) 上
    2. 将目标元素换成 <a> 或者 <button> 等可点击的元素
    3. 给目标元素添加一个空的 onclick=""(<div class="target"onclick=""> 点击我!</div>)
    4. 把 click 改成 touchend 或 touchstart（注意加上preventDefault）
    5. 将 click 元素委托到非 document 和非 body 的父级元素上
    6. 给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)

18. 关于 h5 页面的软键盘和输入框的问题：

    1. 在 IOS 上软键盘的弹起表现：输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview）并没有被压缩，或者高度（height）没有改变，只是页面（webview）整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度，如果元素滚动的高度不够的时候【1. 自动添加空白占位(软键盘收起后可能还存在，需要滚动一小段来收起) 2. 滚动到底(输入框可能被遮挡)】。
    2. 在 Android 上软键盘的弹起表现：，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动，webview 本身不能滚动。
    3. 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。
    4. 触发输入框以外的区域时，输入框失去焦点，软键盘收起。但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，不过软键盘会被收起。
    5. 第三方的输入法存在高度不一致或者有导航头也会存在遮挡问题。

    6. 选择合理的布局，比如 flex 布局，以及监听软键盘的弹起：

       • 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur 事件获知软键盘收起。
       • 在 Android 上，监听 webview 高度会变化超过软键盘高度(因为很多浏览器在页面滚动时会隐藏导航栏导致触发 resize 事件，所以需要小心使用 resize)，高度变小获知软键盘弹起，否则软键盘收起。

19. 关于 input 等表单的 disabled 和 readonly 两个属性的区别：

    1. 不是所有具有 disabled 属性的表单元素都具有 readonly 属性，<SELECT> , <OPTION> , and <BUTTON>不具有
    2. disabled 属性会使得表单在 onsubmit 的时候被过滤，而 readonly 会正常提交
    3. disabled 属性会使得表单在 tab 切换焦点和点击获取焦点时不会触发 onfocus 事件回调，而 readonly 会正常触发；
    4. 具有 disabled 属性的表单元素在某些运行环境会存在默认样式，
20. 使用 object-fit：fill|contain|cover|scale-down|none 来完成图片的自适应展示的时候，如果图片需要存在 :hover 时需要变化大小的交互效果时，会导致卡顿，有这种交互的时候需要慎用，可以通过 transtion+transform 来实现类似功能。

21. 在 js 中，number 类型就是 double 类数值，如果和其他语言进行数据交互存在 long 类型的语言时候，可能会存在问题：

    • 当数值 long 类型超出范围时，需要考虑使用字符串来进行处理，而 bigint 等第三方库就是使用字符串来模拟实现大的数值计算的；
    • 如果将大的数值作为参数进行接口请求传递的时候，存在某些情况下会将数据变成科学计算法表示，是的没有正确传递：Math.power(10, 99) => 1.000000000000001e99。

22. addEventListener 的使用示例target.addEventListener(type, listener[, options={}|useCapture=bool]);,

    第三个参数 options 简介: An options object that specifies characteristics about the event listener. The available options are:

    • capture: A Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
    • once: A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
    • passive: A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See Improving scrolling performance with passive listeners to learn more.
    1. 其中 options 的 passive 设置是默认 false; 这样会导致 touch events 的回调会阻塞浏览器主进程，影响滚动性能，从 Chrome 56 开始，对于 doucment 级别的节点 (Window, Document, and Document.body) 上通过 addEventListener 添加的 touchstart 和 touchmove events 事件的 passive 默认设置为 true 以提高性能，如果我们给 document 绑定 touchmove 或者 touchstart 事件的监听器，而且希望执行 preventDefault 操作，那么 addEventListener 时候的参数 options 的这个 passive 需要手动设置为 false，会有性能影响。
23. javascript 中的 Error 对象，在使用 JSON.stringfy 处理的时候，存在返回 {} 空对象字符串的可能，因为部分 Error 对象的属性都是不可枚举的，而 json.stringfy 需要序列化是可枚举的，可以参考情况和解决方法，
24. IOS 的右滑返回手势，从左侧边框向右滑动，在当前 webview 退出动画执行期间，如果横滑手势在向右滑动时，落在了当前正在退出的 webview 内监听过 touch 事件的元素上，touch 事件里面通过 event 获取 touch 位置 (e.touches[0].clientX) 的时候会获取到触摸点在下一层 webview(返回后的 webview)的位置，相当于当前 webview 的位置减掉了 document.documentElement.clientWidth 屏幕 /webview 的宽度，这样可能会导致通过获取 touch 位置的逻辑出现异常的情况，需要谨慎考虑，遇到问题视情况处理。

非技术问题

1. https的页面配置 http 的图片链接，导致安卓机无法展示 http 图片
2. 关于 chrome 在https走 charls 调试本地页面时，有时候会不好使，第一次可以考虑重启 charles，当然无论是模拟器还是真机都应该安装了charles 的证书。
3. 关于微信走本地，最好是有 http 环境，且前端资源的域名使用正常的 fesource.com 域名走本地代理。而不是直接使用 ip 地址127.0.0.1。
4. 关于 IOS 的 uiwebview 的问题，在使用滚动监听时，只会在滚动结束时触发监听事件; 不过 WKWebview 已经完善了这一问题。
5. 关于 adblock 等广告拦截插件把本地调试的 js 代码拦截等情况，不小心注意的话开始会有点懵逼。。。