首页 > 其他分享 >前端八股(1)

前端八股(1)

时间:2024-11-09 17:44:28浏览次数:5  
标签:八股 浏览器 name 对象 前端 作用域 token 函数

跟着视频捋八股,效果还是可以的,就是得需要先有基础才能听得懂讲啥

以下是一些八股记录(简单版),可以帮助记忆关键词,从而后续自己拓展

目录

一、CSS

1.说一下css的盒模型

2.csS选择器的优先级?

3.隐藏元素的方法有哪些?

4.px和rem的区别是什么?

5.重绘重排有什么区别?

6.让一个元素水平垂直居中的方式有哪些?

7.css的哪些属性哪些可以继承?哪些不可以继承?

8.有没有用过预处理器?

9.清除浮动

10.BFC

二、JavaSscipt & ES6

1.JS由哪三部分组组成?

2.JS有曝些内置对象?

3.操作数组的方法有哪些?

4.JS对数据类的检测方式有哪些?

5.说一下闭包,闭包有什么特点?

6.前端的内存泄漏怎么理解?

7.事件委托是什么?

8.基本数据类型和引用数据类型的区别?

9.说一下原型链。

10.new操作符具体做了什么?

11.JS是如何实现继承的?

12.Js的设计原理是什么?

13.Js中关于this指向的问题

14.script标签里的async和defer有什么区别?

15.setTimeout最小执行时间是多少?16.ES6和ES5有什么区别?

16.ES6和ES5有什么区别?

17.ES6的新特性有哪些?

18.call,aply,bind三者有什么区别?

19.用递归的时候有没有遇到什么问题?

20.浅拷贝和深拷贝

21.说一下事件循环。

22.ajax是什么?怎么实现的?

23.get和post有什么区别?

24.promise的内部原理是什么?它的优缺点是什么?

25.promise和async await的区别是什么?

26.浏览器的存储方式有哪些?

27.token存在sessionstorage还是loaclstorage?

28.token的登录流程。

29.页面渲染的过程是怎样的?

30.DOM树和渲染树有什么区别?

31.精灵图和base64的区别是什么?

32.svg格式了解多少?

33.了解过JWT吗?

34.npm的底层环境是什么?

35.HTTP协议规定的协议头和请求头有什么?

36.说一下浏览器的缓存策略。

37.说一下什么是“同源策略”?

38.防抖和节流是什么?

39.解释一下什么是json?

40.当数据没有请求过来的时候,该怎么做?

41.有没有做过无感登录?

42.大文件上传是怎么做的?

43.作用域和作用域链

44.什么是面向对象编程

45 微任务和宏任务

46.什么是高阶函数,有什么使用场景

47.箭头函数和普通函数的区别

48.ES6如何改进类的定义和继承机制

49.Promise如何处理异步操作

50.Map和Set各自的特性

三、HTML5CSS3

1.语义化的理解。

2.Html5 C3有哪些新特性?

3.rem是如何做适配的?

4.解决了哪些移动端的兼容问题?

5.如何实现自适应视频



一、CSS
1.说一下css的盒模型

    在HTML页面中的所有元素都可以看成是一个盒子盒子的组成:

    内容content、内边距padding、边框border、外边距margin

    盒模型的类型:

    标准盒模型

    margin + border + padding + content

    IE盒模型

    margin +content(border+padding)

    控制模型的模式:box-sizing:content-box(默认值,标准盒模型)、border-box(IE盒模型);

2.csS选择器的优先级?

    CSS的特性:继承性、层叠性、优先级

    优先级:写CSS样式的时候,会给同一个元素添加多个样式,此时谁的权重高就显示谁的样式

    标签、类/伪类/属性、全局选择器、行内样式、id、!important

    !important >行内样式 >id >类/伪类/属性 >标签 >全局选择器

3.隐藏元素的方法有哪些?

    1.display:none;

    2.元素在页面上消失,不占据空间opacity:0;

    3.设置了元素的透明度为8,元素不可见,占据空间位置visibility:hidden;

    4.让元素消失,占据空间位置,一种不可见的状态position:absolute;

    5.clip-path

4.px和rem的区别是什么?

    px是像素,显示器上给我们呈现画面的像素,每个像素的大小是一样,绝对单位长度

    rem,相对单位,相对于html根节点的font-size的值,直接给html节点的font-size:62.5%;

    1rem = 10px;(16px*62.5%=10px)

5.重绘重排有什么区别?

    重排(回流):布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小

    重绘:计算好盒模型的位置、大小和其他一些属性之后,浏览器就会根据每个盒模型的特性进行绘制浏览器的渲染机制

    对DOM的大小、位置进行修改后,浏览器需要重新计算元素的这些几何属性,就叫重排对DOM的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘

6.让一个元素水平垂直居中的方式有哪些?

    1.定位+margin

    2.定位+transform

    3.flex布局

    4.grid布局

    5.table布局

7.css的哪些属性哪些可以继承?哪些不可以继承?

