2023.2.20

星期五の夜

已于 2023-03-07 10:08:32 修改

阅读量2.6k

点赞数

分类专栏：面试题文章标签： css css3 html

于 2020-10-19 21:18:41 首次发布

本文链接：https://blog.csdn.net/weixin_43550562/article/details/108986899

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html

css

1.让一个div垂直居中

在这里插入图片描述

2.css三栏布局

在这里插入图片描述

<div class="container">
    <div class="left"></div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

.container{
    display: flex;
}
.left{
    width:200px;
    background: red;
}
.main{
    flex: 1;
    background: blue;
}
.right{
    width:200px;
    background: red;
}

3.css3实现0.5px的细线 (scale(0.5))

在这里插入图片描述

4.用纯CSS创建一个三角形的原理

简记：宽高设为0，顶部保存border，底部和左右border设为透明。

div{
    width:0px;
	height:0px;
	border-top:10px solid red;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid transparent;
}

5.元素定位有哪些？

① absolute绝对定位
相对位置为父元素为非static的第一个父元素进行定位
在这里插入图片描述
② fixed 固定定位（老IE6不支持）
相对于浏览器窗口进行定位

③ relative相对定位
相对于其正常（默认布局）位置进行定位

④ static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
在这里插入图片描述

6.样式导入有哪些方式？

在这里插入图片描述

7.css样式的优先级是怎么样的？

在这里插入图片描述

8.如何清除浮动

浮动产生的影响有哪些？

1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子
在这里插入图片描述
2.当我给内部两个盒子加上float属性的时候

底部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

总结一下：当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线

解决方法：
1.父级添加overflow属性
2.额外标签法(在浮动元素后面加一个空标签，clear：both；height： 0；overflow：hidden)
3.使用after伪元素清除浮动(给塌陷的元素添加伪对象)
4.使用before和after双伪元素清除浮动

<body>
    <style>
        /* 1.父级添加overflow属性 */
        .father {
            border: 1px solid red;
            width: 400px;
            /* overflow: hidden; */
        }

        .big {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .small {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .test {
            width: 400px;
            height: 100px;
            background-color: greenyellow;
        }
        /* 2.额外标签法 */
        /* .clear {
            clear: both;
        } */

        /* 3.使用after伪元素清除浮动（推荐使用） */
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* 4.使用before和after双伪元素清除浮动 */
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }
    </style>
</body>

9.盒模型

标准盒子模型：宽度=内容的宽度（content）+ border + padding
在CSS的盒子模型中，有两个重要的选项，box-sizing:content-box 和 box-sizing:border-box，content-box被称为正常盒子模型，border-box被称为怪异盒子模型
border-box定义的盒子，不会随着padding和boder的加入而增大盒子的占用空间

10.css3有哪些新特性

1.CSS3的选择器
①E:last-child 匹配父元素的最后一个子元素E。
②E:nth-child(n)匹配父元素的第n个子元素E。
③E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2. @Font-face 特性
3. 圆角
4. 多列布局（multi-column layout）
5.阴影（Shadow）
6.CSS3 的渐变效果
7.css弹性盒子模型
8. CSS3制作特效
①Transition 对象变换时的过渡效果
②Transforms 2D转换效果
③ Animation动画特效

11.html5有哪些新特性？

（一) H5新特性
增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在
① 绘画 canvas;
② 本地离线存储 localStorage
③ sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage
④ 用于媒介回放的 video和 audio 元素;
⑤ 语意化更好的语义化标签，比如article、footer、header、nav、section;
⑥ 表单控件，calendar、date、time、email、url、search;
⑦ 新的技术webworker(专用线程)
⑧ websocketsocket通信
⑨ Geolocation 地理定位

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

在这里插入图片描述

13.什么是响应式开发

什么是响应式
同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。
需要用到的技术:
1.Media Query（媒体查询） @media screen and (max-width:480px) {… }
2.使用em或rem做尺寸单位
3.禁止页面缩放 <meta name=“viewport”
4.屏幕尺寸响应(固定布局,流动布局，自定义布局，栅格布局)

14.画一条0.5px的线

采用transform: scale()的方式

15.什么是BFC，他有什么用？

BFC概念
在这里插入图片描述
可以解决的问题：
1.解决外边距的塌陷问题(垂直塌陷)
2.清除浮动

