前端面试题总结

Posted 2021-10-10 老张在线敲代码

1. 请说出四种降低页面加载的方法

1. 减少http请求
2. 按需加载，懒加载，预加载
3. 使用雪碧图，压缩图片代码
4. css样式按需引入
5. cdn静态托管

2. call，apply，bind的异同点

相同点：改变this指向

不同点：call参数一次传递，apply参数数组形式，bind需要调用，call和apply会立即执行

3. 本地储存和cookie之间的区别？

本地储存一直存在需要手动删除，cookie可以设置过期时间

cookie是唯一可以和服务器进行交互，

本地存储大小5M，cookie只有4kb

4.$router和$route区别？

$router是路由的实例对象

$route 当前路由信息

5. 对象、数组结构的不同点？

数组通过下标结构，对象则需要通过属性名结构

6.vuex工作流程

用户通过this.$dispatch调用action，actions将任务分发给muations，muations修改state，渲染到页面

7. js延迟加载方式？

1. async
2. defer
3. 放在底部
4. 动态创建script
5. setTimeOut

8. 手写防抖函数？

```jsx
function debounce(fn,delay){
    var timer=null;
    return function(){
        var context=this,arg=arguments
        if(timer){
            clearTimeOut(timer);
            timer=null
        }
        timer=setTimeOut(()=>{
            fn.apply(context,arg)
            fn()
        },delay)
    }
}

9…重绘，重排

重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，让元素显示新的外观。重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。 重绘不一定需要重排，重排必然会导致重绘

10.link和@import的区别

加载页面时，link标签引入的 CSS 同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

11. vue路由钩子函数

全局守卫

router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后

路由局部组件守卫

beforeRouteEnter 进入路由前
beforeRouteUpdate (2.2) 路由复用同一个组件时
beforeRouteLeave 离开当前路由时

12. 小程序事件对象传参方式

1、id传参

只能传递一个值
标签上使用id属性进行传递
事件中使用event.currentTarget.id进行接收

2、data传参

可以传递多个值
标签上使用bind-key 进行传递
事件中使用event.currentTarget.key进行接收

3、mark传参

mark 会包含从触发事件的节点到根节点上所有的 mark
标签上使用mark: key="value"进行传递
事件中使用event.mark.key进行接收

13. 模板字符串优点

支持换行且可以使用${ }包裹变量和表达式

14. jq和原生js的转换

1、js对象转换成jquery对象。 $(js对象);
2、jquery对象转换成js对象。 jq对象[索引] jq对象.get(索引)

15. jq链式调用

jq链式调用就是实例在调用内部方法的时候，返回当前调用这个方法的实例对象的this

16. 节流与防抖

防抖：就是指触发事件后函数只能执行一次，如果又触发了事件，则会重新计算函数执行时间。
节流：就是指连续触发事件但是只执行一次函数

17. vue 优缺点

有点:双向数据绑定，简单易用，性能好
缺点：它不适于seo优化，报错不明显，适合中小型项目