前端面试题汇总

都说亮哥像太阳
109 阅读6分钟

Html部分

1.如何理解html标签语义化

①代码可读性更高 ②利于搜索引擎seo优化

2.块元素和内联元素

块元素：div,p,ul,ol，h1，table,form 内联元素：a、span、i、strong、em、label、cite、code

css部分

1.盒模型宽度计算

内容宽+padding+boder（无margin） 设置box-sizing:border-box border和padding会向内收缩

2.margin纵向重叠

margin-bottom：20px；margin-top30px；两个div的间距为30px

3.margin负值的问题

需要注意margin-bottom和margin-right为负值的时候元素会出现重叠

image.png

4.bfc

把bfc看成一种属性，当拥有该属性的时候会有一个独立的渲染区域

5使用flex布局实现骰子

需要注意通过align-self属性不同轴方向的对齐方式 image.png

6.line-heigh:设置百分比

子元素继承父元素的line-height的百分比乘以fant-size image.png

js部分

1.event loop的执行过程

同步代码一行一行执行，遇到异步会先把函数放到web APIs里边等待时间到放到callback中去执行。 image.png

image.png

2.promise then catch 的状态返回

image.png 例子

1.
Promise.resolve().then(()=>{
    console.log('1')
}).catch(()=>{
    console.log('2')
}).then(()=>{
    console.log('3')
})
//执行结果  1   3
2.
Promise.resolve().then(()=>{
    console.log('1')
    throw new Error('错误')
}).catch(()=>{
    console.log('2')
}).then(()=>{
    console.log('3')
})
//执行结果  1 2  3
3.
Promise.resolve().then(()=>{
    console.log('1')
    throw new Error('错误')
}).catch(()=>{
    console.log('2')
}).catch(()=>{
    console.log('3')
})
//执行结果  1 2

3.async await

async 声明一个promise的函数，await类似于promise的.then回调接收resolve
捕获reject的异常需要使用 try {}catach(){}

基本内容
async function async1(){
     let res= await 100
    console.log(res)
}
async function async2(){
    let res =await Promise.resolve('200')
    console.log(res)
}
async function async3(){
    try{
       let res = await Promise.reject('300')
    }catch(err){
        console.log(err)
    }
    
}
面试题
async function async1(){
    console.log('asnc1 start')//2
    await async2()
    //await的后边都被看错是callback回调里的内容，即异步
    console.log('asnc1 end')//4
    await async3()
    console.log('asnc1 end2')//6
}
async function async2(){
    console.log('asnc2')//3
}
async function async3(){
    console.log('asnc3')//5
}
console.log('script start') //1
async1()
console.log('script end')//4

4.宏任务和微任务

宏任务：setTimeout，setInterval,dom事件--dom渲染后触发 微任务：promise，async/await---dom渲染前触发

为什么宏任务比微任务早

  • 微任务：ES 语法标准之内，JS 引擎来统一处理。即，不用浏览器有任何关于，即可一次性处理完，更快更及时。
  • 宏任务：ES 语法没有，JS 引擎不处理，浏览器（或 nodejs）干预处理。

5.手写深拷贝

function deepclose(obj){
    if(obj==null||typeof obj!="object"){
        return obj
    }
    let resut
    //instanceof检测obj是不是继承于Array
    if(obj instanceof Array){
        resut=[]
    }else{
        resut={}
    }
    for (let key in obj){
        //hasOwnProperty检测是不是本身的属性，而非原型链上的属性
        if(obj.hasOwnProperty(key)){
             resut[key]=deepclose(obj[key])
        }
       
    }
    return resut
}

6.==和===

除了==null都用===

7.truly和falsely

image.png

8.typeof能判断那些类型

识别所有类型，识别函数，判断是否是引用类型（不可在细分）

9.class

class prople{
    constructor(){
        //需要传入的值
    }，
    say(){
        //方法
    }
}
//继承使用entends  super

10.原型和原型链

image.png

11.作用域

作用域分为全局作用域，函数作用域，es6新增的块级作用域