JS

1.js有哪几种数据类型的值？

两大类：
栈：原始数据类型（Undefined，Null，Boolean，Number、String，Symbol）
堆：引用数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解析器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
在这里插入图片描述

2.闭包

当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包

function A() {
	function B() {
		console.log('hello world !')
	}
	return B
}
var C = A()
C() // hello world

这里顺便了解一下 Javascript 中的 GC 机制:（垃圾回收机制）
在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中。
在上述例子中，B 定义在 A 中，因此 B 依赖于 A ,而外部变量 C 又引用了A , 所以B间接的被 C 引用。
也就是说，A 不会被 GC 回收，会一直保存在内存中。

function A() {
	var count = 0
	function B() {
		count ++
		console.log(count)
	}
	return B
}
var C = A()
C() // 1
C() // 2
C() // 3

// count 是函数A 中的一个变量，它的值在函数B 中被改变，
// 函数 B 每执行一次，count 的值就在原来的基础上累加 1 。
// 因此，函数A中的 count 变量会一直保存在内存中。

// 当我们需要在模块中定义一些变量，
// 并希望这些变量一直保存在内存中但又不会 “污染” 全局的变量时，就可以用闭包来定义这个模块。

闭包应用场景
闭包应用场景之setTimeout
在这里插入图片描述
闭包应用缺点
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

3.浅拷贝和深拷贝

浅拷贝
简单记忆：浅拷贝后，基本类型固定不变，引用类型跟着改变
①Object.assign() ②es6展开语法 let newObj = { …obj } ③slice(0) ④const arr4 = [].concat(arr3)

<script>
        // 基本数据类型:Number、String、Boolean、Null、undefined、Symbol、Bigint(新引入的)
        // 引用数据类型:Object、Array、Function等

        // 对对象而言，它的第一层属性值如果是基本数据类型则完全拷贝一份数据，
        // 如果是引用类型就拷贝内存地址
        // 实现 Object.assign()
        let obj1 = {
            name: 'zhangfan',
            age: {
                value: 18
            }
        }
        let obj2 = Object.assign({}, obj1)
        console.log(obj2) // {name:'zhangfan',age:{value:18}}
        console.log(obj1) // {name:'zhangfan',age:{value:18}}
        obj2.age.value = 28
        console.log(obj2) // {name:'zhangfan',age:{value:28}}
        console.log(obj1) // {name:'zhangfan',age:{value:28}} // 指向同一个内存地址 一变皆变

        // console.log(obj1 === obj2) // false

        obj1.name = 'oupai'
        console.log(obj1) // {name:'oupai',age:{value:28}} // 承接最近的值
        console.log(obj2) // {name:'zhangfan',age:{value:28}} // 承接最近的值

        // 展开语法
        let aaa = {
            name: 'liubei',
            age: {
                value: 10
            }
        }
        let { ...bbb } = aaa
        bbb.name = 'guanyu'
        bbb.age.value = 20
        console.log(bbb) // {name:'guanyu',age:{value:20}} 引用类型变了(地址一致)
        console.log(aaa) // {name:'liubei',age:{value:20}} 引用类型变了(地址一致)

        let b = {
            ...aaa,
            age: {
                value: 100000
            },
            c: {
                value111: 123
            }
        }
        console.log(b) // {name:'liubei',age:{value:100000},c:{value111: 123}}

        // Array.prototype.slice
        const arr1 = [
            'yang',
            {
                value: 123
            }
        ]
        const arr2 = arr1.slice(0) // slice 提取字符串的某个部分 slice(0) 就是全部
        console.log(arr2) // ['yang',{value:123}]
        arr2[1].value = 456
        console.log(arr1) // ['yang',{value:456}]
        console.log(arr2) // ['yang',{value:456}]
        arr2[0] = 'haha'
        console.log(arr2) // ['haha',{value:456}]
        console.log(arr1) // ["yang", {value: 456}]

        const arr3 = [
            'yang',
            {
                value: 123
            }
        ]
        const arr4 = [].concat(arr3)
        console.log(arr4) // ['yang',{value:123}]
        arr4[1].value = 456
        console.log(arr4) // ['yang',{value:456}]
        console.log(arr3) // ['yang',{value:456}]
        arr4[0] = 'haha'
        console.log(arr4) // ['haha',{value:456}]
        console.log(arr3) // ['yang',{value:456}]
