前言：
想系統學習前端面試題，強烈推薦瀏覽 在線電子書（支持手機版，不斷更新） 。
本書特點：系統全面（涵蓋前端核心技術點），簡潔，針對性強（針對面試場景設計）。
歡迎在github上留言反饋
移動端
移動端高清屏適配方案？
幾個要解決的重要問題：
佈局 > 字體大小 > 1px邊框 > 高清圖
參考資料：
移動端高清屏適配方案
移動端尺寸單位？
- px: 絕對長度單位，
- rem：相對長度單位，相對於根元素html
- em：相對長度單位，相對於父級
參考資料：
css單位中px和em,rem的區別
事件穿透的原理及解決方案？
原理 ：
- 300ms延遲問題，事件穿透了（可跨頁面）
解決方案：
- 不要混用touch,click， touch300ms會觸發click
- tap後延遲350ms再隱藏mask，消除掉touch之後的click （tap後延遲350毫秒再隱藏mask）
- 第三方插件fastclick
高清屏1px邊框問題的解決方案？
- 偽類+transform（scale） 實現
- border-image， backgroud-image 實現
- viewport+rem
處理方法：
使用svg來設置border-image；
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }瀏覽器有哪些兼容些問題，你是如何處理的？
- html5的兼容性可以使用htmlshiv.js來處理（可以兼容到ie6-ie8）
- css3 新特性，單獨增加前綴（可以使用postcss的插件 Autoprefixer）; IE條件註釋
- js兼容性：jquery
移動端兼容性問題？
- ios下軟鍵盤彈出，fixed元素容易定位出錯，影響fixed元素定位；
解決方案：可用iscroll插件解決這個問題；
- zepto點擊穿透的bug：使用fastclick插件代替
- 移動端300s延遲處理方案？
- 使用插件fastclick
- 使用zepto的touch事件代替
- 可以綁定ontouchstart事件
事件穿透的原理及解決方案？
原理 ：
- 300ms延遲問題，事件穿透了（可跨頁面）
解決方案：
- 不要混用touch,click， touch300ms會觸發click
- tap後延遲350ms再隱藏mask，消除掉touch之後的click （tap後延遲350毫秒再隱藏mask）
- 第三方插件fastclick
H5與原生APP交互的原理？
一、APP調用H5
【不建議使用】app做為容器，儘量不要去調用H5的方法，這樣會導致數據流混亂，APP webview容器不能做到模塊化
步驟
- h5中暴露一些全局對象, 把變量，方法注入到window對象下
- app中調用這些對象
二、H5調用APP
由於h5不能直接訪問宿主APP，所以這種調用相對複雜一點
1）APP向h5注入一個全局JS對象
優點：簡單
缺點：可能存在安全隱患,android系統
H5中直接調用：
window.appSdk.double(10); //20
2）H5發起一個自定義協議請求
scheme協議，app的一種頁面跳轉協議
步驟：
-
【定協議】app自定義協議
- ydl-user://ceshi/list 跳轉到【原生】測評列表頁
- ydl-user://h5/test?params={"url":" http://www.x.com/ceshi/1"} //跳轉到【H5】測評詳情頁，params 參數部分 使用UrlEncode編碼 且不能有空格
-
【定回調】h5定義好回調函數
- window.bridge={getDouble:value=>{}, getTriple:value=>{}}
-
【發請求】H5發起一個自定義協議請求，
- location.href = 'sdk://double?value=10'
- 【攔截並解析請求】app攔截這個請求，進行相應操作，獲取返回值
-
【調方法】由app調用h5中的回調函數，
- window.bridge.getDouble(20)
參考資料： h5 與原生 app 交互的原理
JSBridge 原理？
構建Native與非Native間消息通信的雙向通道，使得H5與app可以互相調用各自的方法
案例：
- 微信sdk (微信內獲取用户openID，調起微信支付功能，分享功能)
實現原理：
一、注入API
前端直接調用
//android 4.2+系統劫持
window.nativeBridge.postMessage(message); //android webview提供了 addJavascriptInterface 的方法
//ios 有新老兩個容器
//UIWebview (過時了)，WKWebview(推薦)
window.webkit.messageHandlers.share.postMessage(xxx); //WKWebViewConfiguration的調用方法二、攔截URL scheme
ydl-user://[ceshi](haoshi://ceshi/home)/list 參考資料:
JSBridge的原理
微信開放文檔
小白必看，JSBridge 初探