Css的三大转性:维承、层叠、优先   子元素可以维承父类元素的样式

    1.字体的一些属性:font

    2.文本的一些属性:1ine-height

    3.元素的可见性:visibslity:hidden

    4.表格参局的属性:bordor-spacing

    5.列表的属性:1lst-sty1e

    6.页面样式战性:Page

    7.声音的样式属性

8.有没有用过预处理器?

    预处理语言增加了变量、函数、混入等强大的功能

    SASS LESS

9.清除浮动

    1.额外标签法

    浮动元素之后添加一个空div或其他块级元素,并设置clear:both

    2.使用overflow属性触发BFC

    浮动元素的父容器上设置:overflow:hidden

    3.伪元素清除法

    利用:after伪元素为浮动元素的父容器添加看不见的内容,然后设置:clear:both; display:block; content:''

    4.直接设置高度

10.BFC

    块级格式化上下京浏览器在渲染过程中用于组织块级元素的一个独立渲染区域触发BFC的条件:

        1.float值不为None的元素

        2.position的值为absolute/fixed的元素

        3.display值为inline-block/table-cell/table-caption/grid/flex等非默认块级显示模式的元素

        4.overflow值不是visible的块级元素

    解决问题:

        1.外边距合并

        2.浮动元素的影响

        3.文字环绕效果

        4.防止外边距穿透

二、JavaSscipt & ES6
1.JS由哪三部分组组成?

    ECMAScript;Js的核心内容,播述了语言的基础语法。比如var,for,数据类型(数组、字符)

    文档对象模型(DOM):DOH把整个Html页面规划为元素构成的文档

    浏览器对象模形(B0M):对浏览器窗口进行访问和操作

2.JS有曝些内置对象?

    String Boolean Number Array object Function Math Date RegExp...

    Math

        abs()sqrt()max()min()

    Date

        new Date() getYear()

    Array

        String

    concat()length slice()split()

3.操作数组的方法有哪些?

    push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter()

    ervery() some() reduce() isArray() findIndex()

哪些方法会改变原数组?

    push()pop()unshift()shift()sort()reverse()splice()

4.JS对数据类的检测方式有哪些?

    typeof  

        typeof 'a'

    instanceof()  

        'a' instanceof String

    constructor  

        ('a').constructor === String

    Object.prototype.tostring.call()  

        let opt = Object.prototype.toString;

        console.log(opt.call('a'))

5.说一下闭包,闭包有什么特点?

    什么是闭包?

        函数嵌套函数,内部函数被外部函数返回并保存下来时,就会产生闭包

        当一个函数被定义并在其外部作用域中有自由变量时,若该函数作为值被返回或者被赋值给一个变量,那么即使在其外部作用域结束后,该函数仍能继续访问并改变这些自由变量,那么这样的函数连同其所访问的外部变量环境一起形成了闭包

    特点:

        可以重复利用变量,并日这个变量不会污染全局的一种机制:这个变量是一直保存再内存中,不会被垃圾回收机制回收

    缺点:

        闭包较多的时候,会消耗内存,导致页面的性能下降,页面加载缓慢

        在IE浏览器中才会导致内存泄漏

    使用场景:

        防抖,节流,函数嵌套函数避免全局污染的时候

        数据封装和私有变量

        函数工厂和函数柯里化

        事件处理和异步编程

        缓存机制

6.前端的内存泄漏怎么理解?

    JS里已经分配内存地址的对象,但是由于长时间没有释放或者没办法清除,造成长期占用内存的现象,会让内存资源大幅浪费,最终导致运行速度慢,甚至崩溃的情况。

    程序中已不再需要的对象或变量,无法被垃圾回收机制识别并释放。从而持续占有系统内存的现象原因:

        1.长期持有内部变量的引用

            一些为生命直接赋值的变量;

            一些未清空的定时器;

            一些引用元素没有被清除。

        2.循环引用

            过度的闭包;

    解决:

    1.适时接触引用

    2.合理设计闭包的生命周期

    3.弱引用

    4.使用现在浏览器提供的工具检查内存泄露

7.事件委托是什么?

    又叫事件代理,原理就是利用了事件冒泡的机制来实现,也就是说把子元素的事件绑定到了父元素的身上如果子元素组织了事件冒泡,那么委托也就不成立

    阻止事件冒泡:event.stopPropagation()

    addEventListener('click',函数名,true/false)默认是false(事件冒泡),true(事件捕获)

    好处:提高性能,减少事件的绑定,也就减少了内存的占用。

8.基本数据类型和引用数据类型的区别?

    基本数据类型:string Number Boolean undefined null

    基本数据类型保存在栈内存当中,保存的就是一个具体的值

    引用数据类型(复杂数据类型):object Function Array保存在堆内存当中,声明一个引用类型的变量,它保存的是引用类型数据的地址

    假如声明两个引用类型同时指向了一个地址的时候,修改其中一个那么另外一个也会改变

