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代碼攔截等情況，不小心注意的話開始會有點懵逼。。。