前端基础知识笔记

dfz_dfz

已于 2022-09-26 13:33:49 修改

阅读量267

点赞数

分类专栏：题库文章标签：前端 vue.js javascript 面试

于 2022-09-23 16:44:33 首次发布

本文链接：https://blog.csdn.net/dfz_life/article/details/127013876

版权

题库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端基础知识笔记

1.SEO（搜索引擎检索）

TDK(title，description，keywords)
- 网站架构分析，排版布局HTML结构尽量简单，重要的HTML放在前面（搜索引擎抓取从上到下），使用header，footer，nav，section，article，h1-h6等语义化标签，图片标签设置alt和title属性，添加面包屑导航
- 友情链接
- 减少使用display:none，CSS尽量不要内联
- 控制页面的大小，减少http请求，提高网页加载速度
- 重要内容不要用js输出，蜘蛛抓取不到（vue项目单页应用不利于SEO）

2.vue2生命周期

### 初始化阶段
new vue()初始化事件和生命周期
beforeCreate
初始化注入和校检
data和methods尚不可用
created
data和methods可用
### 模板编译阶段
判断当前是否有指定的el选项，如果没有则调用vm.$mount('el')，如果有则判断是否有指定的template选项，有的话将template编译成render函数，如果没有则将el外部的HTML作为template编译

### 挂载阶段
beforeMount
创建vm.$el替换el
将内存中渲染好的模板真实的替换到浏览器中
mounted

初次渲染不会触发这两个函数 
beforeUpdate
data已更新，dom未更新
updated
dom节点已重新渲染

### 销毁阶段
beforeDestroy
实例还能调用，事件监听，子实例，定时器等在这里销毁
destroyed

3.let(const)和var的区别

- var具有变量提升的作用，在全局作用域下声明的变量将会变成Window的属性，let变量不会被添加到window对象中
- var是函数作用域，let是块级作用域
- es6之前没有块级作用域，所谓的块级作用域就是用{}包含的区域，我们常用的有for，while，if等。但是在块级作用域中用let声明变量，那么此变量就有了块级作用域，就必须只有在此块级作用域才能访问此变量。
- var可以允许重复声明相同的变量，后者会覆盖前者，let则不能重复声明相同的变量。
- const一旦声明必须赋值,不能使用null占位；声明后不能再修改 ；如果声明的是复合类型数据，可以修改其属性

4.rem在移动端字体过小的问题

- 禁止用户缩放页面
- 浏览器设置字体大小，影响浏览器打开的页面。通过js可控制用户修改字体大小，使页面不受影响。
- rem加js动态设置字体大小
- 既然是JS代码，为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面
- 使用vw（vh）+rem+百分比实现移动端自适应

5.h5支付页面跳转问题

官方说法：服务端调用下单接口后，将返回的 mweb_url 链接返回给客户端，让客户端调用该链接拉起微信支付，需要配置跳转地址的话，在链接后面带上 &redirect_url=跳转地址，不带则默认返回当前页面（iOS有问题，会跳域名，不带接口）。

处理iOS 跳转问题：服务端调用下单接口后，将返回的 mweb_url 链接在服务端请求一次，请求的时候要带请求头参数 Referer 值必须是你申请的支付白名单，会返回一个html页面，通过正则表达式获取 deeplink 后面的链接给客户端使用，会变成直接拉起微信支付，没跳中间页。

1. 不能拉起微信H5支付
    原因和网站系统采用了框架及AJAX异步通信有关，微信H5支付不是在提交表单以后直接拉起支付的，而是通过AJAX提交到后台，然后后台程序 把支付连接返回给前端AJAX，然后由JS调用拉起 微信H5支付！由于中间JS代码兼容性等问题，导致没能拉起支付。解决办法是删除无效的JS代码部分，重新设计构造JS拉起功能代码，同时因为由于JS支持的长数字精确性不能超过16位 ，如果是订单号的话，会导致传输的订单号是错误的，最终支付成功后，因为传递的订单号错误，不能成功支付回调！和主动轮训订单号是否支付成功！

2. 支付成功之后没有跳转到支付成功页面
    用户H5支付分为设置了支付成功后同步打开的页面，和没有设定 支付成功后返回原发起支付页面。这两个各自存在问题。前者即使设置了支付成功后页面，即使做了主动查询数据库功能，但是支付成功后还是提示订单没有支付！这个原因是 异步回调 有时 没有前端同步回调快！  就是同步页面打开时，后端异步还没有通知，此时同步页面已经打开，去查询订单还是未支付状态！。这其中还涉及到多方案情况下的分别程序设计策略，和参数传递等问题

