前言：

想零碎学习前端面试题，强烈推荐浏览 在线电子书（反对手机版，不断更新） 。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在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; }

浏览器有哪些兼容些问题，你是如何解决的？

  1. html5的兼容性能够应用htmlshiv.js来解决（能够兼容到ie6-ie8）
  2. css3 新个性，独自减少前缀（能够应用postcss的插件 Autoprefixer）; IE条件正文
  3. js兼容性：jquery

挪动端兼容性问题？

  • ios下软键盘弹出，fixed元素容易定位出错，影响fixed元素定位；

解决方案：可用iscroll插件解决这个问题；

  • zepto点击穿透的bug：应用fastclick插件代替
  • 挪动端300s提早解决计划？
  1. 应用插件fastclick
  2. 应用zepto的touch事件代替
  3. 能够绑定ontouchstart事件

事件穿透的原理及解决方案？

原理 ：

  • 300ms提早问题，事件穿透了（可跨页面）

解决方案：

  • 不要混用touch,click， touch300ms会触发click
  • tap后提早350ms再暗藏mask，打消掉touch之后的click （tap后提早350毫秒再暗藏mask）
  • 第三方插件fastclick

H5与原生APP交互的原理？

一、APP调用H5

【不倡议应用】app做为容器，尽量不要去调用H5的办法，这样会导致数据流凌乱，APP webview容器不能做到模块化

步骤

  1. h5中裸露一些全局对象, 把变量，办法注入到window对象下
  2. app中调用这些对象

二、H5调用APP

因为h5不能间接拜访宿主APP，所以这种调用绝对简单一点

1）APP向h5注入一个全局JS对象

长处：简略

毛病：可能存在安全隐患,android零碎

H5中间接调用：

window.appSdk.double(10);  //20

2）H5发动一个自定义协定申请

scheme协定，app的一种页面跳转协定

步骤：

  1. 【定协定】app自定义协定

    • ydl-user://ceshi/list 跳转到【原生】测评列表页
    • ydl-user://h5/test?params={"url":" http://www.x.com/ceshi/1"} //跳转到【H5】测评详情页，params 参数局部 应用UrlEncode编码 且不能有空格

  2. 【定回调】h5定义好回调函数

    • window.bridge={getDouble:value=>{}, getTriple:value=>{}}

  3. 【发申请】H5发动一个自定义协定申请，

    • location.href = 'sdk://double?value=10'
  4. 【拦挡并解析申请】app拦挡这个申请，进行相应操作，获取返回值

  5. 【调办法】由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 初探