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