2022前端面试题总结

定义

一.何谓SEO

1.提供搜索引擎能抓取的格式2.将ass与as等脚本文件以引用方式进行处理
3.提供搜索引擎能阅读的内容4.善用图片或者图像的Alt属性
5.经常更新页面内容6.使用唯一的元数据
7.适当地使用标题标签8.遵守W3C标准

二.请描述一下cookies，sessionStorage和localStorage的区别？

⒈local长期存储数据，浏览器关闭数据后不丢失；

⒉sessionStorage数据在浏览器关闭后自动删除；

⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client   Side）上的数据（通常经过加密）。cookie始终在同源的HTTP请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session  storage和local storage不会自动把数据发给服务器，仅在本地保存；

⒋存储大小：cookie数据大小不会超过4K，session  storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；

⒌有期时间：local  storage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。session  storage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

三：jquery绑定click的方法有几种

Bind，on ，live，delegate

四：XSS攻击和CSRF攻击

<1. XSS攻击--跨站脚本攻击

场景：比如在正常发表文章，或评论他人文章时，注入恶意脚本。待他人查看时触发恶意脚本达到攻击目的.

1. 通过注入的标签事件触发
2. 通过注入的带有Sript属性的标签触发  （防御：利用正则检查输入内容进行过滤）

<2. CSRF攻击--跨站请求伪造攻击

场景：CSRF攻击者在用户已经登录A网站之后，诱使用户访问一个B页面，利用A网站对用户的信任，以用户身份在B页面对目标网站发起伪造用户操作的请求，达到攻击目的。

(防御：使用token)

五.HTTP和HTTP有什么区别?

1、HTTP协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

1. HTTPs协议：是具有安全性的SLR加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

3、HTTP协议：HTTP的连接很简单，是无状态的。

4、HTTPs协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

5、HTTP协议：使用的端口是80。

6、HTTPs协议：使用的端口是443．

7、HTTP协议：免费申请。

8、HTTPs协议：需要到ca申请证书，一般免费证书很少，需要交费。

六：发送 Ajax 请求的五个步骤

（1）创建异步对象。即 Frequentest 对象。

（2）设置请求的参数。包括：请求的方法、请求的Burl。

（3）发送请求。

（4）注册事件。 noninterchangeable事件，状态改变时就会调用。

（5）获取返回的数据。

七：post和get的区别？

1、get是从服务器上获取数据。

2、post是向服务器传发送数据。 

1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 

务器端用Request.Form获取提交的数据。 

3、get传送的数据量较小，不能大于2KB。

4、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 

5、get安全性非常低。6、post安全性较高。

八：HTTP常见响应状态码及解释、常用请求头及解释

2XX Success(成功状态码)   3XX Redirection(重定向状态码)

4XX Client Error(客户端错误状态码)

403 该状态码表明对请求资源的访问被服务器拒绝了。
404 该状态码表明服务器上无法找到请求的资源

5XX Server Error(服务器错误状态码)
500 该状态码表明服务器端在执行请求时发生了错误。
503 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求

九：web前端性能优化

使用CDN代理

减少外部HTTP请求

压缩HTML、CSS和JavaScript

优化图片，使用字体图标，优化图片大小

少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

十：new操作符具体干了什么

1、创建一个 空对象，并且this变量引用该对象，同时还继承了该函数的原型

2、属性和方法被加入到this引用的对象中

3、新创建的对象由this所引用，并且最后隐式的返回this

十一：：页面导入样式时，使用link和@import有什么区别？

区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。

区别4：link支持使用Java script控制DOM去改变样式；而@import不支持。

十二：伪类和伪元素

1. :hover和:active，：focus，：link伪类使用单冒号
2. 伪元素种类    比如::before和::after等伪元素使

十三：原型，原型链

原型链:

1. 每一个构造函数都有一个prototype属性，称之为显示原型
2. 每一个引用类型都有一个_proto_属性，称之为隐示原型
3. 每一个引用类型的_proto_指向他的构造函数prototype
4. 每一个构造函数都有自己的_proto_,因为函数本身就是一个引用类型，这个构造函数的_proto_又指向他自己狗展函数的prototype，这样一级一级向上就形成了原型链