</script>

深拷贝
let obj2 = JSON.parse(JSON.stringify(obj1))

// 深拷贝就是不管是基本数据类型还是引用数据类型都重新拷贝一份， 不存在共用数据的现象
        // 暴力版本 JSON.parse(JSON.stringify(object))
        let obj1 = {
            name: 'zhangfan',
            age: {
                value: 18
            }
        }
        let obj2 = JSON.parse(JSON.stringify(obj1))
        console.log(obj2) // {name:'zhangfan',age:{value:18}}
        console.log(obj1) // {name:'zhangfan',age:{value:18}}
        obj2.age.value = 28
        console.log(obj2) // {name:'zhangfan',age:{value:28}
        console.log(obj1) // {name:'zhangfan',age:{value:18}} // 不存在共用数据的现象

        // 看看它的缺陷
        var obj3 = {
            func: function () {
                console.log('this is function')
            },
            date: new Date(),
            symbol: Symbol(),
            a: null,
            b: undefined,
            c: {
                a: 1
            },
            e: new RegExp('regexp'),
            f: new Error('error')
        }
        let obj4 = JSON.parse(JSON.stringify(obj3))
        console.log(obj4) // {date: "2020-05-24T09:48:09.479Z", a: null, c: {a:1}, e: {}, f: {}}
        // 缺陷
        // 1.会忽略undefined
        // 2.会忽略symbol
        // 3.不能序列化函数
        // 4.不能解决循环引用的现象
        // 5.不能正确处理new Date()
        // 6.不能处理正则
        // 7.不能处理new Error

4.原型，原型对象，原型链

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念
在这里插入图片描述

在这里插入图片描述

5.new一个对象的过程中发生了什么？

在这里插入图片描述

6.防抖和节流

防抖：（开始触发事件后）
我们玩的王者荣耀,每当我们点击回城,需要等待一定的时间才能回城成功,假若我们在回城的时间内频繁的再按回城的话，回城时间就会重新开始计算，只有你在按回城的最后一次并等待时间才能回城成功。
同理,我们每次在输入框输入值等待一定的时间,就会触发我们的后台请求函数,如果我们一直输入的话计时器就会重新开始计算，只有你在最后一次调用有效。
为什么要防抖？
如果我们每次输入都会触发的话，这样子就会增加服务器的压力,但是当我们输入完成了之后，再触发我们的后台请求函数的话，这样子服务器的压力就不会那么大了！
总的来说，就是事件被触发后,在n秒后执行函数，如果在n秒内多次触发事件,则会重新开始计时
日常应用领域：input框做搜索请求

节流：（连续触发事件）
在王者荣耀,我们释放完技能后需要等待一定的时间才能再次释放, 如果我们在技能冷却未好的情况下,是释放不出来的。
同理，我们每次在输入框输入值,再点击我们的button按钮发生请求后台后,需要等待一定的时间才能再次调用请求函数。
连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
日常应用领域：鼠标不断点击触发，mousedown/mousemove(单位时间内只触发一次)

参考链接

7.call() apply() bind()

快速记忆总结：作用都是改变this的指向
① call，apply直接调用即可call(demo)，apply(demo); bind需要再次调用多加个括号bind(demo)()
② 传参方式不一样，call ,bind传参直接用字符串逗号隔开，apply是数组的形式

    <script>
        var name = '小王'
        var age = 17
        let obj = {
            name: '小张',
            objAge: this.age,
            myFun: function () {
                console.log(`${this.name}年龄${this.age}`) // 小张年龄undefined
            }
        }
        console.log(obj.objAge) // 17
        console.log(obj.myFun()) // 小张年龄undefined

        var fav = '孙尚香'
        function shows() {
            console.log(this.fav)
        }
        shows() // 孙尚香

        // 比较一下这两者this 的差别，第一个打印里面的this 指向obj，
        // 第二个全局声明的shows()函数   this 是window 

        // 1.call/apply/bind都是用来重定义this这个对象的
        var name_test = '小王'
        var age_test = 17
        let obj_test = {
            name_test: '小张',
            objAge_test: this.age_test,
            myFun: function () {
                console.log(`${this.name_test}年龄${this.age_test}`) // 宫本武藏年龄45
            }
        }
        var demo = {
            name_test: '宫本武藏',
            age_test: 45
        }
        obj_test.myFun.call(demo) // 宫本武藏年龄45
        obj_test.myFun.apply(demo) // 宫本武藏年龄45
        obj_test.myFun.bind(demo)() // 宫本武藏年龄45

        // 以上出了bind 方法后面多了个 () 外 ，结果返回都一致！
        // 由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

        // 2，对比call 、bind 、 apply 传参情况下
        var name_test_one = '小王'
        var age_test_one = 17
        let obj_test_one = {
            name_test_one: '小张',
            objAge_test_one: this.age_test_one,
            myFun: function (from,to) {
                console.log(`${this.name_test_one}年龄${this.age_test_one}，
                来自${from}去往${to}`)
            }
        }
        var contrast = {
            name_test_one: '宫本武藏',
            age_test_one: 45
        }
        obj_test_one.myFun.call(contrast,'广州','北京') // 宫本武藏年龄45来自广州去往北京
        obj_test_one.myFun.apply(contrast,['广州','北京']) // 宫本武藏年龄45来自广州去往北京
        obj_test_one.myFun.bind(contrast,'广州','北京')() // 宫本武藏年龄45来自广州去往北京