9.说一下原型链。

    原型:

        .prototype, Js中每个函数的内置属性,它指向一个对象,对于构造函数来说,他的prototype属性指向的对象就是构造函数生成的新对象实例的原型对象

    实例原型:._proto_, 可以理解为指针,实例对象中的属性,指向了构造函数的原型

    原型对象:

        存储了可以被实例共享的方法和属性,每当尝试访问一个属性自身的实例和方法时,如果实例自身没有,则会自动去它的原型对象中查找,

    原型链:

        查找机制,它是Js中对象属性和方法继承的基础

        当我们试图访问一个对象的属性或方法时,如果该对象本身没有定义这个属性或方法,JS引擎会沿着原型链逐层向上查找,即先查找实例的原型,如果原型中未找到,则继续查找原型的原型,直到找到该属性和方法,或者抵达原型连的顶端,也就是null

10.new操作符具体做了什么?

    1.内存分配

        先创建一个空对象

    2.构造函数调用

        把空对象和构造函数通过原型链进行链接

    3.this绑定

        把构造函数的this绑定到新的空对象身上

    4.返回新对象

        根据构建函数返回的类型判断,如果是值类型,则返回对象,如果是引用类型,就要返回这个引用类型

    function newFun(Fun,...args){

    let newobi={}

    newobj.proto =Fun.prototype

    const result= Fun.apply(newobj,args)

    return result instanceof obiect ? result : newobj

    }



    function Person(name){ this.name = name }

    Person.prototype.say=function(){ console.log('123456') }

    const p1 = newFun(Person,'张三')

    p1.say()

    console.log(p1)

11.JS是如何实现继承的?

    1.原型链继承

    function Parent(){}
    Parent.prototype.value='父值'
    function Child(){}
    Child.prototype = Object.create(Parent.prototype)
    Child.prototype.constructor = Child
    let child = new Child()

    2.借用构造函数继承

    function Parent(name){
        this.name = name
    }
    function Child(name,age){
        Parent.call(this, name)
        this.age = age
    }
    

    3.组合式继承

    function Parent(name){
        this.name = name
    }
    Parent.prototype.sayName = function(){
        console.log(this.name)
    }
    function Child(name,age){
        Parent.call(this, name)
        this.age = age
    }

    4.ES6的class类继承

    class Parent{
        constructor(name){
            this.name = name
        }
    }
    class Child extends Parent{
        constructor(name, age){
            super(name)
            this.age = age
        }
    }

12.Js的设计原理是什么?

JS引擎 运行上下文 调用栈 事件循环 回调

13.Js中关于this指向的问题

    1.全局作用域或普通函数

        当函数在全局作用域下执行,或者以常规函数调用的话,this指向全局对象window

    2.对象方法调用

        当函数作为对象的一个方法被调用时,this指向调用该方法的对象本身

    3.构造函数调用

        在构造函数内部,this纸箱正在被创建的新对象实例

    4.内置函数及事件处理函数

        在JS内置函数或DOM事件处理函数中,this可能指向调用这些函数的特定上下文

        比如event事件触发上下文

    5.函数上下文的强制绑定

        通过call apply bind等方法,可以主动改变函数执行时this的指向,让他指向任意指定的对象

    6.箭头函数

        自身没有this,继承父级作用域的this

14.script标签里的async和defer有什么区别?

    当没有async和defer这两个属性的时候,

        浏览器会立刻加载并执行指定的脚本

    有async

        加载和渲染后面元素的过程将和script的加载和执行并行进行(异步)有defer

        加载和渲染后面元素的过程将和script的加载并行进行(异步),但是它的执行事件要等所有元素解析完成之后才会执行

15.setTimeout最小执行时间是多少?16.ES6和ES5有什么区别?

HTML5规定的内容:

    setTimeout最小执行时间是4ms

    setInterval最小执行时间是10ms

16.ES6和ES5有什么区别?

JS的组成:ECMAScript BOM DOM

ES5:ECMAScript5,2009年ECMAScript的第五次修订,ECMAScript2009

ES6:ECMAScript6,2015年ECMAScript的第六次修订,ECMAScript2015,是Js的下一个版本标准

17.ES6的新特性有哪些?

    1.新增块级作用域(let,const)

        不存在变量提升

        存在暂时性死区的问题

        块级作用域的内容

        不能在同一个作用域内重复声明

    2.新增了定义类的语法糖(class)

    3.新增了一种基本数据类型(symbol)

    4.新增了解构赋值

    5.新增了函数参数的默认值

    6.给数组新增了API

    7.对象和数组新增了扩展运算符

    8.Promise

        解决回调地狱的问题

        自身有all, reject, resolve, race方法

        原型上有then, catch方法

        三种状态pending初始状态, fulfilled操作成功, rejected操作失败

        两种变化,pending到fulfilled,pending到rejected

        async awiat

            同步代码做异步的操作,两者必须搭配使用

            async表明函数内有异步操作,调用函数会返回promise

            await是组成async的表达式,结果是取决于它等待的内容

            如果是promise那就是promise的结果

            如果是普通函数就进行链式调用

        await后的promise如果是reject状态,那么整个async函数都会中断,后面的代码不执行

    9.新增了模块化(import,export)

    10.新增了set和map数据结构

        set就是不重复

        map的key类型不受限制

    11.新增了generator

    12.新增了箭头函数

        不能作为构造函数使用,不能用new箭头函数就没有原型

        箭头函数没有arguments

        箭头函数不能用call,apply,bind去改变this的执行this指向外层第一个函数的this