12.闭包

1.函数作为参数被传递 2.函数作为返回值被传递

image.png *自由变量的查找，是在函数声明的地方查找，向上级作用域查找，不是在执行的地方

实际开发中的应用

    function cache(){
        let data={} //闭包中的数据被隐藏，不被外界访问
        return{
           get:function(key){return data[key]},
           set:function(key,val){data[key]=val}
        }
    }
    let a=cache()
    a.set('a',100)
    a.get('a') //100

闭包的影响

当在函数中声明一个变量，并且返回一个函数的时候，变量处于被引用状态，不能在执行完毕被销毁。占用内存。

13.手写bind函数

image.png

14.事件

event.preventDefault() //组织默认行为 event.stopPropagation() //阻止事件冒泡

15.手写简易的ajax

image.png

16.强制缓存和协商缓存

强制缓存cache-control：max-age，no-cache 协商缓存last-modified 和etag 304状态码

17.https加密过程

image.png

18.es模块化规范

1.export function a（）{} import{xx} from 2.var a={} export{a} import{xx} from 3.export default{a:1} import xx from

19.从输入url到页面渲染的整个过程

加载过程
1.dns解析域名获取ip地址
2.浏览器根据ip地址发送http请求
3.服务端处理http请求，并返回给浏览器 渲染过程
4.根据html代码生成dom tree
5.根据css生成cssom树
6.dom和css结合生成 renedr树
7.render树开始渲染
8.render树遇到script会暂停渲染，等待script执行完 在渲染
9.render渲染完毕

20.windows.onload和DomContentLoaded有啥区别

windows.onload 资源全部加载完，包含图片 DomcontentLoaded 资源加载完，不包含图片 如src 和href

21.防抖

image.png

22.节流

image.png

23.性能优化

让加载更快 1.减少资源的体积：压缩代码 2.减少访问次数：合并代码，ssr服务渲染，缓存 3.使用cdn 让渲染更快 4.css放在head，js放在body最下边 5.尽早执行js，用domcontentloaded触发 6.图片懒加载 7对dom进行缓存 8.减少频繁插入dom，合并一起插入 9.节流和防抖

24.var 和let 、const的区别

var是es5的语法。let和const是es6的语法；var有变量提升 var和let是变量可修改，cosnt不能修改 let和const 有块级作用域，var 没有

25.强制类型和隐式类型装换

强制：parseint parsefolat tostring 隐士：if 逻辑判断、==、+

26.pop、push、unshift、shift的作用

pop 删除数组中最后一个元素，返回删除的元素 push 后边添加一个元素，返回数组的长度 unshift 前边添加一个元素，返数组的长度 shift 删除第一个，返回删除的元素

27.纯函数（不会改变数组，并返回一个新的数组）

concat、map、filter、slice

28.get和post的区别

![image.png](p3-juejin.byteimg.com/tos-cn-i-k3… 42e758e616~tplv-k3u1fbpfcp-watermark.image?)

29.[10,20,30].map(parseInt)

拆分 let res=[10,20,30].map((item,index){ return parseInt(item,index) }) 返回[10,nan,nan]

30.阻止事件冒泡和默认行为

image.png

31.函数声明和函数表达式的区别

image.png

# vue

## 1.手动实现v-model

image.png

2.Object.defineProperty的缺点

1.深度监听需要递归到底，一次性的计算量很大 2.无法监听新增的属性和删除的属性，可以通过vue.set/vue.delete 实现 3.无法监听原生数组，需要特殊处理。获取数组原型上的方法，通过object.create()创建一个新的对象并把把原型链指向新的对象上。

3.js模拟dom结构

image.png

4.snabdom的重点 1.h函数 2.vnode结构 3.path函数 5.vdom 1.用js模拟dom 2.新旧vnode对比，得出最小的更新范围，最后更新dom 3.数据驱动视图的模式下，有控制dom操作 vdom的核心概念 h，vnode，path，diff，key

avatar
文章
阅读
粉丝