//         总结:
// 　　　　call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
// 　　　　call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面  obj.myFun.call(db,'成都', ... ,'string' )；
// 　　　　apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(db,['成都', ..., 'string' ]);
// 　　　　bind除了返回是函数以外，它 的参数和call 一样。
// 　　　　
// 　　　　当然，三者的参数不限定是string类型，允许是各种类型，包括函数 、 object 等等！
    </script>

8. 数组结构处理

// 1.数组去重
	let  fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]
    // 第一种方法 扩展运算符
    let unique_fruit1 = [...new Set(fruits)] // ["banana", "apple", "orange", "watermelon", "grape"]
    console.log(unique_fruit1) // ["banana", "apple", "orange", "watermelon", "grape"]
    // 第二种方法 
    const unique_fruit1= Array.from(new Set(arr));
    console.log(unique_fruit1) // ["banana", "apple", "orange", "watermelon", "grape"]
    
// 2.对数组中的所有值求和
    var nums_sum = [1, 5, 2, 6]
    var nums_sum_result = nums_sum.reduce((x,y) => x + y )
    console.log(nums_sum_result) // 14
    
// 3.翻转字符串
	var str = 'hello'
	function reverseString() {
		return str.split('').reverse().join('')
	}
	reverseString()

// 4.js拍平多维数组（数组扁平化）
	const arr = [1, [2, [3, [4, 5]]], 6];
	// 最简单的方法使用flat()
	const res1 = arr.flat(Infinity) 
	console.log(res1)  // [1, 2, 3, 4, 5, 6]

9.js里的==，===区别true

(1) ‘两个等于号’
1.强制转化成number。比如123==‘123’ // true '0’0 // true
2.nullundefined
注意： null除了和undefined 和其它任何值比都是不等的，undefined也是一样（面试错过）
在这里插入图片描述

10.JSON 格式是什么？你了解吗？

JSON语法 key:value 使用冒号分隔
{“name”:“Andy”,“age”:“18”, }

数据格式转换
1.JSON字符串转换为JSON对象: var jsonObject = JSON.parse(str);
2.JSON对象转换为JSON字符串：var jsonString = JSON.stringify(obj);

11.谈谈你对this的理解

（先回答this在不同的场合指向的是什么，在来回答什么时候用到this，这样回答的逻辑会比较好。）
this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：
this.alert() <=> window.alert()<=> alert();
调用的上下文环境包括全局和局部

总结：
①全局环境始终指向window
②局部环境：
1.在全局作用域下直接调用函数，this指向window
2.对象函数调用，哪个对象调用就指向哪个对象
3.使用new实例化对象，在构造函数中的this指向实例化对象
4.使用call或applay改变this的指向

全局环境
在这里插入图片描述
局部环境

12.js延迟加载的方式有哪些？

1.defer 属性

<script src="file.js" defer></script>

2.async 属性

<script src="file.js" async></script>

3.动态创建DOM方式

13.事件循环机制（宏任务和微任务）

当JS解析执行时，会被引擎分为两类任务，同步任务和异步任务
在这里插入图片描述
常见的异步任务：