18.call,aply,bind三者有什么区别?

    都是改变this指向和函数的调用,call和apply的功能类似,只是传参的方法不同call: 传的是一个参数列表

        允许你调用一个函数,并将调用上下文设置为指定的对象,同时可以直接传递参数

    apply: 传递的是一个数组或类数组

        用于更改函数调用时的上下文并执行函数,但函数传递的形式不同

    bind:

        不会立即调用,而是创建一个新的函数实例,这个新函数始终保持了对原函数的引用,可以传参,并且拥有预设this值,同时可以预设部分参数

    bind()() 两个括号才能调用,不能做构造函数,适用于永久改变上下文并在多个场合反复调用的情况

    call方法的性能要比apply好一些,所以call用的更多一点,都是临时改变上下文

19.用递归的时候有没有遇到什么问题?

    如果一个函数内可以调用函数本身,那么这个就是递归函数函数内部调用自己

    特别注意:写递归必须要有退出条件return

20.浅拷贝和深拷贝

    浅拷贝:

        把源对象的所有属性赋值过来

    深拷贝

        完全拷贝一份新的对象,会在堆内存中开辟新的空间,拷贝的对象被修改后,原对象不受影响,主要针对的是引用数据类型

    1.扩展运算符

        缺点:这个方法只能实现第一层,当有多层的时候还是浅拷贝

    2.JSON.parse(JSON.stringify())

        缺点:这个方法只能实现第一层,当有多层的时候还是浅拷贝

    3.利用递归函数实现

21.说一下事件循环。

    JS是一个单线程的脚本语言主线程执行栈任务队列 宏任务 微任务

    主线程先执行同步任务,然后才去执行任务队列里的任务,如果在执行宏任务之前有微任务,那么要先执行微任务

    全部执行完之后等待主线程的调用,调用完之后再去任务队列中査看是否有异步任务,这样一个循环往复的过程就是事件循环

    任务队列

        程序把所有的任务放入到不同的任务队列中,同步任务立即执行,一步任务则在其完成时被挂起,等待处理

    事件触发

        当一个异步任务完成的时候,它并不会立即执行,而是生成一个事件并将其推入到事件队列事件循环程序有一个不断循环监测的任务,它会不断的检査事件队列,一旦发现有事件等待处理,那么就会从队列中取出事件,并调用对应的回调函数进行执行

    微任务和宏任务

        微任务队列和宏任务队列,微任务会在当前宏任务执行结束后立即执行, 而新的宏任务则需要等待下一次的事件循环

22.ajax是什么?怎么实现的?

    创建交互式网页应用的网页开发技术

        在不重新加载整个网页的前提下,与服务器交换数据并更新部分内容

    通过xmlHttpRequest对象向服务器发送异步请求,然后从服务器拿到数据,最后通过JS操作DOM更新页面

    1.创建XmlHttpRequest对象 xmh

    2.通过xmh对象里的open()方法和服务器建立连接

    3.构建请求所需的数据,并通过xmh对象的send()发送给服务器

    4.通过xmh对象的onreadystate change事件监听服务器和你的通信状态

    5.接收并处理服务器响应的数据结果

    6.把处理的数据更新到HTML页面上

23.get和post有什么区别?

    1.get一般是获取数据,post一般是提交数据

    2.get参数会放在ur1上,所以安全性比较差,post是放在body中

    3.get请求刷新服务器或退回是没有影响的,post请求退回时会重新提交数据

    4.get请求时会被缓存,post请求不会被缓存

    5.get请求会被保存在浏览器历史记录中,post不会

    6.get请求只能进行url编码,post请求支持很多种

24.promise的内部原理是什么?它的优缺点是什么?

    Promise对象,封装了一个异步操作并且还可以获取成功或失败的结果

    Promise主要就是解决回调地狱的问题,之前如果异步任务比较多,同时他们之间有相互依赖的关系,就只能使用回调函数处理,这样就容易形成回调地狱,代码的可读性差,可维护性也很差

    有三种状态:pending初始状态 fulfilled成功状态 rejected失败状态

    状态改变只会有两种情况

        pending ->fulfilled; pending ->rejected

    一旦发生,状态就会凝固,不会再变

    首先就是我们无法取消promise,一旦创建它就会立即执行,不能中途取消

    如果不设置回调,promise内部抛出的错误就无法反馈到外面

    若当前处于pending状态时,无法得知目前在哪个阶段。

    原理:

        构造一个promise实例,实例需要传递函数的参数,这个函数有两个形参,分别都是函数类型,一个是resolve一个是reject

        promise上还有then方法,这个方法就是来指定状态改变时的确定操作,resolve是执行第一个函数,reject是执行第二个函数

