首页 > 其他分享 >前端面试基础题

前端面试基础题

时间:2023-06-20 15:33:31浏览次数:39  
标签:... 跨域 前端 基础 server 面试 client cookie 请求

1.Ajax,Axios,Fetch有什么区别?

(1)三者都用于网络请求,但是维度不同
(2)Ajax(Asynchronous javaScript and XML),一种技术统称
(3)Fetch是一个具体的API,浏览器原生API,用于网络请求,和XMLHttpRequest是一个级别,Fetch语法更加简洁,易用,支持Promise
(4)Axios是第三方库(),内部可以用XMLHttpRequest或者Fetch来实现

注意点:lib和API的区别:

API是原生的函数,库lib是第三方的工具,库需要用API开实现。

2.节流和防抖

(1)二者有什么区别:

防抖:当一个动作连续触发,只执行最后一次。通俗来说,,就是防止抖动,“你先抖动着,啥时候停了,在执行下一步”,例如一个搜索输入框,等输入停止之后,再出发搜索。

输入框防抖实现:
<template>
    <div>
       输入框: <input id="input1"/>
    </div>
</template>

<script>
export default {
    name: 'FangDou',

    data() {
        return {
            
        };
    },

    mounted() {
        const input1 = document.getElementById('input1')
        
        input1.addEventListener('keyup',this.debounce(()=>{
            console.log('发起搜索',input1.value)

        },200))
        
    },

    methods: {
        debounce(fn,delay=200){
            let timer = 0
            return function(){
                if(timer) clearTimeout(timer)
                timer = setTimeout(()=>{
                    fn.apply(this,arguments)
                    timer = 0
                },delay)
            }
        }
    },
};
</script>

节流:限制一个动作在一段时间内只能执行一次。节省交互沟通。流不一定指流量。“别急,一个一个来,按照时间节奏来,插队者无效”。
鼠标拖拽节流的代码实现:
<template>
    <div>
        <div id="div1" draggable="true"
            style="width:100px;height:100px;background:#bfa;text-align:center;line-height:100px">可拖拽</div>
    </div>
</template>

<script>
export default {
    name: 'JieLiu',

    data() {
        return {

        };
    },

    mounted() {
        const div1 = document.getElementById('div1')
        div1.addEventListener('drag', this.throttle((e) => {
            console.log('鼠标拖拽的位置:', e.offsetX, e.offsetY)
        }, 100))

    },

    methods: {
        // 节流
        throttle(fn, delay = 200) {
            let timer = 0
            return function () {
                if (timer) return
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = 0

                }, delay);
            }
        }

    },
};
</script>
 
节流与防抖的区别是:
(1)节流限制执行频率,有节奏的执行;
(2)防抖限制执行次数,多次密集的出发只执行一次;
(3)节流关注过程,防抖关注结果。

3.px,%,rem,em,vw,vh有什么区别

(1)px是基本单位,绝对单位(其他的都是相对单位)
(2)%是相当于父元素的宽度比例
(3)em是相对于当前元素的font-size
(4)rem是相对于根元素的font-size
(5)vw是屏幕宽度的1%
(6)vh是屏幕高度的1%
(7)vmin是vw和vh的最小值,vmax是两者的最大值

4.箭头函数有什么缺点,哪里不能用箭头函数?

箭头函数的缺点是:
(1)没有arguments
(2)无法通过apply,call,bind改变this,箭头函数的this是父作用域的this
(3)某些箭头函数的代码难以阅读

箭头函数不适用的情况:
(1)对象方法
(2)原型方法
(3)构造函数
(4)动态上下文中的回调函数
(5)vue的生命周期和methods

5.请描述Tcp的三次握手和四次挥手

建立TCP连接,先建立连接(确保双方都有收发消息的能力)
再传输内容(如发送一个get请求)
网络连接是TCP协议,网络传输是HTTP协议

三次握手-建立连接:

(1)client发包,server接收。server:有client要找我
(2)server发包,client接收。client:server已经收到消息了
(3)client发包,server接收。server:client要准备发送了

四次挥手-断开连接:

(1)client发包,server接收。server:client已请求结束
(2)server发包,client接收。client:server已经收到,我等待他关闭
(3)server发包,client接收。client:server此时可以关闭连接了
(4)client发包,server接收。server:可以关闭了(然后关闭连接)

6.for...in和for...of有什么区别?

(1)for...in遍历得到key
(2)for...of遍历得到value
(3)遍历对象,for...in可以,for...of不可以
(4)遍历map,set,for...of可以,for...in不可以
(5)遍历generator,for...of可以,for...in不可以

可枚举VS可迭代:
(1)for...in用于可枚举数据,如对象,数组,字符串,得到key
(2)for...of用于可迭代数据,如数组,字符串,Map,Set,得到value

7.for...await...of有什么作用?

