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代码拦截等状况，不当心注意的话开始会有点懵逼。。。