Preparing01

原型链：原型链是原型对象创建过程的历史记录，当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构
JavaScript的原型是为了实现对象间的联系，解决构造函数无法数据共享而引入的一个属性，而原型链是一个实现对象间联系即继承的主要方法

1.谈谈你对原型的理解？

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象，使用原型对象的好处是所有对象实例共享它所包含的属性和方法

2.什么是原型链？原型链解决的是什么问题？

1）原型链解决的主要是继承问题
2）每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法
3）构造函数 Parent、Parent.prototype 和实例 p 的关系如下:(p.__proto__ === Parent.prototype)
在这里插入图片描述

3.prototype 和 proto 区别是什么？

1）prototype是构造函数的属性
2）__proto__是每个实例都有的属性，可以访问 [[prototype]] 属性
3）实例的__proto__与其构造函数的prototype指向的是同一个对象

v-if vs v-show

v-if每次切换都重建和销毁，v-show为CSS切换
v-if如果初始化时为假，那么直接不渲染，v-show会
v-if能支持多模块切换,v-show只针对当前元素
如果频繁切换v-show更优秀，如果比较少改变v-if更优秀

created:
在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:
在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

position absolute:

脱离文档流，
相对于距离它最近的父定位元素移动。如果所有的父元素都不是定位元素，相对于浏览器视口位置移动。

//预测三秒会下雨
var pm1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(Math.random()>0.1){
            resolve('下雨了1')
        }else{
            reject('没下')
        }
    },3000)
});
//可以在任意的时候去处理结果
 pm.then((res)=>{
     console.log(res);
 }).catch((err)=>{
     console.log(err);
 }).finally(()=>{//无论是够成功与否，都会执行
    console.log('测试了一次');
 })

把data对象变成函数并return

组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

数组去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}

function unique (arr) {
  return Array.from(new Set(arr))
}

伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
可以同时使用多个伪类，而只能同时使用一个伪元素；

伪类： :focus , :hover , :link , :visited , :first-child

伪元素：::before , ::after

所有HTML元素可以看作盒子。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　　　即总宽度=margin+width

变量声明

1) 变量初始化要求不同：var 和 let 声明变量时可以不需要初始化，没有初始化的变量的值为“undefined”，在代码的运行过程中变量的值可以被修改。const 声明变量时必须初始化，并且在代码的整个运行过程中不能修改初始化值，否则运行时会报错。

2) 变量提升的支持不同：var 声明支持变量提升，而 const 和 let 声明不支持变量提升。

3) 对块级作用域的支持不同：var 声明的变量，不支持块级作用域，let 和 const 声明的变量支持块级作用域。

4) 重复声明：在同一个作用域中，var 可以重复声明同一个变量，let 和 const 不能重复声明同一个变量。

const声明的常量可以push进数组中

因为const声明的时候，不能改变的是这个变量在内存中的指针。数组和对象是引用类型。splice和push并不会改变该数组在内存中的地址引用，所以不会报错

闭包

闭包就是可以读取其它函数内部变量的函数

防抖

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

节流

类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活

应用场景：

1.节流

scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

2.防抖

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存

1.什么是懒加载？

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

2.为什么要使用懒加载？

很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。

3.懒加载的原理是什么？

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

4.懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

5.懒加载的优点是什么？

页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

2、预加载

1.什么是预加载？

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

2.为什么要使用预加载？

图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

js中同步、异步

js的同步和异步问题通常是指ajax的回调，如果是同步调用，程序在发出ajax调用后就会暂停，直到远程服务器产生回应后才会继续运行。而如果是异步调用，程序发出ajax调用后不会暂停，而是立即执行后面的代码，服务器返回信息后会自动触发回调函数进行处理。相比较而言，异步调用的性能最佳，程序不会出现卡顿的现象，而同步调用则通常用于需要立即获得结果并实时处理的情况。范

Promise

是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise对象代表一个异步操作有三种状态： **pending（进行中）**、**fulfilled（已成功）**和**rejected（已失败）**。

状态发生改变之后就凝固了，不会再变了，会一直保持这个结果，这时就称为 **resolved（已定型）**。

all并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染。

Promise.all的使用

可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

Promise.race的使用

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

async

就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用

async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。当然也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

事件循环

JS 调用栈

JS 调用栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。
同步任务、异步任务

JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
Event Loop

调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环

XSS攻击（跨站脚本攻击）

在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

1.反射型XSS攻击

反射型 XSS 一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的 URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。反射型XSS通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端 Cookies 或进行钓鱼欺骗。

2.存储型XSS攻击

也叫持久型XSS，主要将XSS代码提交存储在服务器端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码。当目标用户访问该页面获取数据时，XSS代码会从服务器解析之后加载出来，返回到浏览器做正常的HTML和JS解析执行，XSS攻击就发生了。存储型 XSS 一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。

