面试常问：rem布局，flex布局等

最新推荐文章于 2024-03-21 16:51:25 发布

原创最新推荐文章于 2024-03-21 16:51:25 发布 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

随记备忘同时被 3 个专栏收录

49 篇文章

订阅专栏

基础知识

8 篇文章

订阅专栏

面试

1 篇文章

订阅专栏

本文详细介绍了前端开发中的关键概念，包括REM布局，如何通过设置html字体大小实现不同设备的适配；Flexbox布局用于灵活的页面元素排列；媒体查询构建响应式设计，确保页面在不同屏幕尺寸下表现良好。此外，深入解析了Event Loop的工作原理，宏任务与微任务的区别，以及如何使用async/await和Promise处理异步操作。同时，文章还探讨了如何利用Promise.all并发处理多个请求，并展示了如何利用dataset属性操作DOM元素的自定义数据属性。最后，讨论了事件代理技术，提高大型列表事件处理的效率。

1、rem布局

html{font-size: 16px} div{font-size: 1rem}

这里的rem就是16px;

给html{font-size: 26.66667vw;};//

26.66667vw = 100px / 375px *100vw，这是iPhone5下的值，如果是其他更大尺寸的手机，26.66667vw的实际像素数要大于100px.

div{font-size:0.16rem};//以100px作为rem，根据UI的px计算更方便

2、flex布局

3、媒体查询-响应式布局

4、event loop

console.log('Hello, 哈默！)进入callstack调用栈，执行结果，在控制台输出Hello，哈默！调用栈清空。

setTimeout(() => {

console.log('回调函数执行')

}, 3000);

进入调用栈，setTimeout(callback, time)是个webapi，5s后才执行callback。此时，调用栈也清空了。

console.log('Hi, 哈默！)进入callstack调用栈，执行结果，在控制台输出Hi，哈默！调用栈清空。

5s过后，callback被推入callback queue，然后被event loop发现，进入调用栈执行。而后调用栈再次清空。

5、宏任务/微任务

6、async/await

await 后面跟的可以是promise对象，简单字符串等，或者是async 函数，但是都会被包装成promise对象。

7、promise避免回调地狱

需求：多个promise请求，且前面的方法返回值后面的正好需要

      this.getTodos()
          .then(res=>{
            //xxxx
            return this.getComments();//返回的是promise，故而可以继续使用 .then
          })
          .then(res=>{
            // xxxx
            return this.getAlbums()
          })
          .then(res=>{
            console.log('xxx')
          })

8、Promise.all

Promise.all(p1, p2, p3)

.then(res=>{

// 全部请求结果返回了

})

9、dataset

dom元素的一个属性，在HTML中，使用data-xxx-yyy-zzz这种格式定义的，可以通过dataset获取：

//html
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

//js
const el = document.querySelector('#user');
//可以获取
console.log(el.dataset.id)
//可以设置
el.dataset.dateOfBirth = '1960-10-03';
//可以删除
delete el.dataset.dateOfBirth

10、事件代理

将许多重复的元素，比如li等的对于事件的处理函数，交由父元素来统一处理。

 let ul = document.querySelector('ul')
 let curId = undefined
    ul.onclick = function (e) {
      console.log(e)
      let event = e || window.event
      let target = event.target || event.srcElement
      let className = target.className
      
      switch (className) {
        case value1:
          xxx
          break;
        case value2:
          xxx
          break;
        default:
          break;
      }
        //配合刚才的dataset，比如data-id,下面就可以使用id
        curId = target.dataset.id
    }