25.promise和async await的区别是什么?

    1.都是处理异步请求的方式

    2.promise是ES6,async await是ES7的语法

    3.async await是基于promise实现的,他和promise都是非阻塞性的

    优缺点:

    1.promise是返回对象我们要用then,catch方法去处理和捕获异常,并且书写方式是链式,容易造成代码重叠,不好维护,async await 是通过try catch进行捕获异常

    2.async await最大的优点就是能让代码看起来像同步一样,只要遇到await就会立刻返回结果,然后再执行后面的操作

    promise.then()的方式返回,会出现请求还没返回,就执行了后面的操作

26.浏览器的存储方式有哪些?

    1.cookies

        H5标准前的本地存储方式

        兼容性好,请求头自带cookie

        存储量小,资源浪费,使用麻烦(封装)

    2.localstorage

        H5加入的以键值对为标准的方式

        操作方便,永久存储,兼容性较好保存值的类型被限定,浏览器在隐私模式下不可读取,不能被爬虫

    3.sessionstorage

        浏览器关闭后就会立刻清理,会话级别的存储方式

    4.indexedDB

        H5标准的存储方式,,他是以键值对进行存储,可以快速读取,适合WEB场景

27.token存在sessionstorage还是loaclstorage?

    token:验证身份的令牌,一般就是用户通过账号密码登录后,服务端把这些凭证通过加密等一系列操作后得到的字符串

    1.存loaclstorage里,后期每次请求接口都需要把它当作一个字段传给后台

    2.存cookie中,会自动发送,缺点就是不能跨域

    如果存在localstorage中,容易被xss攻击,但是如果做好了对应的措施,那么是利大于弊

    如果存在cookie中会有CSRF攻击

28.token的登录流程。

    1.客户端用账号密码请求登录

    2.服务端收到请求后,需要去验证账号密码

    3.验证成功之后,服务端会签发一个token,把这个token发送给客户

    4.客户端收到token后保存起来,可以放在cookie也可以是localstorage

    5.客户端每次向服务端发送请求资源的时候,都需要携带这个token

    6.服务端收到请求,接着去验证客户端里的token,验证成功才会返回客户端请求的数据

29.页面渲染的过程是怎样的?

    DNS解析

    建立TCP连接

    发送HTTP请求

    服务器处理请求

    渲染页面

        浏览器会获取HTML和cSs的资源,然后把HTML解析成DOM树

        再把css解析成CSSOM

        把DOM和CSSOM合并为渲染树

        重排

        布局

        把渲染树的每个节点渲染到屏幕上(绘制)

        重绘

    断开TCP连接

30.DOM树和渲染树有什么区别?

    DOM树是和HTML标签一一对应的,包括head和隐藏元素渲染树是不包含head和隐藏元素

31.精灵图和base64的区别是什么?

    精灵图:把多张小图整合到一张大图上,利用定位的一些属性把小图显示在页面上,当访问页面可以减少请求,提高加载速度

    base64:传输8Bit字节代码的编码方式,把原本二进制形式转为64个字符的单位,最后组成字符串base64是会和html css一起下载到浏览器中,减少请求,减少跨域问题,但是一些低版本不支持,若base64体积比原图片大,不利于css的加载。

32.svg格式了解多少?

    基于XML语法格式的图像格式,可缩放矢量图,其他图像是基于像素的,SvG是属于对图像形状的描述,本质是文本文件,体积小,并且不管放大多少倍都不会失真

    1.SVG可直接插入页面中,成为DOM一部分,然后用JS或cSS进行操作

      //  <svg></svg>

    2.SVG可作为文件被引入

    // <img src="pic.svg" />I

    3.SVG可以转为base64引入页面

33.了解过JWT吗?

    JsoN web Token 通过JSON形式作为在web应用中的令牌,可以在各方之间安全的把信息作为JSON对象传输

    信息传输、授权

    JWT的认证流程

    1.前端把账号密码发送给后端的接口

    2.后端核对账号密码成功后,把用户id等其他信息作为JWT 负载,把它和头部分别进行base64编码拼接后签名,形成一个JWT(token)。

    3.前端每次请求时都会把JWT放在HTTP请求头的Authorization字段内

    4.后端检査是否存在,如果存在就验证JWT的有效性(签名是否正确,token是否过期)

    5.验证通过后,后端使用JWT中包含的用户信息进行其他的操作,并返回对应结果

    简洁、包含性、因为Token是JSON加密的形式保存在客户端,所以JWT是跨语言的,原则上是任何web形式都支持。

34.npm的底层环境是什么?

        (这个写的好简单)

    node package manager,node的包管理和分发工具,已经成为分发node模块的标准,是JS的运行环境

    npm的组成:网站、注册表、命令行工具

35.HTTP协议规定的协议头和请求头有什么?

    1.请求头信息:

        Accept:浏览器告诉服务器所支持的数据类型

        Host:浏览器告诉服务器我想访问服务器的哪台主机

        Referer:浏览器告诉服务器我是从哪里来的(防盗链)

        User-Agent:浏览器类型、版本信息

        Date:浏览器告诉服务器我是什么时候访问的

        Connection:连接方式

        Cookie

        X-Request-with:请求方式

    2.响应头信息:

        Location:这个就是告诉浏览器你要去找谁

        Server:告诉浏览器服务器的类型

        Content-Type:告诉浏览器返回的数据类型

        Refresh:控制了的定时刷新

