前端面试题3

最新推荐文章于 2023-03-30 16:18:16 发布

Cheryl71

最新推荐文章于 2023-03-30 16:18:16 发布

阅读量424

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/Day71/article/details/114063913

版权

前端面试题专栏收录该内容

12 篇文章 2 订阅

订阅专栏

面试要点

1.js基础知识

参考答案

2.从输入url到获得页面经历的所有事情(越细越好)

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、发起ajax查询

参考链接

3.原型链

参考链接

原型

①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

4.继承

参考链接

5.es6新特性
参考链接

类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const

6.DOM事件和事件流

7.盒子模型

8.事件循环

9.BFC

10.Flex

11.Promise原理以及手写代码

12.vue响应式原理

13.vue虚拟dom & diff算法

14.前端性能优化

15.防抖和节流

16.HTTP缓存

17.常见算法(排序洗牌等)

面试中遇到的高频题(跟上面会有重合)

18.vue3解决什么问题

添加链接描述

19.Vue 为什么不能检测数组和对象的变化,怎么处理(为什么通过索引操作数组不能触发响应式)

添加链接描述

20.vue router原理

钩子函数	参考链接
全局守卫：	router.beforeEach
全局解析守卫：	router.beforeResolve
全局后置钩子：	router.afterEach
路由独享的守卫：	beforeEnter
组件内的守卫：	beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

21.v-model实现原理

1、绑定数据value
2、触发输入事件input

22.Vue.nextTick()：

添加链接描述

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

23.https的过程

添加链接描述

24.性能优化

添加链接描述

25.promise(基本上要求可以手写Promise.all方法,这个问的最多)

添加链接描述

26.async/await

添加链接描述

28.跨域形成原因以及解决方案

添加链接描述

29.深拷贝和浅拷贝(也会问到
添加链接描述

30.JSON.stringify JSON.parse这种方案的弊端)

添加链接描述

json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象。

1.parse 用于从一个字符串中解析出json 对象

var str='{"name":"TMD","sex":"男","age":"26"}';
console.log(JSON.parse(str));//{name: "TMD", sex: "男", age: "26"}

2.stringify用于从一个对象解析出字符串

var o={a:1,b:2,c:3};
console.log(JSON.stringify(o));//{"a":1,"b":2,"c":3}

31.箭头函数和普通函数有什么区别

添加链接描述

32.最近在看什么新技术

低频但是需要注意的面试题

33.CSRF & XSS

添加链接描述

34.chrome设置小于12px字体

-webkit-text-size-adjust: none;
/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */

35.node和浏览器事件循环有何不同

添加链接描述

36.webpack tree shaking

添加链接描述

37.map & set

添加链接描述

38.前端有哪些技术(腾讯面试题,面试官会顺着你说的技术一个一个展开问)

39.实现一个call/bind(call,apply,bind区别)

添加链接描述

40.get 和 post 的区别

get使用从服务器获得数据，而post是用来向服务器上传递数据
get将表单中数据按照variable=value的形式，添加到action所指的URL后面，并且两者用"?连接"而各个变量之间用"&"连接：post是将表单中的数据放在form的数据体中按照变量和值相对应的方式，传递到action所指向url
get是不安全的，因为在传输过程中，数据被放在请求的url中，post的所有操作对用户来说都是不可见的
get传输的数据量小，这主要是因为受url长度限制；而post可以传输大量的数据，所以在上传文件只能使用post
get限制from表单的数据集必须为ASCII字符，而post支持整个ISO10646字符集
get是from的默认方法

42.yield

添加链接描述

43.如何给localStorage加上max-age功能

添加链接描述

44.Object.defineProperties都有那些参数,以及参数解释

添加链接描述

45.requestAnimation

46.手写原型链和js各种继承模式

添加链接描述

47.让你重新做你做过的项目有什么可以改进的地方

48.让一个元素消失的几种做法，有何不同，对子元素的影响

添加链接描述

49.如何遍历对象(接下来会问有何不同)

添加链接描述

50.搜索框输入需要注意的点(其实还是在问防抖)

添加链接描述

51.原生实现inserAfter

function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

52.事件委托应用场景，e.target和e.currentTarget区别

添加链接描述

53.HTTP缓存，对应字段，cache-contron都有哪些值

添加链接描述

54.new过程都发生了什么

创建一个新对象
把构造函数的作用域赋值给新对象 this指向新对象
执行构造函数中的代码（为新对象添加属性）
返回一个新对象添加链接描述

添加链接描述

面试遇到的算法题

55.排序算法(冒泡,快排)

56.洗牌算法

57.v1.2.3 v0.3.0 这样的版本号比大小(找简单方法,不要随便写一个循环的版本)

添加链接描述

58.广度优先遍历

59.用O(n)的复杂度合并两个有序数组

60.数组生成树形结构

61.vue双向数据绑定原理

Cheryl71

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
前端面试题3

面试要点1.js基础知识https://blog.csdn.net/qq_39043923/article/details/892042632.从输入url到获得页面经历的所有事情(越细越好)1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。5、握手成
复制链接

扫一扫