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

五:数组排序

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

for(var i=0;iarr[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是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。

你可能感兴趣的:(前端,html,jquery)