前端面试知识点

对扩展开放

对修改封闭

数据源

界面

控制器、逻辑处理

实质是JS对象

view通过事件绑定操作model

model通过数据绑定操作view

最终指向DOM

子主题

基本形式：调用能力，传递参数，监听回调

将以上封装的代码打包，叫做invoke.js，内置到客户端

客户端每次启动webview，都默认执行invoke.js

本地加载，免去网络加载的时间，更快

本地加载，没有网络请求，黑客看不到schema协议，更安全

display:none

visibility:hidden

v-if

v-show

回流必将引起重绘，重绘不一定引起回流

回流

重绘

回流比重绘的代价更高

1、行内元素

2、块级元素

3、子元素包含 float:left 属性

4、flex 2012

5、flex 2009

6、transform

7、绝对定位方式

8、绝对定位方式

1、单行文本

2、行内块级元素

3、元素高度不固定

4、flex 2012

5、flex 2009

6、transform

7、绝对定位

8、绝对定位方式

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

当同步的代码比较多的时候，不确定异步定时器的任务时候能在指定的时间执行

解决传统js动画使用setTimeout 或者 setInterval存在两个问题

优势

宏任务

微任务

TCP/IP 是互联网相关的各类协议族的总称

TCP，UDP，IP，FTP，HTTP，ICMP，SMTP 等都属于 TCP/IP 族内的协议

是互联网的基础，它是一系列网络协议的总称。
这些协议可以划分为四层，分别为链路层、网络层、传输层和应用层。

UDP协议全程是用户数据报协议

与TCP协议一样用于处理数据包，是一种无协议的连接

特点

全称是传输控制协议

是一种面向连接的、可靠的、基于字节流的传输层通信协议

TCP 是面向连接的、可靠的流协议

TCP连接过程

TCP断开过程

特点

无状态、无连接的应用层协议

通常浏览器允许跨域资源嵌入（Cross-origin embedding），如 img、script 标签

通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向

通常浏览器不允许跨域读操作（Cross-origin reads）

url参数直接注入

存储到DB后读取时注入

获取页面数据

获取Cookies

劫持前端逻辑

发送请求

偷取网站的任意数据

偷取用户的资料

偷取用户的秘密和登录态

欺骗用户

ctx.set('X-XSS-Protection', 0) // 禁止XSS过滤

内容安全策略 (CSP, Content Security Policy)

本质上就是建立白名单

是预防XSS攻击窃取用户cookie最有效的防御手段

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

如果检测到跨站脚本攻击，浏览器将清除页面（删除
不安全的部分）。

击通过向目标发送具有欺骗性源IP地址的大量TCP“初始连接请求”SYN数据包来利用TCP握手

此攻击类似于同时在多个不同计算机上反复按Web浏览器中的刷新 - 大量HTTP请求泛滥服务器

备份网站不一定是全功能的，如果能做到全静态浏览，就能满足需求。最低限度应该可以显示公告，告诉 用户，网站出了问题，正在全力抢修

提高犯罪成本

DNS服务器(DNS解析各个步骤)被篡改，修改了域名解析的结果，使得访问到的不是预期的ip

运营商劫持

监测到故障后停掉故障worker并开启一个新的worker

pm2 monit

export default

export

npm init 建立 package.json

npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

创建 .babelrc

npm install -g babel-cli

npm install webpack babel-loader --save-dev

配置 webpack.config.js

配置package.json中的scripts

运行npm start

npm init

npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev

配置.babelrc

配置rollup.config.js

增加一个"start"："webpack"

配置package.json中的scripts

var ajax= $.ajax({
      url: 'data.json',
      success: function () {},
      error: function () {}
})
console.log(ajax) // 返回一个 XHR 对象

var ajax = $.ajax('data.json')
ajax.done(function() {})
      .fail(function() {})
      .done(function () {}
)
console.log(ajax) // 返回一个 deferred 对象