原型：简单来说就是一个构造函数，当用这个构造函数new一个实例的时候，这个实例的原型就是这个构造函数，js所有的引用类型都有自己的构造函数

var arr =[]  的时候 其实就是等于var arr= new Array（）

十四：继承

原型继承，构造函数继承，组合继承，寄生继承，寄生组合继承，class

十五：闭包

闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数访问外部函数变量，从而导致垃圾回收机制没有将当前变量回收掉。这样的操作，有可能会带来内存泄漏。好处就是可以设计私有的方法和变量。

闭包就是一个函数，两个函数嵌套在一起，内部函数就是闭包。形成闭包的条件：内部函数需要通过return返回出来。

十六：深浅拷贝

1.Object.assign方法来实现

2.JSON.parse(JSON.stringify(object));

十七：script标签如何实现异步加载

1. defer：等到整个页面在内存中华正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行；

     2. async是一旦下载完成，渲染就会中断，执行这个脚本之后，再继续渲染。

十八：for in与for of用法及区别

for in 得到对象的key或数组，字符串的下标

For of 和for Each 直接得到值

For of 对象不能用

十九：px、em、rem的区别？

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3.rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。

二十：undefined与null的区别

相同点：undefined和null在if语句中，都会被自动转为false

不同点：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，

转化为数字问NaN

二十一：简单的闭包

function fn1(){
      function fn2(){
            alert(1)
      }
       return f2
 }
       f1()

二十二：那些操作会造成内存泄漏

1. 什么是内存泄漏

当有变量和对象，应该被回收，而没有被回收时，一直占用和停留在堆内存中，这就产生内存泄漏。

1. 内存泄漏影响
   内存泄漏会导致内存被占用过多无法释放，从而导致系统内存分配不足，造成了内存溢出从而导致应用Crash（浏览器崩溃）。
   3，前端造成内存泄漏的操作

1，闭包

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，过多的使用闭包，不及时释放，会导致内存泄漏。

2.意外全局

3.定时器

二十三：浏览器内核

IE浏览器内核：IE内核                                 Chrome浏览器内核：现在是Blink内核；

hrome浏览器内核：现在是Blink内核；        Safari浏览器内核：Webkit内核；

css

一：CSS 盒子模型(Box Model)

外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

二：CSS之绝对定位与相对定位的区别

position: absolute

绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

三：使一个div居中显示的三种方法

1. div{width: 200px;height: 200px;position: absolute; background-color: orchid;top: 50%;left: 50%; margin-top: -100px;margin-left: -100px;}       
2.  div1 {width: 700px;height: 600px;background-color: orange;display: flex;align-items: center;justify-content: center; }

四：清除浮动

父级div定义伪类：

1.after和zoom2.在结尾处添加空div标签clear:both

3.父级div定义height4.  5..父级div定义overflow:hidden

6.父级div也一起浮动

五：CSS3新特性有哪些？

文字阴影(text-shadow) 3、边框：圆角（border-radius）边框阴影：box-shadow 4、盒子模型：box-sizing 6、渐变：linear-gradient、radial-gradient  7、过渡：transition可实现动画  8、自定义动画10、多媒体查询、多栏布局  12、2D转换：

js

一.call和apply函数的作用

相同点：改变this的指向

不同点：apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。

call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来

二.如何阻止事件冒泡和默认（行为）事件？

IE：

window.event.cancel Bubble = true;//停止冒泡

window.event.return Value = false;//阻止事件的默认行为

Firefox：

event.prevent Default();// 取消事件的默认行为

event.stoppropriation(); // 阻止事件的传播

三：conquer $(document).ready() 与window.download的区别

1.执行时间 

        window.download必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

2.编写个数不同 

         window.download不能同时编写多个，如果有多个window.download方法，只会执行一个
         $(document).ready()可以同时编写多个，并且都可以得到执行