6.vue第一次加载时会不会触发updated函数

第一次初始化页面时不会触发beforeupdate和updated函数，当页面或者data更新时才会触发

7.性能优化

- CSS和js压缩打包（开启gzip）
- 减少http请求
- 图片较多的页面使用懒加载进行优化
- 图片优化（雪碧图，使用字体图标）
- 使用cdn
- 前端代码结构优化
- 使用无cookie域名
- 样式表和js文件优化
- 利用浏览器缓存
- DNS预解析（dns-prefetch） <link rel="dns-prefetch" href="http://www.xxx.com/">
- 减少重绘回流
- webpack性能优化:1.打包公共代码2.动态导入与按需加载

8.防抖节流

- 防抖：
动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件
在上一次事件触发之后的 time 时间内如果事件没有再次触发，那么就在 time 时间后触发，否则将触发的时间作为新的起始点

- 节流：
动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发

- 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行

- debounce（防抖）一段时间之后执行
    search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
    window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
- throttle（节流）立即执行
    鼠标不断点击触发，mousedown(单位时间内只触发一次)
    监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

9.模块与组件

从设计上来看，组件强调复用，模块强调职责（内聚、分离），或者说组件是可以达到可复用要求的模块。
Module, 中文为模块。它的核心意义是分离职责，属于代码级模块化的产出。本身是一组具有一定内聚性代码的组合，职责明确。对外的接口可以是松散的，也可以是集中的。它以问题分解的形式，来解决软件设计问题。它更强调一个内聚的概念，形式上可以是Java中的包，也可以是一个源代码目录。
Component，中文称为组件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。

10.浏览器输入URL之后发生了什么

- 查找当前URL是否有缓存
- DNS解析
- TCP链接
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- 关闭TCP链接

11.事件循环（js的执行机制）

### JS的执行顺序
- JS代码是从上到下一行一行执行的
- 如果某一行报错，则停止执行下面的代码
- 先执行同步代码，再执行异步代码

### 事件循环的执行过程
- 同步代码：调用栈执行后直接出栈
- 异步代码：放到Web API中，等待合适的时机放入回调队列，等到栈空时事件循环（EventLoop）开始工作，进行轮询。
- 微任务比宏任务执行时机要早
- 微任务在DOM渲染前触发，宏任务在DOM渲染后触发

### 宏任务：

    setTimeout  setInterval  Ajax  DOM事件  script(整体代码)  I/OUI交互事件  postMessageMessage  Channel  setImmediate(Node.js 环境)

### 微任务：

    Promise  async/await  Object.observe  MutationObserver  process.nextTick(Node.js 环境)

### 异步和同步的区别:

    异步不会阻塞程序的执行，同步会阻塞程序的执行。

12.vue双向绑定原理

数据劫持和发布订阅者模式相结合
- Object.defineProperty()
- observe监听器:监听属性的变化通知订阅者
- watcher订阅者:收到属性的变化然后更新视图
- compile解析器:解析指令，初始化模板，绑定订阅者

13.vuex

状态管理模式，集中式存储所有组件的状态的小仓库，并保持我们存储的状态以一种可预测变化的方式发生变化
- state
- mutations修改值 this.$store.commit(M的方法，参数) 不能包含异步操作
- actions 异步操作 在actions里面提交mutations this.$store.dispatch(A的方法，参数)
- getters修饰器

14.watch和computed的区别

## 监视属性（watch）
    1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
    2.监视的属性必须存在，才能进行监视！！
    3.配置immediate:true可以监测对象内部值改变
## 计算属性（computed）
    1.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
    2.get函数什么时候执行？
        (1).初次读取时会执行一次。
        (2).当依赖的数据发生改变时会被再次调用。
    3.优势：计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。
        注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
## 区别
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

15.HTTP和HTTPS的区别

    1. HTTPS协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
    2. HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。
    3. HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
    4. HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。

16.vue: data返回一个对象和返回一个函数有什么区别

不使用return包裹的数据会在项目的全局可见，会造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

17.怎么封装axios

单独API管理层、参数序列化、取消重复请求、Loading、状态码...

18.vue文件public和asset的区别

public文件夹中的文件会原封不动的放到dist文件夹中;
build之后，assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等

