乐趣区

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

前记

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

技术问题

  1. hybrid 开发中,安卓手机上小于 12px 字体的垂直居中不对齐问题,可以通过内边距 padding 来折中处理【可能是安卓上的 webview 实现有关系】
  2. 无线端 1px 处理的边框被隐藏问题,主要是父元素的 overflow:hidden 引起的【通过伪元素 after 根据 prd 放大缩小实现】
  3. 无线端搜索框使用 formonsumbit监听 search 类型的 inputenter事件,最后不要通过 keycode 等方式来监听 enter;
  4. scheme 跳转问题:包括 url 中文没有 encodeURIComponent、没有写全https: 而是用//,
  5. 关于微信分享的问题:分享文字内容敏感、分享了短链接,而短链接没有配置服务域名等会有问题;
  6. jqueryonclick的回调事件传入匿名箭头函数,并使用 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.scrolltopdocument.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. 关于 chromehttpscharls 调试本地页面时,有时候会不好使,第一次可以考虑重启 charles,当然无论是模拟器还是真机都应该安装了charles 的证书。
  3. 关于微信走本地,最好是有 http 环境,且前端资源的域名使用正常的 fesource.com 域名走本地代理。而不是直接使用 ip 地址127.0.0.1
  4. 关于 IOS 的 uiwebview 的问题,在使用滚动监听时,只会在滚动结束时触发监听事件; 不过 WKWebview 已经完善了这一问题。
  5. 关于 adblock 等广告拦截插件把本地调试的 js 代码拦截等情况,不小心注意的话开始会有点懵逼。。。
退出移动版