(1)for...await...of用于遍历多个promise

8.offSetHeight,scrollHeight,clientHeight有什么区别?

计算规则:
(1)offSetHeight,offSetWidth:border+padding+content
(2)clientHeight,clientWidth:padding+content
(3)scrollHeight,scrollWidth:padding+实际内容尺寸

9.HTMLCollection和NodeList有什么区别?

(1)HTMLCollection是Element的集合
(2)NodeList是Node集合

注意点:

(1)获取Node和Element的返回结果可能不一样
(2)如element.childNodes和element.children不一样
(3)前者包含Text和comment节点,后者不会

10.vue中computed和watch有什么区别?

(1)computed用于计算产生新的数据,有缓存
(2)watch用户监听现有数据
(3)computed有缓存,methods没有缓存

11.vue通信方式有什么?尽量全面

(1)父组件给子组件传值用props,$parent
(2)子组件给父组件传值用$emit,$refs(vue3),$children(vue2)
(3)不相关的组件通信用event自定义事件
(4)$attrs用于接收没有被接收的属性和方法,本质上是props和$emit的候补
(5)多层级组件之间传值可以用provide(产生数据)和inject(使用数据)
(6)全局组件:全局事件总线eventBus和vuex

12.vuex中的mutation和action有什么区别?

(1)mutation是原子操作,必须同步代码
(2)action可包含多个mutation,可包含异步代码

13.js严格模式有什么特点

(1)全局变量必须先声明
(2)禁止使用with
(3)创建eval作用域
(4)禁止this指向window
(5)函数参数不能重名

14.HTTP跨域请求时为何发送options请求

跨域请求:
(1)浏览器的同源策略
(2)同源策略一般限制ajax请求,不能跨域请求server
(3)不会限制<link>,,<script>,<iframe>加载第三方资源
(4)跨域:当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同,就说该接口跨域了。
(5)跨域限制的原因:浏览器为了保证网页的安全,出的同源协议策略
(6)跨域解决方案

<1> cors:目前最常用的一种解决办法,通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

<2> node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。

<3>JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回文档类型,应该设置成javascript。

<4>postmessage:H5新增API,通过发送和接收API实现跨域通信。

HTTP跨域请求时为何发送options请求的原因:

(1)options请求时跨域请求之前的预检查
(2)浏览器自行发起,无需我们干预
(3)不影响实际功能

15.JS内存泄漏如何检测?场景有哪些?

16.什么是垃圾回收?
17.移动端H5 click有300ms延迟,如何解决?

初期解决方案:FastClick
<script>
   
        window.addEventListener("load",function(){
            FastClick.attach(document.body)
        },false)

</script>
 原理:
 (1)监听touchend事件(touchstart, touchend会先于click触发)
 (2)使用自定义DOM事件模拟一个click事件
 (3)把默认的click(300ms之后触发)禁止掉
 
 现代浏览器的改进:有content="width=device-width"属性将不会延迟300ms
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
 答案:
(1)背景:double tap to zoom 
(2)FastClick
(3)width=device-width

18.网络请求中tocken和cookie有区别?

(1)cookie
        HTTP是无状态的,每次请求都要带cookie,以帮助识别身份。
        服务端也可以向客户端set-cookie,cookie大小限制4kb。
        默认有跨域限制,不可跨域共享,传递cookie。
     cookie本地存储: HTML5之前cookie常被用于本地存储,HTML5之后推荐使用localStorage和sessionStorage
     现代浏览器开始禁止第三方cookie:和跨域限制不同,这里禁止网页引入的第三方js设置cookie
     (打击第三方广告,保护用户隐私)
     新增属性sameSite:strict,lax,none三个值可选。
     Cookie 的SameSite属性用来限制第三方 Cookie,从而减少安全风险。
(2)cookie和session:
    cookie用于登录验证,存储用户标识(如userId)。
    session在服务器端,存储用户详细信息,和cookie信息一一对应。
    cookie+session是常见的登录验证解决方案。
 

 token VS cookie:
 (1)cookie是HTTP规范,而token是自定义传递
 (2)cookie会默认被浏览器存储,而token需要自己存储
 (3)token默认没有跨域限制
 
 JWT(JSON Web Token):可以取代cookie+session的方式,用于用户登录校验;
 前端发起校验,后端验证成功之后,会返回一个加密的token;
 前端自行存储这个token(其中包含用户信息,加密了);
 以后访问服务器端接口,都带着这个token,作为用户信息;
 
 划重点:
 (1)cookie知识点很多,对HTTP也很重要;
 (2)session存在的价值:配合cookie使用;
 (3)token和cookie要对比理解,否则容易混淆;
 
 
 
 答案:
 (1)cookie是HTTP标准,有跨域限制,配合session使用;
 (2)token无标准,无跨域限制,用于JWT。
    