对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个任务队列（task queue）里等待JS引擎去执行。

总结起来js引擎对程序的执行顺序是：（同步→异步里的微任务（Promise的then、Mutation Observer）→异步里的宏任务（setTimeout、setInterval））

1.先执行同步任务的程序
2.在执行异步任务里的微任务
3.所有微任务都执行完了后就执行异步的宏任务，但这里是一个一个宏任务去执行，不是一下子执行完。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

对于任务队列，其实是有更细的分类。其被分为微任务队列 & 宏任务队列

宏任务: setTimeout、setInterval等，会被放在宏任务（macrotask）队列
微任务: Promise的then、Mutation Observer等，会被放在微任务（microtask）队列

注意：微任务队列每次全执行，宏任务队列每次只取一项执行。
在这里插入图片描述
拓展：什么是观察者模式？什么是发布订阅模式？

14.Promise

一句话概括Promise：
Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作
promise是用来解决两个问题的：
回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据

1.有三种状态，pending 进行中，fulfilled已成功，rejected已失败
2.一旦状态改变，就不会再变，promise对象状态改变只有两种可能，从pending改到fulfilled或者从pending改到rejected，只要这两种情况发生，状态就凝固了，不会再改变，这个时候就称为定型resolved,

15.async/await

在这里插入图片描述

—额外补充什么是回调地狱？
什么是回调地狱，回调函数，一个嵌套着一个，到最后，缩略图成了一个三角形，造成了可阅读性差，可阅读性差就代表代码的可维护性和可迭代性差，最后还有一个就是可扩展性差。
在这里插入图片描述

16.跨域

跨域需要针对浏览器的同源策略来理解，同源策略指的是请求必须是同一个协议，同一个域名，同一个端口，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

受浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
在这里插入图片描述
什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

跨域解决方法
1、通过jsonp跨域（只支持get，不支持post ）
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）用得多 (见面试题14分析)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

17.CORS实现请求跨域（考过，没有回答出来）

cross-origin resource sharing 跨域资源共享
CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信

请求类型：CORS分为简单请求和非简单请求两类

具体解释参考 cors实现请求跨域

18.js如何阻止冒泡？

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
在这里插入图片描述
如何阻止默认事件？
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false

19.怎样创建、添加、移除、移动、和查找节点?

创建元素：
1.createDocumentFragment()
2.createElement()
3.createTextNode()

移除元素: parentNode.removeChild(childNode)

替换元素: parentNode.replaceChild(newChild,oldChild)

插入元素: parentNode.insertBefore(newChild,refChild)//在refChild前插入节点

追加元素: parentNode.appendChild(childNode)

查找

parentNode.getElementsByTagName(tagName)获取所在父节点下的指定标签名节点,返回HTMLCollection类型
document.getElementsByClassName(className)//根据类名获取节点，返回HTMLCollection
document.getElementById(id) // 通过元素Id，唯一性
高级选择器 document.querySelector

20.addEventListener参数

addEventListener(event, function, useCapture)
其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。

21.GET和POST的区别

1.参数传递：get参数通过url传递，post放在request body中。
2.参数长度限制：get请求在url中传递的参数是有长度限制的，而post没有。
3.安全性：get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。get请求只能进行url编码，而post支持多种编码方式
4.参数浏览历史保留：get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留

22.说一下图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。预加载则会增加服务器前端压力。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。懒加载对服务器前端有一定的缓解压力作用。

23.如何理解前端模块化

前端模块化就是复杂的文件变成一个个独立的模块，比如JS文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代）

24.JS判断类型

判断方法：typeof()，instanceof，Object.prototype.toString.call()等

25.数组常用方法

push()，pop()，shift()，unshift()，splice()，sort()，reverse()，map()等

26.说一下什么是virtual dom（不是很懂，需要实际操作）

出现背景：
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在 react，vue 等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom ，然后修改样式行为或者结构，来达到更新 ui 的目的。这种方式相当消耗计算资源。

优化改造：
1.用js 对象结构表示DOM 树的结构
2.然后用这个树构建一个真正的DOM 树插到文档当中
3.当状态变更的时候，重新构造一棵新的对象树
4.最后用新的树和旧的树进行比较，记录两棵树差异，把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。
Virtual DOM 本质上就是在JS 和DOM 之间做了一个缓存。