四：数组去重的方法

方法一：

var arr=['1','2','3','3','4','3']

console.log([...new Set(arr)])

方法二：

var arr=['1','2','3','3','4','3']

console.log(Array.from(new Set(arr)))

方法三：双重for循环，splice去重

var arr=[1,2,3,4,5,6,2,3,4]

function fun(arr){

    for(var i=0;i<arr.length;i++){
       for(var j=i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){
               arr.splice(j,1)
               j-- 
           }

        }
     }

    return arr
}
console.log(fun(arr))

五：数组排序

var arr=[1,5,7,9,16,18,3,13]
var tem;

for(var i=0;i<arr.length;i++){
   
    for(var j=0 ; j<arr.length+1;j++){
     
      if(arr[j]>arr[j+1])
          tem=arr[j]
          arr[j]==arr[j+1]      
          arr[j+1]==tem
    }
  
 }
console.log(arr)

vue

一：谈谈你对组件的看法

可组合（Comparable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件；

可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景；

可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。

二：vue代码优化问题

1、路由懒加载

当打包构建应用时，Java script 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

2、代码模块化

咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

3、for循环设置key值

在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

5、可以使用keep-alive

keep-alive是vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

6、节流防抖

7、图片的懒加载

使用Ladylove库

打包层面

不让css打包在一起(让css文件和单文件打包在一起)

webpack.prod.cofig.js 里面把所有块打包在一起设置为false

all Chunks: false,

2、不生成.map文件

把underproduction设置为false。

3.减少图片使用

4、按需引入

三：vue中的节流和防抖

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

使用场景：频繁触发、ionizer，on scroll滚动条

因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

使用场景：频繁触发、输入框搜索

因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。

四：常见的跨域解决

1.webSocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。

2. nginx反向代，实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。

3.window.name + iframe

4.location.hash + iframe

5. document.domain + iframe

五：jsonp跨域原理

jsonp就是利用过动态srcipt标签的src属性来实现 。

SONP 的缺点是：它只支持 GET 请求，而不支持 POST 请求等其他类型的 HTTP 请求

六：new操作符具体干了什么

1、创建一个 空对象，并且this变量引用该对象，同时还继承了该函数的原型

2、属性和方法被加入到this引用的对象中

3、新创建的对象由this所引用，并且最后隐式的返回this

七：MVVM简要

Model：数据模型，用来存储数据

View：视图界面，用来展示UI界面和响应用户交互

Controller：控制器(大管家角色)，监听模型数据的改变和控制视图行为、处理用户交互

八：vue双向绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，Geeter，在数据变动时发布消息给订阅者，触发相应的监听回调

九 ：watch和computed区别 及二者使用场景

计算属性computed : 

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

2、使用场景

computed 

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的例子： 购物车商品结算的时候

watch

　　　　当一条数据影响多条数据的时候就需要用watch，搜索数据

十：Vue父子组件通信 

1.父组件向 子组件 传参

props : 父组件 向 子组件 传参

 2.子组件 向 父组件 传递数据

emit :子组件 向 父组件 传递数据，必须通过 事件 触发

例：

firmament: {

type: String,//规定值的类型

required: true //必须传值，否则报错

def ult：‘小胡’

},

3.Vue中非父子组件传值的问题

公共实例文件bus.js，作为公共数控中央总线

 Bus.$emit('TX,this.value);进行传递

Bus.$on('TX,function(val) 进行接收

十一：react与vue的区别

 vue使用的是template模版编写。react使用的是JxS语法。

 数据流不同：vue可以进行组件与dom之间module双向绑定。react从始至终都只有单向数据流

十二：为什么使用Vue.set()

因为受现代JS的限制，vue不能检测到对象属性的添加或删除。

Vue.set(object, key, value)

十三：js实现双向数据绑定

通过object.defineProperty()定义要修改的属性，通过set()设置，get()获取新值，document.addEventListener()监听值得变化

十四：vue Data为什么是一个函数

只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。