共计 2205 个字符，预计需要花费 6 分钟才能阅读完成。
前言：
想零碎学习前端面试题，强烈推荐浏览 在线电子书（反对手机版，不断更新）。
本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。
欢送在 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 初探