27.写一个函数。第一秒打印1，第二秒打印2

for(let i=0;i<5;i++){
	setTimeout(function(){
		console.log(i)
	},1000*i)
}

28.怎么获得对象上的属性

for（let I in obj）或者object.keys(arr)

29.click 的 300ms 延迟问题和点击穿透问题

300ms延迟导致用户体验不好。解决办法：
1.在移动端用touchstart,touchend,touchmove,tap事件来取代click事件
2.使用FastClick（解决移动端浏览器 300 毫秒点击延迟问题所开发的一
个轻量级的库）

30.防止手机中页面放大和缩小

ES6

1.var let const 的区别

// 变量提升
console.log(a) // undefined
console.log(b) // 报错
console.log(c) // 报错

var a = 1
let b = 2
const c = 3

// 全局声明
console.log(window.a) // 1

// 重复声明
let b = 200 // 重复声明

总结：var是可以变量提升的。而let和const是必须声明后才能调用的。对于let和const来说，这里就是暂缓性死区。

2.数组去重

[...new Set(arr)] 
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

vue2

1.vue生命周期

beforeCreate（创建实例）
created（创建完成）、
beforeMount（开始创建模板）
mounted（创建完成）、
beforeUpdate（开始更新）
updated（更新完成）、
beforeDestroy（开始销毁）
destroyed（销毁完成）

2.vue-router 有哪几种导航钩子?

三种

全局导航钩子（）
router.beforeEach(to, from, next)（全局守卫，跳转前进行判断拦截）
router.afterEach(to, from ,next)（后置钩子，进入该组件时弹出一串信息）
router.beforeResolve(to, from, next)（全局解析守卫）

组件内钩子
beforeRouteEnter（进去）
beforeRouteUpdate（更新）
beforeRouteLeave（离开）

单独路由独享组件
beforeEnter（路由独有的守卫）

3.Vue 中路由跳转方式（声明式/编程式）

$ router 和 $ route的区别：
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

1.router-link跳转 <router-link to="/find">发现音乐</router-link>
2.通过params传参

this.$router.push({name:"Home",params:{id:this.id}}) //  接收: this.$route.params.id

3.通过query传参

this.$router.push({path:"/Search",query:{ age:20 }}) // this.$route.query.age
this.$router.push({name:"Search",query:{ age:20 }}) // this.$route.query.age

query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数;
params相当于POST请求，参数不会在地址栏中显示.
params 传值相对更安全点，query 通过 url 传参，刷新页面还在，params刷新页面不在了

4.Vue 路由模式hash 和history

Hash 模式地址栏中有#，history 没有，history 模式下刷新，会出现 404 情况，需要后台配置.

5.对vue 中keep-alive 的理解

keep-alive 是 vue 的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个 DOM 元素也不会出现在父组件链中.
作用：在组件切换过程中将状态保留在内存中，防止重复渲染 DOM，.减少加载时间以及性能消耗，提高用户体验。
生命周期函数：Activated 在 keep-alive 组件激活时调用，deactivated在 keep-alive 组件停用时调用

6.watch 和computed有什么区别？

computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；
watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。

7.Vue 双向绑定原理

通过数据劫持结合发布者-订阅者模式的方式来实现,利用了Object.defineProperty() 这个方法，重新定义了对象获取属性值(get)和设置属性值(set)。

8.在 vue 项目中如何引入第三方库（比如 jQuery）？有哪些方法可以做到？

绝对路径直接引入，在 index.html 中用 script 引入

<script src="./static/jquery-1.12.4.js"></script>

然后在 webpack 中配置 external

externals: { 'jquery': 'jQuery' }

在组件中使用时 import

import $ from 'jquery'

vue3

vue3组合api基础总结

计算机网络基础

1.从输入url到页面加载完成发生了什么?

域名解析 => TCP连接 => http创建request => 服务器发送response => 解析http response => 解析html，js文件 => 建立dom tree => 渲染 render tree
1.域名解析，获得对应的ip地址（浏览器查找当前URL的DNS缓存记录，DNS解析URL对应的IP）
2.根据IP建立TCP连接（三次握手）
3.HTTP发起请求创建request
4.服务器理解请求，发送http response
5.解析http response
6.解析html，js文件建立dom tree
7.解析css文件与dom tree一起建立 render tree
8.渲染 render tree
参考文章

