现在 web 页面在移动端的地位越来越高，大部分主流 App 采用 native + webview 的 hybrid 模式，加载远程页面受限于网络，本地 webview 引擎，经常会出现渲染慢导致的白屏现象，体验很差，于是离线包方案应运而生。动态下载的离线包可以使得我们不需要走完整的 App 审核发布流程就完成了版本的更新
8. 自适应和响应式布局的区别
自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
插件及工具相关1. babel和polyfill
Babel: Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。注意：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API
Polyfill: Polyfill的准确意思为，用于实现浏览器并不支持的原生API的代码。
2. jpg, jpeg和png区别
jpg是jpeg的缩写, 二者一致
PNG就是为取代GIF而生的, 无损压缩, 占用内存多
jpg牺牲图片质量, 有损, 占用内存小
PNG格式可编辑。如图片中有字体等，可利用PS再做更改。JPG格式不可编辑
3. git rebase和merge区别
减少HTTP请求（合并css、js，雪碧图/base64图片）
压缩（css、js、图片皆可压缩,使用webpack uglify和 svg）
样式表放头部，脚本放底部
使用CDN（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好）
http缓存
bosify图片压缩: 根据具体情况修改图片后缀或格式 后端根据格式来判断存储原图还是缩略图
懒加载, 预加载
替代方案: 骨架屏, SSR
webpack优化
原生通信1.JSBridge通信原理, 有哪几种实现的方式？
JsBridge给JavaScript提供了调用Native功能，Native也能够操控JavaScript。这样前端部分就可以方便使用地理位置、摄像头以及登录支付等Native能力啦。JSBridge构建 Native和非Native间消息通信的通道，而且是 双向通信的通道。
JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
2.实现一个简单的 JSBridge，设计思路？
算法相关1. 二分查找和冒泡排序
二分查找: 递归(分左右, 传递start,end参数)和非递归(使用while(l < h))
冒泡排序: 两个for循环
2. 快速排序
function quickSort (arr) { if (arr.length < 2) return arr var middle = Math.floor(arr.length / 2) var flag = arr.splice(middle, 1)[0] var left = [], right = [] for (var i = 0; i < arr.length; i++) { if (arr[i] < flag) { left.push(arr[i]) } else { right.push(arr[i]) } } return quickSort(left).concat([flag], quickSort(right))}3. 最长公共子串
function findSubStr(str1, str2) { if (str1.length > str2.length) { [str1, str2] = [str2, str1] } var result = \'\' var len = str1.length for (var j = len; j > 0; j--) { for (var i = 0; i < len - j; i++) { result = str1.substr(i, j) if (str2.includes(result)) return result } } } console.log(findSubStr(\'aabbcc11\', \'ppooiiuubcc123\'))