html表单必须填写_javascript表单验证提交

2022年10月 前端面试题总结——（二） 　　第一章 面试题基础篇 　　1.1 HTML面试题 　　行内素有哪些？块级素有哪些？ 空(void)素有哪些？ 　　页面导入样式时，使用link和@import有什么区别？ 　　title与h1的区别、b与strong的区别、i与em的区别？ 　　img标签的title和alt有什么区别？ 　　png、jpg、gif 这些图片格式解释一下，分别什么时候用？ 　　1.2 CSS面试题 　　介绍一下CSS的盒子模型 　　line-height和heigh区别【大厂】 　　CSS选择符有哪些？哪些属性可以继承？ 　　CSS优先级算法如何计算？ 　　用CSS画一个三角形 　　一个盒子不给宽度和高 度如何水平垂直居中？ 　　方式一： 　　方式二： 　　display有哪些值？说明他们的作用。 　　对BFC规范(块级格式化上下文：block formatting context)的理解？ 　　清除浮动有哪些方式？ 　　在网页中的应该使用奇数还是偶数的字体？为什么呢？ 　　position有哪些值？分别是根据什么定位的？ 　　左侧固定 300px，右侧自适应的布局 　　写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。 　　什么是CSS reset？ 　　css sprite是什么,有什么优缺点 　　display: none;与visibility: hidden;的区别 　　opacity 和 rgba区别 　　1.3 JavaScript基础面试题 　　延迟加载JS有哪些方式？ 　　JS数据类型有哪些？ 　　JS数据类型考题 　　考题一： 　　考题二： 　　null和undefined的区别 　　和=有什么不同？ 　　JS微任务和宏任务 　　JS作用域考题 　　面试的时候怎么看： 　　考题一： 　　考题二： 　　考题三： 　　JS对象考题 　　JS对象注意点： 　　考题一： 　　考题二： 　　考题三： 　　JS作用域+this指向+原型的考题 　　考题一： 　　考题二： 　　考题三： 　　考题四： 　　JS判断变量是不是数组，你能写出哪些方法？ 　　方式一：isArray 　　方式二：instanceof 【可写,可不写】 　　方式三：原型prototype 　　方式四：isPrototypeOf() 　　方式五：constructor 　　slice是干嘛的、splice是否会改变原数组 　　JS数组去重 　　方式一：new set 　　方式二：indexOf 　　方式三：sort 　　找出多维数组最大值 　　给字符串新增方法实现功能 　　给字符串对象定义一个addPrefix函数，当传入一个字符串str时，它会返回新的带有指定前缀的字符串，例如： 　　console.log( ‘world’.addPrefix(‘hello’) ) 控制台会输出helloworld 　　找出字符串出现最多次数的字符以及次数 　　new操作符具体做了什么 　　闭包 　　原型链 　　JS继承有哪些方式 　　方式一：ES6 　　方式二：原型链继承 　　方式三：借用构造函数继承 　　方式四：组合式继承 　　说一下call、apply、bind区别 共同点：功能一致 　　区别： 　　场景： 　　sort背后原理是什么？ 　　深拷贝和浅拷贝 　　localStorage、sessionStorage、cookie的区别 　　1.4 H5/C3面试题 　　什么是语义化标签 　　::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪素的作用。 　　如何关闭IOS键盘首字母自动大写 　　怎么让Chrome支持小于12px 的文字？ 　　-webkit-transform 　　rem和em区别 　　ios系统中素被触摸时产生的半透明灰色遮罩怎么去掉 　　webkit表单输入框placeholder的颜色值能改变吗？ 　　禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片 　　禁止ios和android用户选中文字 　　自适应布局 　　布局特点：屏幕分辨率变化时，页面里面素的位置会变化，而大小不会变化。 　　响应式布局 　　布局特点：每个屏幕分辨率下面会有一个布局样式，即素位置和大小都会变。 　　布局方案：媒体查询+流式布局。 　　第二章 面试题进阶篇 　　2.1 ES6面试题 　　var、let、const区别 　　作用域考题 　　考题一：let和const没有变量提升性 　　考题二： 　　考题三：可以修改 　　将下列对象进行合并 　　方式一：Object.assign 　　方式二：… 　　方式三：自己封装方法 　　箭头函数和普通函数有什么区别？ 　　Promise有几种状态 　　find和filter的区别 　　some和every的区别 　　2.2 webpack面试题 　　webpack插件 　　Webpack 是一个项目打包工具。可以压缩代码和图片，把浏览器识别不了的代码转化为能识别的，可以启动一个热加载服务器 Webpack可以看做是模块打包机：webpack处理应用程序时，内部常见一个依赖项目结构图映射项目需要的模块，然后将这些依赖生成一个或多个bundle。例如找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 Webpack可以解决传统构建工具的问题（按需加载） 模块化打包，一切皆模块，js是模块，css也是模块;语法糖转换：比如ES6转ES5、TypeScript;预处理器编译：scss,less等；项目优化：比如压缩，CDN解决方案分装：通过强大的Loader和插件机制，可以完成解决方案的封装，比如PWA流程对接：比如测试流程、语法检测等 Webpack构建流程 　　Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程： 　　初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler 　　编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理 　　输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中 　　具体为： ：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译：根据配置中的 entry 找出所有的入口文件：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统 　　在以上过程中， 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。 webpack中提高效率的插件 ：可以更友好的展示相关打包信息。：提取公共配置，减少重复配置代码：简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。：监控资源体积变化，尽早发现问题：模块热替换 优化 Webpack 的构建速度 使用的 Webpack 和 Node.js：HappyPack(不维护了)、thread-loader thread-loader 是一個可以大幅減少 build time 的一個 loader，在 heavy-loader 之前放上 thread-loader 就可以了，babel-loader 和 css-loader算是heavy-loader，花的时间最长。在babel-loader或者 css-loader 前面放上 thread-loader。 webpack-parallel-uglify-plugin 开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS 去压缩代码，但是变成了并行执行。 uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6)terser-webpack-plugin 开启 parallel 参数多进程并行压缩通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式)配置 image-webpack-loader ： exclude/include (确定 loader 规则范围)resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)noParse ：在配置模块相关时，module:{}，对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)resolve.extensions 尽可能减少后缀尝试的可能性IgnorePlugin (完全排除模块)合理使用alias ： 使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件基础包分离： ： 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。HashedModuleIdsPlugin 可以解决模块数字id问题 ： babel-loader 开启缓存terser-webpack-plugin 开启缓存使用 cache-loader 或者 hard-source-webpack-plugin 可以用来剔除 JavaScript 中用不上的死代码。purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块，提高tree shaking效率禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking使用 PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码 作用域提升 构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突必须是ES6的语法，因为有很多第三方库仍采用 CommonJS 语法，为了充分发挥 Scope hoisting 的作用，需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法 建议采用 polyfill-service 只给用户返回需要的polyfill，社区维护。(部分国内奇葩浏览器UA可能无法识别，但可以降级返回所需全部polyfill) 　　2.3 Git面试题 　　Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 　　Git使用 C 语言编写。 GIT 很快，C 语言通过减少运行时的开销来做到这一点 git常用命令 　　1）使用我们指定目录作为Git仓库。 　　2）添加新文件。可以使用add命令添加文件。 　　3）提交文件。能真正被保存在Git仓库。 　　4）当我们修改了很多文件，而不想每一个都add，想commit自动来提交本地修改，我们可以使用-a标识。 　　5）删除一个文件 　　6）从git中删除指定文件 　　7） 从服务器上将代码给拉下来 　　8）看所有用户 　　9）看已经被提交的 　　10）查看本地所有分支。 　　11）查看当前状态.。 　　12）查看所有的分支。 　　13）查看远程所有分支。 　　14）提交并且加注释。 　　15）将文件给推到服务器上 　　16）显示远程库origin里的资源 　　17）将本地库与服务器上的库进行关联。 　　18）切换到远程dev分支 　　19）删除本地库develop 　　20）建立一个新的本地分支 dev 　　21）将分支dev与当前分支进行合并 　　22）切换到本地dev分支 　　23）查看远程库 　　分支明细 　　（1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。 　　（2）开发分支（develop）：作为开发的分支，基于 master 分支创建。 　　（3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建 　　分支命令 　　（1）git branch 查看分支 　　（2）git branch 分支名称 创建分支 　　（3）git checkout 分支名称 切换分支 　　（4）git merge 来源分支 合并分支 (备注：必须在master分支上才能合并develop分支) 　　（5）git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除） 　　暂时保存更改 　　（1）存储临时改动：git stash 　　（2）恢复改动：git stash pop 解决冲突 　　开发过程中，每个人都有自己的特性分支，所以冲突发生的并不多，但如公共类的公共方法，当两人以上同时修改同一个文件，先后提交这些情况下就会报冲突的错误。 　　1）发生冲突，在IDE里面一般都是对比本地文件和远程分支的文件，然后把远程分支上文件的内容手工修改到本地文件，然后再提交冲突的文件。使其保证与远程分支的文件一致，这样才会消除冲突，然后再提交自己修改的部分。特别要注意下，修改本地冲突文件使其与远程仓库的文件保持一致后，需要提交后才能消除冲突，否则无法继续提交。必要时可与同事交流，消除冲突。 　　2）发生冲突，也可以使用命令。 　　通过git stash命令，把工作区的修改提交到栈区，目的是保存工作区的修改； 　　通过git pull命令，拉取远程分支上的代码并合并到本地分支，目的是消除冲突； 　　通过git stash pop命令，把保存在栈区的修改部分合并到最新的工作空间中； Git中如果本次提交误操作，如何撤销？ 　　如果想撤销提交到索引区的文件，可以通过git reset HEAD file来撤销； 　　如果想撤销提交到本地仓库的文件，可以通过git reset –soft HEAD^n恢复当到上一次提交的状态，索引区和工作空间不变更； 　　可以通过git reset –mixed HEAD^n恢复当至上一次提交的状态，工作区不变更； 　　可以通过git reset –hard HEAD^n恢复当至上一次提交的状态。 Git和SVN有什么区别？ GitSVN1. Git是一个分布式的版本控制工具1. SVN 是集中版本控制工具2.Git属于第3代版本控制工具2.SVN属于第2代版本控制工具3.客户端可以在其本地系统上克隆整个存储库3.版本历史记录存储在服务器端存储库中4.即使离线也可以提交4.只允许在线提交5.Push/pull 操作更快5.Push/pull 操作较慢6.工程可以用 commit 自动共享6.没有任何东西自动共享 git pull 和 git fetch 有什么区别？ 　　git pull 命令：从中央存储库中提取特定分支的新更改或提交，并更新本地存储库中的目标分支。 　　git fetch ：也用于相同的目的，但它的工作方式略有不同。当你执行 git fetch 时，它会从所需的分支中提取所有新提交，并将其存储在本地存储库中的新分支中。如果要在目标分支中反映这些更改，必须在 git fetch 之后执行git merge。只有在对目标分支和的分支进行合并后才会更新目标分支。为了方便起见，请记住以下等式： 　　git config 的功能是什么？ 　　git 使用你的用户名将提交与身份进行关联。 git config 命令可用来更改你的 git 配置，比如说用户名啥的。 　　假设你要提供用户名和电子邮件 ID 用来将提交与身份相关联，以便你可以知道是谁进行了特定提交。为此，我将使用： 　　git config –global user.name “Your Name”: 此命令添加用户名。 　　git config –global user.email “Your E-mail Address”: 此命令添加电子邮件ID。 　　第三章 面试题框架篇 　　3.1 Vue面试题 　　Vue2.x 生命周期 　　v-show、v-if的作用与区别 　　2.1 v-show 　　2.2 v-if 　　2.3 区别： 　　2.4 使用场景： 　　v-if和v-for的 优先级 　　v-for的优先级要比v-if的优先级高 　　证明这个事情，是在vue.js源码种10997行 　　注：v-if和v-for不要写在同一个节点上，这个性能很差。（v-if要写在父节点上） ref是什么 　　dom。ref 被用来给素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 素上使用，引用指向的就是 DOM 素 　　使用场景：如果项目中使用插件，并且插件是要dom的，那么就可以使用ref了。 keep-alive是什么 　　缓存组件，keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。 　　一旦使用keep-alive会多两个生命周期：activated、deactivated 　　功能：提升性能的 keep-alive作用如何使用 　　作用就是能够缓存不活动的组件，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。主要用于保留组件状态或避免重新渲染； 　　使用：简单页面时 　　缓存： < keep-alive include=”组件名”>< /keep-alive> 　　不缓存： < keep-alive exclude=”组件名”>< /keep-alive> nextTick 是什么 　　核心：当dom更新完毕，执行内部代码 　　nextTick()是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数, nextTick()的原理: 当调用nextTick方法时会传入两个参数,回调函数和执行回调函数的上下文环境,如果没有提供回调函数,那么将返回promise对象。 　　使用场景：使用插件的时候会用到。例如new Swiper这个插件可能会当前素的宽度或者高度，等dom都加载完毕再去宽度和高度就不会有任何问题了。 computed、methods、watch区别 　　computed：计算属性 　　methods ： 可以放入函数：没有缓存，如果一进入页面调用，就会触发 　　watch ：监听（路由和数据）、当数据发生改变时，才会触发、可以得到现在的值和过去的值 　　三者的共同点： 　　methods、computed、watch都是以函数为基础的 　　computed与watch都是以vue的依赖为基础，当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动 　　methods里是用来定义函数的，需要手动才能执行，不想computed和watch是“自动执行”函数 　　三者的不同点： 　　computed是计算属性，computed所依赖的属性发生变化是，计算属性才会重新计算，并进行缓存。当其他数据发生改变的时候computed属性不会重新计算，从而提升性能 　　watch： 　　a、watch类似于事件监听+事件机制 　　b、watch的方法默认是不会执行的，只有依赖的属性发生变化才会执行 　　c、watch默认第一次是不会执行的，通过声明immediate选项为true可以立即执行一次handler 　　d、watch用在监听数据变化，给后台发送数据请求 　　e、watch中的handler默认只能监听属性引用的变化，但内部属性是监听不到的，设置deep为true可以进行深度监听，但是性能开销也会变大 　　f、watch无法监听数据值的变化（特殊情况下） 　　computed和watch的使用场景： 　　​ computed一个数据受多个数据的影响　　例如：商品购物车的结算，过滤某些商品数据 　　​ watch一个数据影响多个数据　　例如：网络请求、浏览器自适应、监控路由对象 Vue组件的通信（组件的传值） 　　父传子 　　子传父 　　兄弟组件传值 　　创建bus作为中转 　　slot插槽 　　理解为一个占位符,当需要用时可以定义一个slot,不需要用时slot,页面上也不会有痕迹。 插槽显不显示是由父盒子决定的,插槽在哪个位置上显示是由子组件决定的。 　　使用场景：组件中有些地方的布局可能大多一致，但是细微有些小小变化。 Vue router 前端路由 　　什么是路由：根据不同的url地址展示不同的页面或者数据 　　前端路由的理解：a、前端路由用于单页面开发，SPA。b、前端路由是不涉及到服务器的，是前端利用hash或者h5的historyAPI来实现的，一般用于不同的内容展示和切换 　　前端路由：把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。 路由基础语法 基础语法 　　通过代码修改路由 　　路由懒加载 　　vue路由跳转的方式 　　①a标签进行跳转 　　②router-link进行跳转　　首页 　　③编程式路由 　　​ 1、this.$router.push()跳转到指定的url，并在history中添加记录，回退返回到上一个页面 　　​ 2、this.$router.replace()跳转到指定的url，但是history中不会添加记录，回退到上上个页面 　　​ 3、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数 路径传值 　　显示： 　　隐示： 　　路由的模式 　　路由导航守卫（拦截、路由钩子函数） 　　全局 　　路由独享 　　组件内 　　场景：要去拦截，判断用户是否是登录状态。功能：进入地址管理，用户如果没有登录是进入不了地址管理（在进入之前判断拦截），需要先登录。 子路由、动态路由 　　双向绑定原理 　　通过Object.defineProperty劫持数据发生的改变，如果数据发生改变了（在set中进行赋值的），触发update方法进行更新节点内容（{{ str }}），从而实现了数据双向绑定的原理。 diff算法 　　功能：提升性能 　　虚拟dom ===》其实就是数据（ 把dom数据化 ） 主流：snabbdom、virtual-dom 　　snabbdom：https://www.npmjs.com/package/snabbdom 搭建环境 　　npm init -y 　　cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S 　　cnpm install snabbdom -S 　　新建webpack.config.js 　　配置webpack.config.js 虚拟节点 和 真实节点 　　虚拟节点： 　　真实节点： 　　新老节点替换的规则 　　​ 1、如果新老节点不是同一个节点名称，那么就暴力删除旧的节点，创建插入新的节点。 　　​ 2、只能同级比较，不能跨层比较。如果跨层那么就暴力删除旧的节点，创建插入新的节点。 　　​ 3、如果是相同节点，又分为很多情况 　　*注意：如果要提升性能，一定要加入key，key是唯一标示，在更改前后，确认是不是同一个节点。 MVVM开发模式的理解 　　MVVM分为Model、View、ViewModel三者。 　　Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作； 　　Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。 　　这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。 mvvm和mvc的区别 　　MVVM和MVC都是一种设计思想，主要就是MVC中的Controller演变成ViewModel,，MVVM主要通过数据来显示视图层而不是操作节点，解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度慢，影响用户体验问题。主要用于数据操作比较多的场景。 　　场景：数据操作比较多的场景，更加便捷。 　　传统的 MVC 架构通常是使用控制器更新模型，视图从模型中数据去渲染。当用户有输入时，会通过控制器去更新模型，并且通知视图进行更新，但MVC 有一个巨大的缺陷就是随着项目功能越多、项目越加复杂，控制器中的代码会越来越多，不利于维护。 　　在 MVVM 架构中，引入了 ViewModel 的概念。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel。 nextTick是什么？ 路由导航守卫有哪些？ Vue中如何做样式穿透 　　scoped属性：持在标签添加属性，这样当前组件的样式只会在当前样式生效，其它组件不会影响到。 　　通过深度选择器来样式穿透的。除了上面的讲，还有， scoped原理 　　是 style 标签的一个属性，当在 style 标签中定义了 scoped 时，style 标签中的所有属性就只作用于当前组件的样式，实现组件样式私有化，从而也就不会造成样式全局污染 Vue 中的 scoped 属性的效果主要通过 PostCSS(一种对css编译的工具) 转译实现；为每一个组件实例生成一个唯一的标识（相当于 HTML 中的 id 选择器的作用），一般格式为：data-v-xxxxx，即 原选择器[data-v-xxxxx] Vuex是单向数据流还是双向数据流？ 　　是单向数据流 　　单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立 　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 双向绑定原理 　　Vue.js 2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub 模式）的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 　　每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。 　　Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器) 　　Model 改变 View的过程： 依赖于ES5的object.defindeProperty，通过 defineProperty 实现的数据劫持，getter 收集依赖，setter 调用更新回调（不同于观察者模式，是发布订阅 + 中介） View 改变 Model的过程： 依赖于 v-model ,该语法糖实现是在单向数据绑定的基础上，增加事件监听并赋值给对应的Model。 虚拟DOM 　　1、什么是虚拟DOM 　　虚拟DOM就是用来模拟DOM结构的一个js对象。 　　2、虚拟 DOM 的简单实现原理主要包括以下 3 部分： 　　​ 1）用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象； 　　​ 2）diff 算法 — 比较两棵虚拟 DOM 树的差异； 　　​ 3）pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。 　　3、虚拟DOM的优点和缺点 　　​ 1. 优点:1). 保证性能下限 　　​ 2). 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，然后根据我们所写的代码去更新视图 　　​ 3). 跨平台： 虚拟 DOM 本质上是 JavaScript 对象，但是 DOM 与平台的相关性是非常强的，相比之下虚拟 DOM 可以进行更方便地跨平台操作 　　​ 2. 缺点:1). 首次显示要慢些：首次渲染大量DOM时，由于多了一层虚拟DOM的计算, 会比innerHTML插入慢 　　​ 2). 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中无法进行针对性的极致优化。 介绍一下SPA以及SPA有什么缺点 　　SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；是会利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。缺点：SEO优化不好；性能不是特别好 　　1、优点： 　　1). 用户体验好、速度快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 　　2). 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 　　3). 基于上面一点，SPA 相对对服务器压力小； 　　2、缺点： 　　1). 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 　　2). 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； 　　3). SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。 Vue双向绑定和单向绑定 　　vue中有2种数据绑定的方式：单向数据绑定（v-bind）：数据只能从data流向页面； 　　双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data； 　　备注：双向数据绑定一般都应用在表单类（输入类）素上 （如：input、select等）； 　　v-model：value可以简写为v-model，因为v-model默认收集的就是value的值； props和data优先级谁高？ 　　优先级由高到低： 　　props ==> methods ==> data ==> computed ==> watch 　　这是其源码中体现的。 　　3.2 Vuex面试题 　　vuex是什么 　　vuex是一个状态管理工具，所谓状态的是就是数据，采用集中式存储管所有组件的状态，是为了结局中大型项目一个数据共享的问题。vuex 他可以将数据保存到本地，数据是响应式的，能够保持数据页面的共享，提高开发效率。 vuex有哪几种属性 　　答：State、 Getter、Mutation 、Action、 Module。 　　state：vuex的基本数据，数据源存放地，用于定义共享的数据。 　　getter：从基本数据派生的数据，相当于state的计算属性 　　mutation：提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是cmmi传过来的数据 　　action：action是用来做异步操作的，一般用来发请求，在 action 中写入函数，然后在页面中用dispatch调用，然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state。 　　modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 vuex的数据传递流程 　　当组件进行数据修改的时候，我们需要调用dispatch来触发actions里面的方法。 　　actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 　　mutations方法里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。 什么场景用Vuex 　　共享、方便管理、方便维护、组件传值… 　　项目：购物车数据，订单数据，用户的登录信息… 　　vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。 　　场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车。 不用Vuex，会带来什么问题 　　答：① 可维护性下降，修改数据，需要维护好个地方② 可读性下降，组件内的数据来源不明确③增加耦合，Vue用Component的初衷在于降低耦合性，如果大量的上传分发，反而会增加耦合度。 使用vuex有什么好处 　　好处：能够在 vuex 中集中管理共享的数据，易于开发和后期维护 可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步，能够高效地实现组件之间的数据共享，提高开发效率。 Vuex严格模式 　　在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 　　mutations和actions的区别 　　第四章 面试题性能优化篇 　　4.1 加载优化 尽快呈现给用户尽可能少的必备资源。充分利用系统或带宽的空闲时间，来提前完成用户稍后可能会进行的草错过程或加载将要请求的资源文件。 4.2 图片优化 适合用矢量图的地方首选矢量图。使用位图时首选WebP，对不支持的浏览器场景进行兼容处理。尽量为位图图像格式找到最佳质量设置。删除图像文件中多余的数据。对图像文件进行必要的压缩。为图像提供多种缩放尺寸的响应式资源。对工程化通用图像处理流程尽量自动化。 4.3 渲染优化 　　五个阶段：JavaScript执行、样式计算、页面布局、绘制和合成。 　　随着前端技术的迭代、业务复杂度的加深，我们所要面对的性能问题是很难罗列穷尽的。面对更复杂的性能问题场景时，我们应该学会熟练使用浏览器的开发者工具，去分析出可能存在的性能瓶颈并定位到问题素的位置，然后制定出合理的优化方案进行性能改进。应当做到所有性能优化都要量化可控，避免盲目地为了优化而优化，否则很容易画蛇添足。 4.4 首屏优化 　　主要两个方向：资源加载优化 和 页面渲染优化。 　　①路由懒加载②服务端渲染③骨架屏注入 　　4.5 vue优化 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher v-if和v-for不能连用 v-if 和 v-show 区分使用场景 v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if 如果需要使用v-for给每项素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件 在更多的情况下，使用v-if替代v-show 使用路由懒加载、异步组件防抖、节流 第三方模块按需导入长列表滚动到可视区域动态加载,不需要响应式的数据不要放到 data 中（可以Object.freeze() 冻结数据）图片懒加载SEO优化 预渲染服务端渲染SSR 打包优化,压缩代码 Tree Shaking/Scope Hoisting使用cdn加载第三方模块 多线程打包happypack splitChunks抽离公共文件 sourceMap优化 骨架屏PWA 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。防止内部泄漏，组件销毁后把全局变量和事件销毁 　　第五章 面试题兼容篇 　　5.1 页面样式兼容处理 　　1.利用各种前端利器辅助查找问题根源 —Firebug,IE WebDeveloper等等。 　　2.边框背景调试法 —估计一下出错的位置在那，在它的标签上加边框或背景，这样就可以看到该模块占了多少位置，是否在撑出规定的范畴。 　　3.最大宽度最小宽度法 —找到出错区块修改出题的模块的宽度，如果宽度改小后，下沉问题解决。就可以判断问题就是出现在这个素上。 　　4.样式排除法 —有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 　　5.模块确认法 —有时候我们也可以从页面的 HTML 素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。 　　6.至于其它问题的，最好的办法就是google，百度，看书。对于这些方法还不行，可以问有经验的同事帮忙。 5.2 html部分 　　1.H5新标签在IE9以下的浏览器识别 　　2.ul标签内外边距问题ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。 　　解决方法：统一设置ul的内外边距为0 5.3 CSS样式的兼容性 　　1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 　　IE的条件注释hack： 　　2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该素的外边距是其值的2倍 　　解决办法：display:block; 　　3.IE6下图片的下方有空隙 　　解决方法：给img设置display:block; 　　4.IE6下两个float之间会有个3px的bug 　　解决办法：给右边的素也设置float:left; 　　5.IE6下没有min-width的概念，其默认的width就是min-width 　　6.IE6下在使用margin:0 auto;无法使其居中 　　解决办法：为其父容器设置text-align:center; 　　7.被过后的超链接不再具有hover和active属性 　　解决办法:按lvha的顺序书写css样式， 　　8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其素依赖于父素的z-index，但是父素默认为0， 子高父低，所以不会改变显示的顺序。 　　9.IE6下无法设置1px的行高，原因是由其默认行高引起的 　　解决办法：为期设置overflow:hidden;或者line-height:1px; 5.4 JavaScript的兼容性 　　1、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent； 　　2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准 　　3.window.event的。并且目标素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement 　　4.在低版本的IE中的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，的值也是与1900的差值。 　　比如：var year= new Date().getYear(); 　　5.ajax的实现方式不同，这个我所理解的是XMLHttpRequest的不同，IE下是activeXObject 　　6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同 　　其他浏览器：parentNode parentNode.childNodes 　　IE：parentElement parentElement.childre 　　第六章 面试题网络请求篇 　　6.1 跨域面试题 　　6.1.1 为什么会出现跨域问题 　　​ 1）出于浏览器的同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 　　同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port) 　　​ 2）非同源限制 　　​ 1）无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 　　​ 2）无法接触非同源网页的 DOM 　　​ 3）无法向非同源地址发送 AJAX 请求 6.1.2 常见的跨域方式 　　①服务器代理　　http-proxy-middleware　　原理：服务器之间的请求不存在跨域问题 　　②nginx　　proxy-pass后面跟一个跨域的地址 　　③cors　　服务端的代理方式　　设置响应头：header(Access-Control-Allow-Origin:*) 　　④jsonp　　原理：表单中的action、script中的src、a标签和link标签中的href都会造成页面的跳转，所以这不存在跨域的问题。jsonP的原理是利用script的src进行跳转，前端将函数传到服务端，服务端将函数加工后再返回，所以jsonp和ajax不是一回事。　　缺点：只支持get 6.1.3 解决跨域详细方式 　　使用 jsonp 来实现跨域请求， 它的主要原理是通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数，然后服务器在返回数据的时候，构建一个 json 数据的包装，这个包装就是回调函数，然后返回给前端，前端接收到数据后，因为请求的是脚本文件，所以会直接执行，这样我们先前定义好的回调函数就可以被调用，从而实现了跨域请求的处理。优点：兼容性好，能解决主流浏览器跨域访问的问题。缺点：只能用于 get 请求。而且不安全，可能会遭受 XSS 攻击。 　　使用 CORS 的方式 跨域资源共享CORS，它允许浏览器向跨源服务器，发出 XMLHttpRequest 或 Fetch 请求。目前浏览器都支持这个功能，只需要服务端设置 就可以开启 CORS。 　　简单请求和复杂请求的区别： 简单请求 的发送从代码上看起来和普通的 XHR 没太大区别，但是 HTTP 头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。Origin 字段用来说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。如果成功的话服务器会返回包含一些以 Access-Control- 开头的字段。否则服务器会返回一个正常的一般的 HTTP 回应，浏览器再抛出错误。复杂请求 不止发送一个请求。其中最先发送的是一种 “预请求”，来判断该域名是否在服务器的白名单中，如果收到服务器的肯定sigusoft后才会发起请求。 　　使用 postMessage 通过到指定窗口的引用，然后调用 postMessage 来发送信息， 在窗口中我们通过对 message 信息的监听来接收信息，以此来实现不同源间的信息交换。可解决：页面和其打开的新窗口的数据传递、多窗口之间消息传递、页面与嵌套的 iframe 消息传递。如果是像解决 ajax 无法提交跨域请求的问题，我们可以使用 jsonp、cors、websocket 协议、 服务器代理来解决问题。 　　websocket 协议 这个协议没有同源限制。它实现了浏览器与服务器的全双工通信，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。 　　使用Node 同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。所以我们可以通过 中间件代码（两次跨域）：接受客户端请求 → 将请求转发给服务器 → 拿到服务器响应数据 →将响应转发给客户端 　　使用代理服务器 有跨域的请求操作时发送请求给后端，让后端代为请求，然后最后将的结果发返回。因为服务器的没有跨域接口的限制的。 　　document.domain 将 document.domain 设置为主域名，来实现相同子域名的跨域操作，这个时候主域名下 的 cookie 就能够被子域名所访问。同时如果文档中含有主域名相同，子域名不同的 iframe 的话，我们也可以对这个 iframe 进行操作。 如果是想要解决不同跨域窗口间的通信问题，比如说一个页面想要和页面的中的不同源的 iframe 进行通信的问题，我们可以使用 location.hash 或者 window.name 或者 postMessage 来解决。 　　location.hash 使用 location.hash 的方法，我们可以在主页面动态的修改 iframe 窗口的 hash 值， 然后在 iframe 窗口里实现监听函数来实现这样一个单向的通信。因为在 iframe 是没有办法 访问到不同源的父级窗口的，所以我们不能直接修改父级窗口的 hash 值来实现通信，我们可 以在 iframe 中再加入一个 iframe ，这个 iframe 的内容是和父级页面同源的，所以我们可 以 window.parent.parent 来修改最顶级页面的 src，以此来实现双向通信。 　　window.name 使用 window.name 的方法，主要是基于同一个窗口中设置了 window.name 后不同源的 页面也可以访问，所以不同源的子页面可以首先在 window.name 中写入数据，然后跳转到一 个和父级同源的页面。这个时候级页面就可以访问同源的子页面中 window.name 中的数据了， 这种方式的好处是可以传输的数据量大。 　　6.2 http和https 　　区别： 　　6.3HTTPS的工作原理 　　浏览器请求 ，找到服务器，向服务器发送请求。服务器将自己的证书（包含服务器公钥）、对称加密算法种类以及其他相关信息返回给浏览器。浏览器检查 证书是否可依赖，确认证书有效。如果不是，给服务器发警告，询问是否可以继续使用。如果是，浏览器使用公钥加密一个随机对称秘钥，包含加密的 一起发送给服务器。服务器用自己的私钥解密浏览器发送的钥匙，然后用这把对称加密的钥匙给浏览器请求的 连接解密。服务器用浏览器发送的对称钥匙给请求的网页加密，浏览器使用相同的钥匙就可以解密网页。 　　： 　　对称加密 可以理解为对原始数据的可逆变换。比如 Hello 可以变换成 Ifmmp，规则就是每个字母变成它在字母表上的后一个字母，这里的秘钥就是 1 　　非对称加密 有两个秘钥：一个公钥、一个私钥。公钥和私钥成对出现，每个用户对应的那套公钥和私钥是不同的。服务器留着不对外公布的私钥，然后将公钥告诉所有人知道。即公钥加密的内容只有私钥可以解密（服务器保留隐私），私钥加密的内容公钥可以解密。 　　第七章 WEB安全篇 　　7.1 XSS攻击 　　XSS（Cross Site Script）跨站脚本攻击。是一种代码注入攻击 　　指的是攻击者向网页注入恶意的客户端代码，通过恶意的脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者用户隐私数据的一种攻击方式。 　　攻击 可以窃取 信息。恶意 JavaScript 可以通过 信息，然后通过 或者 加上 功能将数据发送给恶意服务器。恶意服务器拿到用户的 信息之后，就可以在其他电脑上模拟用户的登录，然后进行转账等操作。可以监听用户行为。恶意 JavaScript 可以使用 接口来监听键盘事件，比如可以用户输入的信用卡等信息，将其发送到恶意服务器。黑客掌握了这些信息之后，又可以做很多违法的事情。可以通过修改 伪造假的登录窗口，用来欺骗用户输入用户名和密码等信息。可以在页面内生成浮窗广告，这些广告会严重地影响用户体验。 　　注入恶意脚本分 3 种方式： 存储型：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击。例如 2015 年喜马拉雅的专辑名称允许用户编写 标签。反射型：攻击者将脚本混在 URL 里，服务端接收到 URL 将恶意代码当做参数取出并拼接在 HTML 里返回，浏览器解析此 HTML 后即执行恶意代码。例如 Q 群或者邮件中发送恶意链接，用户恶意链接，然后解析 URL 执行恶意代码。DOM 型：攻击者通过各种手段将恶意脚本注入用户的页面中。例如通过网络劫持（WiFi 路由器劫持、本地恶意软件劫持等）在页面传输过程中修改 HTML 页面内容。 　　防御 输入检查：对输入内容中的 和 等标签进行转义或者过滤设置 httpOnly：设置此属性可防止 JavaScript ，只能在 HTTP 请求过程中使用 开启 CSP 白名单：即开启白名单，可阻止白名单以外的资源加载和运行 7.2 CSRF跨站请求伪造 　　CSRF 攻击（Cross-site request forgery）即跨站请求伪造。 　　是一种劫持受信任用户向服务器发送非预期请求的攻击方式，通常情况下，它是攻击者借助受害者的 Cookie 骗取服务器的信任，但是它并不能拿到 Cookie，也看不到 Cookie 的内容，它能做的就是给服务器发送请求，然后执行请求中所描述的命令，以此来改变服务器中的数据，也就是并不能窃取服务器中的数据。 　　CSRF 攻击就是黑客利用用户的登录状态，并通过第三方的站点来做一些坏事。 　　攻击 　　打开攻击者提供的页面后，攻击者有 3 种方式实施 CSRF 攻击： 　　方法一：自动发起 Get 请求 　　黑客将转账的请求接口隐藏在 标签内，欺骗浏览器这是一张图片资源。 　　当该页面被加载时，浏览器会自动发起 的资源请求，如果服务器没有对该请求做判断的话，那么服务器就会认为该请求是一个转账请求，于是用户账户上的 100 块就被转移到黑客的账户上去了。 　　方法二：自动发起 POST 请求 　　在页面中构建了一个隐藏的表单，该表单的内容就是极客时间的转账接口。 　　当用户打开该站点之后，这个表单会被自动执行提交；当表单被提交之后，服务器就会执行转账操作。 　　因此使用构建自动提交表单这种方式，就可以自动实现跨站点 POST 数据提交。 　　方法三：引诱用户链接 　　防御、避免方式 验证 Token：浏览器请求服务器时，服务器返回一个 ，之后每个请求都需要同时带上 和 才会被认为是合法请求验证 Referer：通过验证请求头的 来验证来源站点，但请求头很容易伪造设置 SameSite：设置 的 ，可以让 不随跨站请求发出，但浏览器兼容不一 7.3 SQL 注入 　　通过输入SQL语句，来伪造登录或者攻击网站。就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。 　　例如，输入用户名：jsliang’ OR 1 = 1 —，这样就能一直登录成功 　　解决：表单输入时通过正则表达式将一些特殊字符进行转换 7.4 流量劫持 　　流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 github.com 的时候，给你展示的并不是或者不完全是 github.com 提供的 “内容”。 　　DNS 劫持 　　劫持，也叫做域名劫持。 　　当用户通过某一个域名访问一个站点的时候，被篡改的 服务器返回的是一个恶意的钓鱼站点的 ，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。 　　这类劫持： 要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈。 　　HTTP 劫持 　　劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面。 　　轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私，就好比 jsliang 访问某 网站，会出现 Google 广告，实际上问了其他人的是不会有这个的。 　　能够实施流量劫持的根本原因，是 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。 　　预防 　　所以防止 劫持的方法只有将内容加密，让劫持者无法激活成功教程篡改，这样就可以防止 劫持了。 　　是基于 协议的安全加密网络应用层协议，相当于 + ，可以很好地防止 劫持。 7.5 DDOS分布式拒绝服务攻击 　　服务器端会为每个请求创建一个链接，并向其发送确认报文，然后等待客户端进行确认。DDOS其原理就是利用大量的请求造成资源过载，导致服务不可用。 　　1)、DDos 攻击 　　客户端向服务端发送请求链接数据包；服务端向客户端发送确认数据包；客户端不向服务端发送确认数据包，服务器一直等待来自客户端的确认 　　2)、DDos 预防( 没有彻底根治的办法，除非不使用TCP ) 　　限制同时打开SYN半链接的数目；缩短SYN半链接的Time out 时间；关闭不必要的服务 限制单IP请求频率。防火墙等防护设置禁止包等检查特权端口的开放 7.6 MITM中间人攻击 　　​ 中间人攻击(Man-in-the-MiddleAttack，简称“MITM攻击”)是指攻击者与通讯的两端分别创建独立的联系，并交换其所收到的数据，使通讯的两端认为他们正在通过一个私密的连接与对方 直接对话，但事实上整个会话都被攻击者完全控制。在中间人攻击中，攻击者可以拦截通讯双方的通话并插入新的内容。 　　中间人攻击可分为如下五种不同的类型： 　　​ 1）Wi-Fi欺骗：攻击者可以创建与本地免费Wi-Fi同名的虚假Wi-Fi接入点(AP)。例如，在上例的咖啡馆中，攻击者会模仿创建一个和墙上贴着Wi-Fi信息同名“Guest Wi-Fi”。一旦您连接上去，您的一切在线网络行为，将尽在攻击者的监控和掌握之中。 　　​ 2）HTTPS欺骗：攻击者通过欺骗您的浏览器，使您认为自己访问的是可信任站点。当您输入与该站点相关的登录凭据时，您的流量将被重定向到攻击者自建的非安全站点处。 　　​ 3）SSL劫持：通常，当您尝试连接或访问不安全的HTTP://站点时，您的浏览器会自己将您重定向到安全的HTTPS://处。此时，攻击者则可以劫持该重定向的过程，将指向其自建服务器的链接植入其中，进而窃取您的敏感数据、以及输入的所有信任凭据。 　　​ 4）DNS欺骗：为了准确地浏览到目标网站，域名系统会将地址栏中的URL，从人类易于识别的文本格式，转换为计算机易于识别的IP地址。然而，DNS欺骗则会迫使您的浏览器，在攻击者的控制下，发生转换异常，而去访问那些被伪造的地址。 　　​ 5）电子邮件劫持：如果攻击者获得了受信任机构(例如银行)的邮箱、甚至是邮件服务器的访问权限，那么他们就能够拦截包含敏感信息的客户电子邮件，甚至以该机构的身份发送各种电子邮件。 　　防御 　　1）确保在URL前你所访问的网站有HTTPS 　　2）电子邮件前，检查电子邮件的发件人 　　3）如果你是一个网站管理员，你应当执行HSTS协议 　　4）不要在公共Wi-Fi网络上购买或发送敏感数据 　　5）确保你的网站没有任何混合内容 　　6）如果你的网站使用了SSL，确保你禁用了不安全的SSL/TLS协议。你应当只启用了TLS 1.1和TLS 1.2 　　7）不要恶意链接或电子邮件 　　8）不要下载盗版内容 　　9）将安全工具正确地安装在系统上 　　第八章 其他类面试题 　　8.1 token 　　8.1.1 token和session区别 　　session和token都是用来保持会话，功能相同 　　session机制，原理 　　1）session是服务端存储的一个对象，主要用来存储所有访问过该服务端的客户端的用户信息（也可以存储其他信息），从而实现保持用户会话状态。但是服务器重启时，内存会被销毁，存储的用户信息也就消失了。 　　2）不同的用户访问服务端的时候会在session对象中存储键值对，“键”用来存储开启这个用户信息的“钥匙”，在登录成功后，“钥匙”通过cookie返回给客户端，客户端存储为sessionId记录在cookie中。当客户端再次访问时，会默认携带cookie中的sessionId来实现会话机制。 　　3）session是基于cookie的 　　cookie的数据4k左右 　　cookie存储数据的格式：字符串key=value 　　cookie存储有效期：可以自行通过expires进行具体的日期设置，如果没设置，默认是关闭浏览器时失效。 　　cookie有效范围：当前域名下有效。所以session这种会话存储方式方式只适用于客户端代码和服务端代码运行在同一台服务器上（前后端项目协议、域名、端口号都一致，即在一个项目下） 　　4）session持久化 　　用于解决重启服务器后session就消失的问题。在数据库中存储session，而不是存储在内存中。通过包：express-mysql-session 5）其它 　　当客户端存储的cookie失效后，服务端的session不会立即销毁，会有一个延时，服务端会定期清理无效session，不会造成无效数据占用存储空间的问题。 　　token机制，原理 　　适用于项目级的前后端分离（前后端代码运行在不同的服务器下） 　　请求登录时，token和sessionId原理相同，是对key和key对应的用户信息进行加密后的加密字符，登录成功后，会在响应主体中将{token：‘字符串’}返回给客户端。客户端通过cookie、sessionStorage、localStorage都可以进行存储。再次请求时不会默认携带，需要在请求拦截器位置给请求头中添加认证字段Authorization携带token信息，服务器端就可以通过token信息查找用户登录状态。 8.1.2 cookie、session、localStorage的区别 　　共同点：都是保存在浏览器端、且同源的 　　区别： 　　1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 　　2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 　　3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 　　4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 　　5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 　　6、web Storage的api接口使用更方便 8.1.3 cookies、sessionStorage 、localStorage 的区别 　　cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie 　　localStorage：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信 　　sessionStorage：关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。 　　8.2 SEO 　　SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。 　　在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。简单来说就是通过一定技术手段提高网站关键词搜索排名更多展示，然后从自然搜索结果获得更多网站流量的过程。