2023前端面试题

1.script怎么异步加载?

script默认是同步的,但由于script外部链接文件太大或者网络不好就会造成不好体验.所以在html4就定义了defer,html5定义了async用于异步加载script

defer:加载后续文档元素的过程中，将与JS加载，并行进行（异步）。但JS的执行，要等到所有的文档元素解析完成之后，DOMContentLoaded事件触发之前完成

async:加载后续文档元素的过程中，将和JS的加载与执行，并行进行（异步）

async和defer的共同点：

• 不会阻塞文档元素的加载
• 使用这两个属性的JS脚本中，不能调用document.write方法
• 只适用于外部脚本，把延迟脚本放在页面底部加载是最优选择

async和defer的不同点：

• 每一个async脚本加载完毕后就会立即执行，一定会在window.onload之前执行。但可能会在DOMContentLoaded之前或者之后执行，不能保证顺序。如果JS脚本有依赖性，就需要格外注意，执行异步脚本的目的是不让页面等待脚本的下载和执行，从而异步加载页面的其他内容。因此，建议异步脚本不要在加载期间修改DOM节点。
• 每一个defer脚本都是在文档元素完全载入之后，一般会在DOMContentLoaded之前执行，相当于window.onload，但应用上比window.onload更灵活。

2.vue-router有哪些钩子函数(重点)

官方:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的

(1)全局钩子函数

beforeEach(to,from,next)

afterEach(to,from)

(2)单个路由钩子

beforeEnter()

beforeLeave()

(3)组件内部钩子

• beforeRouteEnter

• beforeRouteUpdate

• beforeRouteLeave

3.防抖节流用过吧?如果是你该怎么实现?

vue防抖 自定义ref实现输入框防抖_vue输入框防抖_迪迦的博客-CSDN博

Vue处理防抖和节流，项目中封装防抖和节流自定义指令_vue封装防抖节流指令_革履西装的博客-CSDN博客

4.自定义指令用过吧,有什么作用?(重点)

自定义指令可以除了vue几个指令外个性化定制自己想要的

请参照官方文档:自定义指令 — Vue.js (vuejs.org)

5.浏览器缓存,具体操作又是怎样?(重点)

具体详情可以看这篇文章浏览器强缓存与协商缓存详解以及实践_小小瀚的博客-CSDN博客

6.ES6 JS怎么继承?

JS高级 之 ES6 实现继承_js class多继承_玄鱼殇的博客-CSDN博客

7.箭头函数和普通函数有什么区别?箭头函数this指向哪?

省略function,省略return,箭头函数都是匿名函数,不能用于构造函数(也就是无法new)

this指向可以看这篇文章:关于箭头函数中的this的指向_箭头函数的this指向_大飞子在路上的博客-CSDN博客

8.说下懒加载图片自己写的思路?

【前端】图片懒加载的原理和三种实现方式_前端懒加载及其实现方式_hxxfight的博客-CSDN博客

9.vue-router有几种模式

history,hash两种

10.history对后端有什么影响?

history 利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持
history模式，会出现404 的情况，需要后台配置

问题和配置情况可以参考这篇文章

vue-router路由模式为history，导致的问题 · 大前端精选 - 面试题

11.new操作符干了什么?

在javascript中,new操作符用于用于创造一个给定构造函数的实例对象

手写new操作符

function whatNew(Func,...args){
//1.创建一个新对象
const obj = {}
//2.新对象原型指向构造函数原型对象
obj.__proto__ = Func.prototype
//3.将构造函数new指向新对象
let result = Func.apply(obj,args)
//4.根据返回值判断
return result instanceof Object?result:obj
}

测试代码:

function persion(name,age){
this.name = name;
this.age = age;
}
Persion.prototype.say = function(){
console.log(this.name+'说话');
}

let p = whatNew(Persion,'小米',13);
p.say(); //小米说话

2013/9/20更新:

12.我给setTimeout 定10秒后执行能否准时?

不能,详情请点击

13.什么是线程,什么是进程?

进程与线程

后面会继续补充