3.DOM-based 型XSS攻击

基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞。

如何防御XSS攻击？

对输入内容的特定字符进行编码，例如表示 html标记的 < > 等符号。
对重要的cookie设置 httpOnly, 防止客户端通过document.cookie读取 cookie，此 HTTP头由服务端设置。
将不可信的值输出URL参数前，进行 URLEncode操作，而对于从 URL参数中获取值一定要进行格式检测（比如你需要的是URL，就判读是否满足URL格式）。
不要使用 Eval来解析并运行不确定的数据或代码，对于 JSON解析请使用 JSON.parse() 方法。
后端接口也应该要做到关键字符过滤的问题。

forEach()方法不会返回执行结果，而是undefined，也就是说forEach()会修改原来的数组。而map()方法得到一个新的数组并返回。

说一下浏览器如何渲染页面的？

浏览器拿到HTML，先将HTML转换成dom树，再将CSS样式转换成stylesheet，根据dom树和stylesheet创建布局树，对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面。<br> 加分回答<br> 分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层<br> 光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域<br> <div> <br> </div> <div> <img alt="" src="https://uploadfiles.nowcoder.com/images/20210901/308571_1630491268441/834E2076DE410DB9E5E23B14E7BFAB36"> </div> <div> 早期没有分层和光栅化，流程如下<br> 1.解析HTML文件，创建DOM树 2.解析CSS,形成CSS对象模型 3.将CSS与DOM合并，构建渲染树（renderingtree） 4.布局和绘制<br> <br> <img alt="" src="https://uploadfiles.nowcoder.com/images/20210901/308571_1630491287702/F5DD00FDA49784A18CB3757ED969C3D5"><br> </div> <div> <br> </div>

用户数据报UDP有两个字段，分别是首部字段和数据字段。首部字段一共占8字节。分别是源端口号、目的端口号、长度、检验和，各占2字节。

常见的HTTP响应头有：cache-control，设置缓存方式。content-type，表明资源文件的类型。content-encoding，表明资源的编码。server，服务器的版本。transfer-encoding，资源是分块发送的。expires，设置缓存，优先级比cache-control低。connection，表明是长连接还是短连接。etag，文件的一个标志。refresh，用于重定向。access-control-allow-origin，允许跨域的站点。access-control-allow-methods，跨域请求的请求方法。content-range，文件长度。

为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性、position属性、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在侧轴（纵轴）方向上的对齐方式；

justify-content：定义在主轴（横轴）方向上的对齐方式。

webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

vue的双向数据绑定

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；

vue中就是每当可能用到双向绑定的指令，就在一个Dep中增加一个订阅者（addSub），其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方；

接着为input会添加监听事件，修改值就等于为该属性赋值，则会触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

语法：

　　Object.defineProperty(obj, prop, descriptor)

　　参数：

　　obj：必需。目标对象；
　　prop：必需。需定义或修改的属性的名字；
　　descriptor：必需。目标属性所拥有的特性；

　　返回值：

　　传入函数的对象，即第一个参数obj；

当创建 Vue 实例时,vue 会遍历 data 选项的属性,利用 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持（getter 用来依赖收集,setter 用来派发更新）,并且在内部追踪依赖,在属性被访问和修改时通知变化。

每个组件实例会有相应的 watcher 实例,会在组件渲染的过程中记录依赖的所有数据属性（进行依赖收集,还有 computed watcher,user watcher 实例）,之后依赖项被改动时,setter 方法会通知依赖与此 data 的 watcher 实例重新计算（派发更新）,从而使它关联的组件重新渲染。

一句话总结:

vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调

简要介绍 Vuex 原理

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。

简要介绍各模块在流程中的功能：

Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
dispatch：操作行为触发方法，是唯一能执行 action 的方法。
actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由 commit()来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法。
mutations：状态改变操作方法，由 actions 中的commit('mutation 名称')来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。

vue和react

1.数据不可变与响应式

eact整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变；

而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

2.通过js还是自己的处理方式

react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等；

vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

4.vue功能内置，react都交给社区去做

跨域

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

(1)通过jsonp跨域
(2)通过修改document.domain来跨子域
(3)使用window.name来进行跨域
(4)使用HTML5中新引进的window.postMessage方法来跨域传送数据
(5)使用代理服务器

Kedaya_7017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Preparing01

JS垃圾回收机制防止内存泄露。内存泄漏就是当已经不再需要某块内存时，这块内存仍存在着，垃圾回收机制就是间歇的不定期的寻找不再使用的变量，并释放掉它们所指向的内存。视为垃圾的情况：没有被引用的对象几个对象相互引用形成闭环不会被视为垃圾的情况：全局变量有具体引用关系的对象（闭包）undifined ,null ,number ,boolean ,string ,symbol ,bigint object(array,function,date)原型：所有引用类型都有一...
复制链接

扫一扫