36.说一下浏览器的缓存策略。

    强缓存(本地缓存)、协商缓存(缓存)

    强缓:不发起请求,直接使用缓存里的内容,浏览器把js,css,image等存到内存中,下次用户访问直接从内存中取,提高性能

    协缓:需要像后台发请求,通过判断来决定是否使用协商缓存,如果请求内容没有变化,则返回384,浏览器就用缓存里的内容

    强缓存的触发:

    HTTP1.0:时间戳响应标头

    HTTP1.1:cache-control响应标头

    协商缓存触发:

    HTTP1.0:请求头:if-modified-since 响应头:last-modifiedHTTP1.1:请求头:if-none-match 响应头:Eag

37.说一下什么是“同源策略”?

    http:/www.  aaa.com:8080/index/vue.js

    协议 子域名 主域名   端口号   资源  

    同源策略是浏览器的核心,如果没有这个策略就会遭受网络攻击主要指的就是协议+域名+端口号三者一致,若其中一个不一样则不是同源,会产生跨域

    三个允许跨域加载资源的标签: img   link   script

    跨域是可以发送请求,后端也会正常返回结果,只不过这个结果被浏览器拦截了!

    JSONP

    CORS

    websocket

    反向代理

38.防抖和节流是什么?

    都是应对页面中频繁触发事件的优化方案

    防抖:避免事件重复触发

        使用场景:1.频繁和服务端交互 2.输入框的自动保存事件

    节流:把频繁触发的事件减少,每隔一段时间执行

        使用场景:scro11事件

39.解释一下什么是json?

    JSON是一种纯字符串形式的数据,它本身不提供任何方法,适合在网络中进行传输

    JSON数据存储在.json文件中,也可以把JSON数据以字符串的形式保存在数据库、cookie中

    JS提供了JSON.parse()JsoN.stringify()

    什么时候使用json:定义接口;序列化;生成token;配置文件package.json

40.当数据没有请求过来的时候,该怎么做?

    可以在渲染数据的地方给一些默认的值

    if判断语句

41.有没有做过无感登录?

    1.在响应其中拦截,判断token返回过期后,调用刷新token的接口

    2.后端返回过期时间,前端判断token的过期时间,去调用刷新token的接口

    3.写定时器,定时刷新token接口

流程:

    1.登录成功后保存token和refresh token

    2.在响应拦截器中对401状态码引入刷新token的api方法调用

    3.替换保存本地新的token

    4.把错误对象里的token替换

    5.再次发送未完成的请求

    6.如果refresh toker过期了,判断是否过期,过期了就清楚所有token重新登录

42.大文件上传是怎么做的?

    分片上传:

    1.把需要上传的文件按照一定的规则,分割成相同大小的数据块

    2.初始化一个分片上传任务,返回本次分片上传的唯一标识

    3.按照一定的规则把各个数据块上传

    4.发送完成后,服务端会判断数据上传的完整性,如果完整,那么就会把数据库合并成原始文件

    断点续传:

    服务端返回,从哪里开始浏览器自己处理

43.作用域和作用域链

    作用域

        作用域就是一个变量或函数在其内能够被访问的“可见区域”全局作用域、局部作用域

    作用域链

        当在某个作用域中尝试访问一个变量时,JS引擎会从当前作用域开始,沿着作用域链向上逐级查找直到找到该变量为止,如果在全局作用域仍然找不到,则抛出未定义错误

    let val = "全局"

    function outer(){let out = '外部', function inner(){

        console.log(val), console.log(out)

        } inner()}

    outer()

44.什么是面向对象编程

    0OP,在于模拟现实世界的实体和其他相关的联系,通过创建对象并利用对象之间的交互,来解决问题

    1.抽象性

        从复杂事物中提炼出关键特性和行为的过程,表现为定义类

    2.封装性

        把数据和对数据的操作捆绑在一个对象内,对外隐藏内部实现细节,既保护了数据安全,又简化了外部对对象的使用,直接调用公用接口进行交互,避免了直接修改内部状态带来的风险

    3.继承性

        允许子类从父类那里继承已有的属性和方法,避免重复编写相同代码。子类不仅包含父类所有的属性和方法,而且可以拓展自己的属性和方法,从而实现代码复用,并形成了类的层次结构

    4.多态性

        同一接口可以表示多种形态或类型的行为。

        参数多态:

            不同类型对象对同一方法的响应各不相同

        方法重载:

            在同一类中,定义同名的的不同方法,根据传入的参数,类型,数量决定调用哪种方法

45 微任务和宏任务

    每当主线程执行完一个宏任务后,它不会立即执行下一个宏任务而是接着先检查微任务队列

        如果微任务队列中存在待执行的任务

        主线程会立即执行微任务,直到微任务队列为空

        因为微任务通常包含那些需要在当前逻辑上下文结束后、但在渲染或执行新的宏任务之前必须完成的操作

    微任务:promsie回调mutationobserver变动记录,

    操作性质决定他们应该快速且优先被执行,来确保数据的统一和更快响应程序状态的变化

    宏任务:ajax请求、定时器..

