web开发常见问题[持续更新中]

前记

平时在写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代码拦截等情况，不小心注意的话开始会有点懵逼。。。