2.前端性能优化知识体系

前端性能优化参考
 vue项目首屏加载优化
首屏加载优化：
①路由懒加载
②压缩图片（使用image-webpack-loader，在vue.config.js里去配置）
③gzip 压缩（1.服务器压缩文件nginx打开gzip，2.前端 webpack 打包生成 gz 文件，要装插件的）
④webpack打包体积优化（使用splitChunks插件提取或分离代码，减少首屏加载的请求次数）

3.说一下 http 和 https

(1)http 和 https 的基本概念：
http: 超文本传输协议，互联网上应用最为广泛的一种网络协议
https: 是以安全为目标的 http通道，是http的安全版,它的安全基础是SSL层,加密的详细内容就需要SSL
(2)http 和 https 的区别？
①http 传输的数据都是未加密的，是超文本传输协议，信息是明文传输
②https协议需要身份认证，费用较高，是由 SSL+HTTP 协议共同构建，安全性更高
③使用不同的链接方式，端口也不同，http 协议的端口为 80，https 的端口为 443

4.TCP三次握手

第一次：客户端发送请求给服务端确认
第二次：服务端确认好以后，就接收客户端发送的报文
第三次：服务端发送请求给客户端确认

5.TCP和UDP的区别

①TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接
②TCP 提供可靠的服务，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP 就不能保证可靠交付
③TCP面向字节流,UDP面向报文

6.几个很实用的BOM属性对象方法

(1)location对象 location.href/search/hash/host/pathName/protocol/replace
(2)history对象 go()/back(),forward()
(3)Navigator对象 navigator.cookieEnabled --返回浏览器是否支持(启用)cookie

7.补充400和401、403状态码

(1)400状态码：请求无效
产生原因：
前端提交数据的字段名称和字段类型与后台的实体没有保持一致
前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify 转化成字符串。
解决方法：
①对照字段的名称，保持一致性
②将obj对象通过JSON.stringify实现序列化
(2)401状态码：当前请求需要用户验证
(3)403状态码：服务器已经得到请求，但是拒绝执行

8.click在ios上有300ms延迟，原因及如何解决？

(1)粗暴型，禁用缩放

(2)使用插件
第一步:npm install fastclick --save
第二步:全局引入 main.js
import fastClick from ‘fastclick’
配置一下
第三步:fastClick.attach(document.body)

9.http协议

一种用于在互联网上发送和接收数据的协议，允许浏览器和服务器之间进行通信。
1.从数据传输层面回答：
浏览器作为客户端向服务器请求数据，服务器则响应并发送数据回来。
2.从请求方式层面回答
HTTP协议中最常见的方式是GET和POST。GET用于从服务器获取数据，POST用于向服务器发送数据。
3.从状态码层面回答
200,404,500…

10.csrf和xss的网络攻击及防范

黑客通过发送图片，邮件的方式（图片和邮件通常会藏有非法接口），用户点击后就会被攻击。
CSRF 攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。
处理措施：要阻止 CSRF 攻击，我们首先就要考虑在 Cookie做文章（前端不需了解，运维方向的东西）
XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie

webapck && vite

vite凭什么比webpack快，关键点和核心点在哪？
1.构建方面：
webpack在启动的时候会把所有的文件都build一遍，他需要从入口文件去索引整个项目的文件，编译成一个或多个单独的js文件。不管模块是否被执行,都要编译和打包到这个bundler里面。随着项目越来越复杂，项目的模块越来越多，打包后的bundler也越来越大，打包的速度自然也会越来越慢。这样的话项目启动时间只会越来越长。
而vite在启动的时候不需要打包,也就是说他不需要拆分模块的依赖，不需要编译，也就是说按需动态的编译方式，缩短了编译时间。

2.热更新方面：
当改动了一个模块之后，仅需让浏览器重新请求该模块即可，不会像webpack把所有的模块都重新编译一遍

3.底层实现上
vite是基于es build预构建的, esbuild是用go语言写的，比js编写的打包器预构建快10-100倍。go的操作是纳秒级,js的操作是毫秒级。

星期五の夜

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
2023.2.20

htmlcss1.让一个div垂直居中2.css三栏布局<div class="container"> <div class="left"></div> <div class="main">center</div> <div class="right">right</div></div>.container{ display: flex;}.left{
复制链接

扫一扫