46.什么是高阶函数,有什么使用场景

    特征:

    1.接受一个或多个函数作为输入参数,这些函数就是回调函数

    2.返回一个新函数,这个新函数有可能就是原函数操作的结果,也可能是封装了输入函数的某种行为模式

    场景:

    映射:Array.prototype.map()

    过滤Array.prototype.filter()

    规约 reduce

    排序 sort

    函数工厂

    柯里化

    事件处理和异步编程

47.箭头函数和普通函数的区别

    1.语法

    2.this绑定

        箭头函数:没有自己的this上下文,而是继承父类的this普通函数:this取决于函数的调用方式

    3.arguments对象

        箭头:不包含arguments对象

        普通:包含arguments对象

    4.原型和构造函数

        箭头:由于不能绑定this,且没有自己的prototype,所以不能作为构造函数,也不能使用new

        普通:有this,可以使用new

    5.作用域和闭包

        箭头:遵循作用域规则

        普通:形成闭包

48.ES6如何改进类的定义和继承机制

    1.类的定义

    class Person(name){

        constructor(name){

            this.name = name

        }

        sayhi(){

            console.log('hi')

        }

    }

    2.类的继承

    class Student extends Person{

        constructor(name){

            super(name)

        }

        childself( ){

            console.sayhi()

        }

    }

    3.方法和属性修饰符

        静态方法和属性

        getter/setter

    4.类表达式和类字段初始化

    5.更严格的私有成员

49.Promise如何处理异步操作

    Promise是处理异步机制提供了标准化的链式调用和错误处理机制,是实现异步流程的重要处理工具

    Promise作为一个对象,代表未来的某个时刻可能完成的异步操作记录,并提供了统一的api来处理成功或失败的情况

    1.状态和决议

        三种状态

        两张结果

    2.链式调用

        .then()处理链式异步任务,每个.then方法接受两个回调函数,分别对应异步操作成功或失败的状态。成功的回调函数接受前一个promise决议的结果,失败的回调函数处理异常情况

    3.错误处理

        .catch()捕获整个promise链中任一环节的错误

    4.并发控制

    .a11()处理多个promise,全部成功则返回成功,如果有一个失败,则进入失败状态

    .race()任何一个promise先改变状态,那么整个promise就进入相应的状态

    5.异步资源清理

    finnaly

50.Map和Set各自的特性

    Map

        键值对的集合,允许任何类型的值作为键键值对存储

        自动排序

        易于查找和更新

        内置size属性

        let myMap = new Map()

        myMap.set('name','zhangsan')

        console.log(myMap.get('name'))

    Set

        唯一值的集合,不允许有重复的值保证唯一性

        自动排序

        遍历和操作

        内置size属性

        let mySet = new set()

        myset.add('apple')

        mySet.add('apples')

        mySet.has('apple')//true

三、HTML5CSS3
1.语义化的理解。

    在写HTML页面结构时所用的标签有意义

    头部用head 主体用main 底部用foot...

    怎么判断页面是否语义化了?

    把CSS去掉,如果能够清晰的看出来页面结构,显示内容较为正常为什么要选择语义化?

    1.让HTML结构更加清晰明了

    2.方便团队协作,利于开发

    3.有利于爬虫和SEO

    4.能够让浏览器更好的去解析代码

    5.给用户带来良好的体验

2.Html5 C3有哪些新特性?

H5的新特性:

    1.语义化的标签

    2.新增音频视频

    3.画布canvas

    4.数据存储localstorage sessionstorage

    5.增加了表单控件 email url search...

    6.拖拽释放API

    7.web Worker, webSocket

CsS3的新特性:

    1.新增选择器:属性选择器、伪类选择器、伪元素选择器

    2.增加了媒体查询

    3.文字阴影

    4.边框

    5.盒子模型box-sizing

    6.渐变

    7.过度

    8.自定义动画

    9.背景的属性

    10.2D和3D

3.rem是如何做适配的?

    rem是根据根元素fent-size计算值的倍数

    rem是相对长度,相对于根元素(htm1)的font-size属性来计算大小,通常来做移动端的适配

    比如html上的font-size:16px,给div设置宽为1.2rem, 1.2rem = 16px*1.2 = 19.2px

4.解决了哪些移动端的兼容问题?

    1.当设置样式overflow:scroll/auto时,iOS上的滑动会卡顿

        -webkit-overflow-scrolling:touch;

    2.在安卓环境下placeholder文字设置行高时会偏上

        input有placeholder属性的时候不要设置行高

    3.移动端字体小于12px时异常显示

        应该先把在整体放大一倍,然后再用transform进行缩小

    4.ios下input按钮设置了disabled属性为true显示异常

        input[type=button]{opcity:1}

    5.安卓手机下取消语音输入按钮

        input::-webkit-input-speech-button{display:none}

    6.IOS下取消input输入框在输入英文首字母默认大写

        <input autocapitalize='off' autocorrect='off'/>

    7.禁用iOS和安卓用户选中文字

        添加全局CsS样式:-webkit-user-select:none

    8.禁止IOS弹出各种窗口

        -webkit-touch-callout:none

    9.禁止IOS识别长串数字为电话

        添加meta属性 <meta conten='telephone=no' name='format-detection'>