19.Session和JWT哪个更好?(连环问)

Session的优点:
(1)原理简单,易于学习
(2)用户信息存储在服务端,可快速封禁某个用户
Session的缺点:
(1)占用服务端内存,硬件成本高
(2)多进程,多服务时不好同步,需要使用第三方缓存,如redis。
(3)默认有跨域限制
JWT的优点:
(1)不占用服务端内存
(2)多进程多服务不受影响
(3)无跨域限制
JWT的缺点:
(1)用户信息存储在客户端,无法快速封禁某个用户
(2)万一服务端秘钥被泄漏,用户信息将全部丢失
(3)token体积大于cookie,会增加请求的数据量

答案:如果有严格管理用户信息的需求(保密,快速封禁),推荐使用Session。
如果没有特殊要求,则使用JWT,如创业初期的网站。

20.如何使用SSO单点登录?(连环问)

基于cookie:
(1)cooki默认不可跨域共享,但有些情况下可设置为共享,
(2)当主域名相同,如www.baidu.com,image.baidu.com,
(3)设置cookie domain为主域名,即可共享cookie。
(4)如主域名完全不同,则cookie无法共享。
(5)可使用SSO技术方案

标签:...,跨域,前端,基础,server,面试,client,cookie,请求
From: https://www.cnblogs.com/liqinzhen/p/17493760.html

相关文章

  • 前端面试题(js)
    1.this解析器在调用函数时,每次会向函数内部传递一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,根据函数调用方式的不同,函数会指向不同的对象。(1)以函数形式调用时,this永远指向window(2)以方法的形式调用时,this指向调用方法的对象(3)当以构造函数形式调用时,this指......
  • Electron打包若依前端为桌面程序
    下面的步骤是我事后整理的,还需要第二个项目进行验证,才能知道是否完整。1.npminstallelectron--save-dev2.npminstallelectron-builder 3.设置图标的:npminstall electron-icon-builder 3.打开env.development文件修改:VUE_APP_BASE_API='线上地址/prod-api'4.在pac......
  • JavaScript(02): ECMAScript基础
    ECMAScript提供了实现通用程序设计任务必需的JavaScript的语法、运算符和基本对象。1.语法ECMAScript借用了Java、C等语言的语法,对于熟悉这些语言的开发者掌握ECMAScript的语法应该是非常容易的。区分大小写变量是弱类型:定义变量时只用var关键字并且可以将变量初始化为任意值每行......
  • Java面试题集(136-150)
    Java程序员面试题集(136-150)摘要:这一部分主要是数据结构和算法相关的面试题目,虽然只有15道题目,但是包含的信息量还是很大的,很多题目背后的解题思路和算法是非常值得玩味的。136、给出下面的二叉树先序、中序、后序遍历的序列?答:先序序列:ABDEGHCF;中序序列:DBGEHACF;后序序列:DGHEBFCA。补......
  • Java面试题集(131-135)
    131、请对以下JavaEE中的名词进行解释答:容器:容器为JavaEE应用程序组件提供了运行时支持。容器提供了一份从底层JavaEEAPI到应用程序组件的联合视图。JavaEE应用程序组件不能直接地与其它JavaEE应用程序组件交互。它们通过容器的协议和方法来达成它们之间以及它们与平台服......
  • Java面试题集(116-135)
    Java程序员面试题集(116-135)摘要:这一部分讲解基于Java的Web开发相关面试题,即便在Java走向没落的当下,基于Java的Web开发因为拥有非常成熟的解决方案,仍然被广泛应用。不管你的Web开发中是否使用框架,JSP和Servlet都是一个必备的基础,在面试的时候被问到的概率还是很高的。116、说出Servl......
  • Java基础知识思维导图
    ......
  • 前端学习笔记_思维导图和资源链接
    17素材资源jQueryapi中文文档脑图-前端总结脑图-jquery总结脑图-js正则总结后台主题框架echartsjQuery插件adminlte......
  • 一道SQL面试题(行列互换)
    有一个SQL题在面试中出现的概率极高,最近有学生出去面试仍然会遇到这样的题目,在这里跟大家分享一下。题目:数据库中有一张如下所示的表,表名为sales。年季度销售量19911111991212199131319914141992121199222219923231992424要求:写一个SQL语句查询出如下所示的结果。年一季度二季度三......
  • 强化学习从基础到进阶-常见问题和面试必知必答[2]:马尔科夫决策、贝尔曼方程、动态规划
    强化学习从基础到进阶-常见问题和面试必知必答[2]:马尔科夫决策、贝尔曼方程、动态规划、策略价值迭代1.马尔科夫决策核心词汇马尔可夫性质(Markovproperty,MP):如果某一个过程未来的状态与过去的状态无关,只由现在的状态决定,那么其具有马尔可夫性质。换句话说,一个状态的下一个状态......