前端面试题系列文章：
【12】「2023」性能优化相关知识点
【13】「2023」H5相关知识点
X-Mind原图地址：
如何解决滚动穿透问题？
在弹窗打开的时候给body设置position:fixed属性，设置并记录top值防止滚动位置丢失。在弹窗关闭的时候把position属性改回原来的值，并且设置scrollTop为top。
如何查看H5页面的网络信息？
抓包工具Charles
在Chales抓包工具里可以查看网络信息，debugger，做代理等调试操作。
vconsole或edura等调试工具
同样也可以监控网络信息，可以查看本地缓存的信息，打印变量等操作。
H5如何兼容不同的分辨率的设备？
在 html 头部设置 mata 标签如下所示，让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 在布局时候的宽高使用postcss插件转成vw布局。（根据视口来设置宽高）
- 对图片来说，设置
background-size:containorbackground-size:cover和no-repeat。
如何画出0.5px的线？
使用 transfrom 将1px的线缩小
.calss1 {
position: relative;
&::after {
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-top:1px solid #666;
transform: scaleY(0.5);
}
}
对IphoneX底部安全距离的设置
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
JSBridge的实现原理？
简单来说，创建一个iframe，改变src属性去获取网络资源。App拦截特定的网络请求，调用对应的能力，将执行结果返回给HTML页面。
Taro是如何用一套代码适配多个平台的？
对于H5平台
由于 Taro 本身就是按照React的语法来写的，所以Taro内部也是直接用webpack-runner来打包的。对于<View>等组件，Taro本身就会编译多个平台，根据传入的编译参数编译成不同平台的代码。对于路由问题，经查阅Taro源码发现，Taro写了一个自定义插件来读取app.config.js文件，会将其中的路由等信息先预先读取出来，最终还是由Webpack进行构建。
对于小程序平台
可能就比较复杂一点，需要对代码内容进行词法分析，替换对应的关键代码，最终将React代码解释成小程序平台能运行的代码。