5.如何实现自适应视频

    无限适配方案 + rem单位

    无限适配方案

    把屏幕划分为一定的份数(10份),通过JS动态监测屏幕尺寸宽度,实时计算并设置htm1元素的基础字体大小

    //假设设计稿基准宽度为750px,将屏幕宽度逻辑上分成10等份

    function applyTaobaoAdaptive(){

    const docEl= document.documentElement;

    const baseWidth =750;

    const winWidth =docEl.clientwidth

    window.innerWidth:const onePart

    width=winwidth /10;

    docEl.style.fontsize =onePartWidth+'px';// 动态设置html基础字体大小,实时更新适配

    }

    //监听窗口大小变化,

    window.addEventListener('resize', applyTaobaoAdaptive),applyTaobaoAdaptive();

标签:八股,浏览器,name,对象,前端,作用域,token,函数
From: https://blog.csdn.net/shadowflies/article/details/143587687

相关文章

  • 前端八股(2)
    第二部分,也是简单版,记录下目录第一部分四、vue1.v-if和v-show的区别?2.如何理解MVVM的?3.v-for中的key值的作用是什么?4.说一下你对vue生命周期的理解5.在created和mounted去请求数据,有什么区别?6.vue中的修饰符有哪些?7.elementui是怎么做表单验证的?8.vue如何进行......
  • Vue+CSS 炫酷新年特效教程:极光背景+彩带+粒子动画 用 Vue 和 CSS 动画打造 2025 新年
    效果图......
  • 全新版Java面试八股文合集(495道)
     过滤器和拦截器区别(这个问题基础,没想到问的频率挺高,还容易回答不好)他们都可以在请求的过程中插入一手,他们的请求过程如下:当一个请求过来时,会交给web服务器提供的过滤器,再来到servert。有一个叫DispatchServert的servert,在它里面就会调用我们的拦截器,再由我们的DispatchSer......
  • 前端代码分析题(选择题、分析题)——JS事件循环分析
     Promise其实也不难-CSDN博客Promise的执行顺序分析Promise对象的执行是异步的,但其执行器函数内部的代码是立即执行的,而then方法注册的回调函数则是在Promise状态改变后执行的。constmyPromise=newPromise((resolve,reject)=>{console.log('A');console.......
  • 新安装pbootcms程序为何网站前端页面出现404错误界面两种解决方法
    遇到PBootCMS新安装后网站前端页面出现404错误,可以尝试以下步骤来排查和解决问题:检查伪静态设置:确认服务器是否支持伪静态功能。检查PBootCMS的伪静态规则是否正确配置。通常在安装目录下的.htaccess文件中可以找到相关设置。检查URL重写模块:对于Apache服务器,确保mod_......
  • 前端入门一之JS对象、字符串对象、数组对象、Data()对象等
    前言JS是前端三件套之一,也是核心,本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点,这篇是JS常用的内置对象;这篇文章是本人大一学习前端的笔记;欢迎点赞+收藏+关注,本人将会持续更新。文章目录目录总览1、对象1.1、创建对象(object)利用字面量创建对象对象的调用变量......
  • 【前端知识】JS模块规范
    JS模块规范概述CommonJS规范代码示例AMD规范代码示例ES6Module规范代码示例IIFE规范代码示例全局变量代码示例CommonJS模块和ES6模块有什么区别?1.语法和声明方式2.动态和静态导入3.循环依赖4.默认导出和命名导出5.文件扩展名6.环境和应用7.工具和构......
  • 【前端知识】es6基础语法介绍
    ES6基础语法介绍概述1.变量声明:let和const2.模板字符串3.解构赋值4.箭头函数5.默认参数值6.类(Classes)7.模块8.扩展运算符(SpreadOperator)9.对象字面量增强10.符号(Symbols)11.迭代器(Iterators)和生成器(Generators)12.承诺(Promises)基本数据类型1.字符串(String......
  • 前端之This的作用域
    前端--this关键字this关键字相必大家都不会陌生,十分的熟悉,今天我主要谈一谈在前端中this关键字的使用其实其他地方区别不大,主要作用域,实话说,ai也搞不明白这个this的作用域在VSCode)中,this的作用域和行为是由你正在使用的编程语言的语法和运行时环境决定的,而不是由VSCode本身......
  • 前端技术对html的学习1
    html简介目录html简介HTML到底是什么?HTML版本HTML标签HTML文档结构HTML英文全称是HyperTextMarkupLanguage,中文译为“超文本标记语言”,专门用来设计和编辑网页。使用HTML编写的文件称为“HTML文档”,一般后缀为.html(也可以使用.htm,不过比较少见)。HTML文档是一种纯文......