前端常见面试题（8

5. right直接为margin-left为负的自身宽度

扩展一下：用flex弹性布局写三栏布局

头部

中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间

左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

尾部

过程：

1. 整体有三行，所以column模式把header、container、footer先布置好

2. 然后container中有三列，直接用正常的flex模式

3. 对于之前的left忘记变动位置，所以order要小一些这里用-1（如果布局上用left、main、right的顺序就不需要了）

4. 之后设置felx：1的模式即可（grow为1 shrink为1 basic为0），用于占用剩余所有宽度

跨域请求的方法

---

跨域的原因：浏览器的同源策略，协议、域名、端口号都要一致

解决：

1. jsonp，只能get

2. 服务器代理

3. cors后端设置响应头部

4. iframe嵌套通信postmessage

事件绑定和事件委托

---

什么是原型链

---

实例对象函数都有_proto_，函数有prototype才可以new出新对象（箭头函数就不行）

什么是闭包

---

如果有一个函数，内部访问了外部的变量，就形成了闭包。这个访问了外部变量的函数被调用了，外部变量就不会被销毁

例子中的times就会被newFn记住并且达成需求

Ajax

---

ajax是客户端异步请求数据并且动态更新内容无需重新加载的一种方式。

现在虽然有很多ajax的工具甚至已经有fetch这种html5新加入的异步获取ajax的方式

但是原生还是很重要的

//get请求

let xml

if(window.XMLHttpRequest){

xml=new XMLHttpRequest()

}else{

//兼容老版本

xml=new ActiveObject(“Microsoft.XML.HTTP”)

}

xml.onreadystatechange=()=>{

if(xml.readyState=4%%xml.status200){

console.log(xml.responseText)

}

}

xml.open(‘get’,url,true)

xml.send();

//post请求

let xml

if(window.XMLHttpRequest){

xml=new XMLHttpRequest()

}else{

//兼容老版本

xml=new ActiveXObject(“Microsoft.XML.HTTP”)

}

xml.onreadystatechange=()=>{

if(xml.readyState=4%%xml.status200){

console.log(xml.responseText)

}

}

xml.open(‘post’,url,true)

xml.send(data);

ajax的优点

1. 交互性更好

2. 减少与服务器的连接

3. 状态可以维护到一个页面上，更改dom即可

4. 基本上SPA单页面应用很支持

ajax的缺点

1. 动态网页很难收藏

2. 受限于js代码，如果被禁用则获取不了数据

3. 不适合于搜索引擎优化SEO

原生ajax和fetch的区别：

1. fetch更简单

2. fetch无法取消请求，因为基于promise

3. 默认情况下fetch不会接受和发送cookies

4. fetch无法实时获取进度

5. fetch只对网络请求报错，需要自己判断返回请求码

6. fetch兼容性比不上XMLHttpRequest

cookie、loaclStorage、sessionStorage

---

创建对象几种方式

---

改变this指向

---

1. bind、call、apply改变绑定

2. 箭头函数没有自己的this，拿到父级上下文的this

3. new新建实例对象，this指向对象

浏览器渲染的重绘和回流（重排）

---

html->dom,css->cssom

dom+cssom->render tree

重绘：由于节点的属性、样式变化不会影响布局的成为重绘，比如outline、visibility、color、baackground等触发的是重绘。重绘代价相比于回流还可以，是因为浏览器要分析其他节点的可见性。

回流：也称重排，表示布局发生变化，一定会触发重绘。代价更大，会导致其子节点和后面所有节点的回流

如何减少：

1. 使用transform

2. 使用visibility代替display：none

3. 避免table布局

4. 尽可能在最末端改变class

5. 避免设置多层内联样式

6. 将动画效果应用到absolute或者fixed的元素上

7. 选择使用requestAnimationFrame执行动画

8. 避免使用clac表达式

9. 频繁重绘回流的节点设置为图层（will-change、video、iframe等）

10. css3硬件加速（GPU加速），可以让transform、opacity、filter等动画不引起重绘

11. js避免直接操作样式，最好通过class操作

12. 避免频繁操作dom，尽量使用变量缓存节点

13. 复杂的js操作dom的节点最好放在脱离文档流中

浏览器和node的宏任务与微任务机制

---

浏览器中

微任务比如：promise的then回调、async的await的返回值等

浏览器中，有两个任务队列一个执行栈，在我们执行js代码的时候执行顺序是这样的

首先第一次在执行队列顺序执行一遍所有的宏任务（因为第一次js把整个script当成一个宏任务执行）

并且途中把所有的微任务加入到微任务队列

此时会执行所有的微任务并且把微任务所形成的宏任务都依次放到宏任务队列

在执行每个宏任务的同时把形成的微任务栈清空

node中

emmm现在的node版本已经普遍12+了，除了nextTick基本上都能统一规范了

详细

这道题对于的顺序：

1. 整体作为script代码一个宏任务逐行执行完毕，发现没有输出并且把第2-5行的代码加入到微任务队列，把8-11放入到宏任务队列。

2. 由于setTimeout是宏任务所以在微任务的后面执行，所以这时候输出Promise1

3. 并且把3-5行的setTimeout也追加到宏任务队列

4. 微任务队列空，执行第一个宏任务，输出setTimeout1，并执行promiese，把then的部分加入到微任务队列

5. 此时刚执行完宏任务，执行微任务输出Promise2

6. 此时微任务队列空，执行最后一个宏任务，输出SetTimeout2

7. 微任务空且宏任务空，事件循环结束

浏览器缓存详解

---

Token服务端身份验证方案

---

前端与数据埋点

---

所谓埋点就是前端应用中手机的数据，比如访问数、访客数、停留时长、页面浏览数、跳出率等等，基本上就是页面统计和操作统计

创建img标签之后还要追加到dom中才能够发送请求

http和https的理解

---

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
52696](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vbXVzLXovYmxvZ0ltYWdlL3Jhdy9tYXN0ZXIvaW1nLzIwMjAwODAyMTg0ODUzLnBuZw?x-oss-process=image/format,png)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-uadVPOp1-1715884995424)]

[外链图片转存中…(img-s1vNOvzF-1715884995425)]

[外链图片转存中…(img-dg8lbFaa-1715884995425)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！