19.图片引用时…/和@的区别

…/ 表示父级目录下
./ 表示当前目录下
@/ 是webpack/build/webpack.base.conf.js中配置的路径别名
~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径

20.闭包，原型，原型链

### 闭包就是能够读取其他函数内部变量的函数。
    由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的优点：
    可以将一个变量长期存储在内存中，用于缓存;
    可以避免全局变量的污染;
    加强封装性，实现了对变量的隐藏和封装;
闭包的缺点：
    因为函数执行上下文AO执行完后不被释放，所以 会导致内存消耗很大，增加了内存消耗量，影响网页性能出现问题，而且过度的使用闭包可能会导致内存泄露，或程序加载运行过慢卡顿等问题出现。所以我们可以在退出函数之前，将不使用的局部变量进行删除。

### 原型
所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象;
所有函数都有一个prototype(原型)属性，属性值是一个普通的对象;
所有引用类型的__proto__属性指向它构造函数的prototype;

### 原型链
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

21.$nextTick()

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

22.判断是否是数组

instanceof
constructor
Object.prototype.toString.call()
Array.isArray()

23.vue父子组件和不同页面之间切换时的生命周期

### ⽗⼦组件初始化时 ⽣命周期的执⾏顺序
    ⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount -> ⼦mounted->⽗mounted
### ⽗⼦组件数据更新时 ⽣命周期的执⾏顺序
    ⽗beforeUpdate -> ⼦beforeUpdate -> ⼦updated -> ⽗updated
### ⽗⼦组件销毁时 ⽣命周期的执⾏顺序
    ⽗beforeDestroy -> ⼦beforeDestroy -> ⼦destroyed -> ⽗destroyed

24.JS循环大总结， for, forEach，for in，for of, map区别

forEach 遍历列表值,不能使用 break 语句或使用 return 语句；
for in 遍历对象键值(key),或者数组下标,不推荐循环一个数组；
for of 遍历列表值,允许遍历 Array（数组）, String（字符串）, Map（映射）, Set（集合）等可迭代的数据结构等，在 ES6 中引入的 for of 循环，以替代 for in 和 forEach() ，并支持新的迭代协议。

for in循环出的是key，for of循环出的是value；
for of是ES6新引入的特性。修复了ES5的for in的不足；
for of不能循环普通的对象，需要通过和Object.keys()搭配使用；
map不改变原数组但是会返回新数组；

break和continue可以在for中正常执行，return不可以；
break和continue可以在for-in中正常执行，return不可以；
break和continue可以在for-in中正常执行，return不可以；
break和continue不可以在forEach中正常执行，会出现异常，return会跳出当前循环，但是不会终止循环的继续；
break和continue不可以在map中正常执行，会出现异常，return会跳出当前循环，当前位置会用undefined替换，不会改变数组的长度，但是不会终止循环的继续;
break和continue不可以在filter中正常执行，会出现异常，return会跳出当前循环，并且会去除当前位置，改变数组的长度，但是不会终止循环的继续;

25.vue路由钩子

1、全局钩子
2、某个路由的钩子
3、组件内钩子

1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
2.Vue.afterEach(function(to,form))/*在跳转之后判断*/

26.vue路由跳转的三种方式是什么

1、使用“<router-link to='跳转页面路径>”语句； 
2、使用“this.$router.push({ path:’/user’})”语句；
3、使用“this.$router.replace{path:'/'}”语句。

27.组件之间的通讯方式

props/$emit
父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

$emit/$on
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级

vuex

$attrs/$listeners

provide/inject
Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

父子通信：
    父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
兄弟通信：
    Bus；Vuex
跨级通信：
    Bus；Vuex；provide / inject API、$attrs/$listeners

Tips:笔记由个人平时学习整理资料，当中可能会引用到各位大佬的原文，如果有侵权请联系删除或者表明出处！

dfz_dfz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端基础知识笔记

forEach 遍历列表值,不能使用 break 语句或使用 return 语句；for in 遍历对象键值(key),或者数组下标,不推荐循环一个数组；for of 遍历列表值,允许遍历 Array（数组）, String（字符串）, Map（映射）, Set（集合）等可迭代的数据结构等，在 ES6 中引入的 for of 循环，以替代 for in 和 forEach() ，并支持新的迭代协议。for in循环出的是key，for of循环出的是value；for of是ES6新引入的特性。
复制链接

扫一扫