2024年rem和vw的分析比较_rem和vw兼容性(2)，耗时两个礼拜8000字前端面试长文

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

二、如何根据不同屏幕设置 font-size 大小

1、媒体查询

<style type="text/css">   
   @media screen and (max-width: 320px) {
        html {
          font-size: 20px;
        }
      }  
    @media screen and (max-width: 360px) and (min-width: 321px) {
        html {
          font-size: 24px;
        }
      }
</style>
 

2、使用 js 方式

<script type="text/javascript">
    // 获取视窗宽度
    let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
    console.log(htmlWidth)
 
 
    // 获取视窗高度
    let htmlDom = document.getElementsByTagName('html')[0]
 
 
    htmlDom.style.fontSize = htmlWidth / 10 + 'px'
</script>

rem的缺点：需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦

vw是不是比rem更好的方案？

vw —— 视口宽度的 1/100
vh —— 视口高度的 1/100

不用通过js计算，直接使用即可，但是兼容性却不如rem。

VW的完全兼容需要Android4.4+和ios8+

rem的完全兼容需要Android2.1+和ios6+

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

…(img-3tFJH2JM-1714818631643)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】