// 很像 Promise 的写法
var ajax = $.ajax('data.json')
ajax.then(function() {// success1},
                function(){// error1})
       .then(function(){// success2},
                 function(){// error2})

表现出来就是ajax.then()这种写法，可以随时扩展，同时不用修改之前的代码

第一类：dtd.resolve dtd.reject

第二类：dtd.then dtd.done dtd.fail

两类应该分开使用，防止出现较严重的后果

function waitHandle() {
   var dtd = $.Deferred()
   var wait = function (dtd) {
      var task = function () {
      console.log('执行完成)
      dtd.resolve() // 异步任务已完成
      // dtd.reject() // 异步任务失败或出错
   }
   setTimeout(task, 2000)
   return dtd.promise()
   // 注意这里返回的是promise 而不是直接返回 deferred 对象
   }
   // 注意，这里一定要有返回值
   return wait(dtd)
}

// 经过上面的改动，w 接收的就是一个 promise 对象
var w = waitHandle()
$.when(w)
   .then(function () {
      console.log('ok1')
   })
   .then(function () {
      console.log('ok2)
   })
// w.reject()  // 执行这句话会直接报错

dtd.promise()只支持dtd.then dtd.done dtd.fail

接收 promise 对象的数组，待全部完成后统一执行success
.then接收的是一个数组datas，依次包含 promise 数组的返回内容

接收 promise 对象数组，只要有一个完成就执行success
.then接收的是最先执行完成的 promise 的返回值

初始：pending

变化不可逆

promise实例必须实现then方法

then必须接收两个函数作为参数

then的返回必须是一个Promise实例

_l：列表渲染函数

idFolder：条件判断

这样每次渲染都会先执行循环在判断条件，浪费了性能

隐藏性

任意性

无效性

Object.freeze(users);    实现数据冻结

vue-virtual-scroller

vue-virtual-scroll-list

类似于React的Hook，便于逻辑复用

移除数据劫持、事件监听、子组件属性 所有的东西还保留 只是不能修改

keep-alive 组件激活时调用

keep-alive 组件停用时调用

Object.defineProperty( )通过getter和setter监听所有属性值

如果有变动的，就通知订阅者

订阅器Dep主要负责收集订阅者，然后再属性变化的时候执行对应订阅者的更新函数

订阅器Dep中会添加一个订阅者在getter里面，是为了让Watcher初始化时进行触发

收到属性的变化通知并执行相应的函数，从而更新视图

订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中

可以扫描和解析每个节点的相关指令

解析模板指令，并替换模板数据，初始化视图

将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器

to ：即将要进入的目标路由对象

from：当前正要离开的路由对象

next：路由控制参数

常用验证用户权限

常用自动让页面返回最顶端

在渲染该组件的对应路由被 confirm 前调用

此时实例还没被创建，所以不能获取实例（this）

当前路由改变，但改组件被复用时候调用

该函数内可以访问组件实例(this)

当导航离开组件的对应路由时调用。

该函数内可以访问获取组件实例（this）

数据劫持 / 数据代理
依赖收集
发布订阅模式

有逻辑

动态的

只有JS能实现逻辑

只有JS才能渲染页面

自己开发时尽量不使用

可读性比较差

可能是混淆错误和兼容性问题的根源

在 ECMAScript 5 严格模式中该标签已被禁止

扩展一个语句的作用域链

模板中的所有信息都包含在了render函数中

this即vm

price即this.price即vm.price，即data中的price

_c即this._c即vm._c

为什么不监听set

data中有属性不被用到

被用到的会走get，不被用到的不走get

为走到get的，set的时候也无需关心

从而避免不必要的渲染

Chrome 开发者工具（DevTools）

Chrome 扩展

Node CLI
https://github.com/GoogleChrome/lighthouse#using-the-node-cli

Node Module

Perfermance 性能分析

Accessibility 可访问性

Best Practices 最佳实践

SEO 搜索引擎优化

Progressive Web App 是否集成pwa

TTFB (Time to First Byte)

FP (First Paint)

FCP(First Contentful Paint)

LCP(Largest Contentful Paint)

SI(Speed Index)

TTI(Time to Interactive)

TBT Total Blocking Time

FID (First Input Delay)

CLS(Cumulative Layout Shift)

不利于SEO

首屏渲染慢，会出现较长白屏现象

增加了客户端负担

有利于SEO

有利于首屏渲染

服务器算力压力增大，相对于客户端渲染会更多的消耗服务器性能

不易维护，开发相对客户端渲染有限制

学习成本较高，需增加node相关方面的学习

增加loading动画

增加骨架屏

vue-meta-info

预渲染prerender

无需权限即可访问

需要权限才可访问

登录后获取权限roles

根据roles遍历asyncRoutes路由生成权限路由表

权限路由逻辑处理

本质：路由守卫

包含

不包含

比如elementUI的tab切换组件：el-tan-pane