前言
山高不厌攀，水深不厌潜，学精不厌苦：追求!
、CSS相关
1.1 左边定宽，右边⾃适应⽅案：float + margin，float + calc
1.2 左右两边定宽，中间⾃适应：float，float + calc, 圣杯布局（设置 BFC，margin负值法），flex
1.3 左右居中
⾏内元素:
text-align: center定宽块状元素: 左右
margin 值为auto不定宽块状元素:
table 布局，position + transform
1.4 上下垂直居中
定⾼：
margin ， position + margin (负值)不定⾼：
position + transform ， flex， IFC + vertical-align:middle
1.5 盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）
延伸：
box-sizing
content-box：默认值，总宽度 =margin + border + padding + width
border-box：盒⼦宽度包含padding和 border ， 总宽度 = margin + width
inherit：从⽗元素继承box-sizing 属性
1.6 BFC、IFC、GFC、FFC：FC（Formatting Contexts），格式化 上下⽂
⽤处？常⻅的多栏布局，结合块级别元素浮动，⾥⾯的元素则是在⼀个相对隔
离的环境⾥运⾏
IFC ：内联格式化上下⽂，IFC的line box（线框）⾼度由其包含⾏ 内元素中最⾼的实际⾼度计算⽽来（不受到竖直⽅向的 padding/margin 影 响)。
IFC中的 line box⼀般左右都贴紧整个 IFC ，但是会因为 float 元素 ⽽扰乱。 float元素会位于 IFC 与line box 之间，使得 line box 宽 度缩短。 同个ifc 下的多个line box ⾼度会不同。IFC 中时不可能有 块级元素的，当插⼊块级元素时（如 p中插⼊ div ）会产⽣两个匿名块与 div分隔开，即产⽣两个IFC ，每个 IFC 对外表现为块级元素，与 div垂直排列。
⽤处？
⽔平居中：当⼀个块要在环境中⽔平居中时，设置其为 inline-block则会在外层产⽣IFC ，通过text-align 则可以使其⽔平居中。
垂直居中：创建⼀个 IFC，⽤其中⼀个元素撑开⽗元素的⾼度，然后设置其verticalalign : middle，其他⾏内元素则可以在此⽗元素下垂直居中
⼆、JS 基础（ES5）
2.1 原型
这⾥可以谈很多，只要围绕[[ prototype ]] 谈，都没啥问题
2.2 闭包
牵扯作⽤域，可以两者联系起来⼀起谈
2.3 作⽤域
词法作⽤域，动态作⽤域
2.4 this
不同情况的调⽤， this 指向分别如何。顺带可以提⼀下es6 中箭头函数没 有this, arguments, super 等，这些只依赖包含箭头函数最接近的函数
2.5 call，apply，bind 三者⽤法和区别
参数、绑定规则（显示绑定和强绑定），运⾏效率（最终都会转换成⼀个⼀个 的参数去运⾏）、运⾏情况（ call ，apply ⽴即执⾏， bind 是return出⼀个this “固定”的函数，这也是为什么 bind是强绑定的⼀ 个原因）
注：“固定”这个词的含义，它指的固定是指只要传进去了 context ，则bind中 return 出来的函数 this 便⼀直指向context ，除⾮context 是个变量
2.6 变量声明提升
js代码在运⾏前都会进⾏ AST 解析，函数申明默认会提到当前作⽤域最 前⾯，变量申明也会进⾏提升。但赋值不会得到提升。关于 AST 解析，这⾥ 也可以说是形成词法作⽤域的主要原因
三、JS 基础（ES6）
3.1 let，const
let 产⽣块级作⽤域（通常配合 for循环或者{} 进⾏使⽤产⽣块级作 ⽤域），const 申明的变量是常量（内存地址不变）
3.3 Generator
遍历器对象⽣成函数，最⼤的特点是可以交出函数的执⾏权
function 关键字与函数名之间有⼀个星号；
函数体内部使⽤yield 表达式，定义不同的内部状态；
next 指针移向下⼀个状态
这⾥你可以说说 Generator 的异步编程，以及它的语法糖 async 和 awiat，传统的异步编程。 ES6 之前，异步编程⼤致如下
回调函数
事件监听
发布/订阅
传统异步编程⽅案之⼀：协程，多个线程互相协作，完成异步任务。
3.4 async、await
Generator 函数的语法糖。有更好的语义、更好的适⽤性、返回值是 Promise 。
async => *
await => yield
3.5 AMD，CMD，CommonJs，ES6 Module：解决原始⽆模块化的 痛点
AMD：requirejs 在推⼴过程中对模块定义的规范化产出，提前执⾏，推崇依赖前置
CMD：seajs在推⼴过程中对模块定义的规范化产出，延迟执⾏，推崇依赖就近
CommonJs：模块输出的是⼀个值的 copy ，运⾏时加载，加载的是⼀个对象
（ module.exports 属性），该对象只有在脚本运⾏完才会⽣成
ES6 Module：模块输出的是⼀个值的引⽤，编译时输出接⼝，ES6 模块不是对象，它对 外接⼝只是⼀种静态定义，在代码静态解析阶段就会⽣成。
四、框架相关
4.1 数据双向绑定原理：常⻅数据绑定的⽅案
Object.defineProperty（vue） ：劫持数据的 getter和setter
脏值检测（angularjs ）：通过特定事件进⾏轮循 发布/订阅模式：通过消息发布并将消 息进⾏订阅
4.2 VDOM：三个 part
虚拟节点类，将真实 DOM节点⽤js对象的形式进⾏展示，并提供 render ⽅法，将 虚拟节点渲染成真实 DOM
节点diff ⽐较：对虚拟节点进⾏js层⾯的计算，并将不同的操作都记录到 patch 对象
re-render：解析 patch 对象，进⾏ re-render
补充1：VDOM 的必要性？
创建真实DOM的代价⾼：真实的 DOM 节点 node 实现的属性很多，⽽vnode仅仅实 现⼀些必要的属性，相⽐起来，创建⼀个 vnode 的成本⽐较低。
** 触发多次浏览器重绘及回流**：使⽤vnode ，相当于加了⼀个缓冲，让⼀次数据变动所带 来的所有 node 变化，先在 vnode 中进⾏修改，然后 diff之后对所有产⽣差异的节 点集中⼀次对DOM tree进⾏修改，以减少浏览器的重绘及回流。
补充2：vue 为什么采⽤ vdom？
引⼊Virtual DOM在性能⽅⾯的考量仅仅是⼀⽅⾯。
性能受场景的影响是⾮常⼤的，不同的场景可能造成不同实现⽅案之间成倍的性能差距， 所以依赖细粒度绑定及 Virtual DOM 哪个的性能更好还真不是⼀个容易下定论的问题。
Vue之所以引⼊了 Virtual DOM ，更重要的原因是为了解耦 HTML依赖，这带来两个 ⾮常重要的好处是：
不再依赖HTML解析器进⾏模版解析，可以进⾏更多的AOT ⼯作提⾼运 ⾏时效率：通过模版 AOT编译， Vue 的运⾏时体积可以进⼀步压缩，运 ⾏时效率可以进⼀步提升；
可以渲染到 DOM 以外的平台，实现 SSR 、同构渲染这些⾼级特性，Weex 等框架应⽤的就是这⼀特性。
综上，Virtual DOM在性能上的收益并不是最主要的，更重要的是它使得 Vue具备了现代框架应有的⾼级特性。
4.3 vue 和 react 区别
相同点：都⽀持ssr ，都有vdom ，组件化开发，实现 webComponents 规范，数据驱 动等
不同点： vue是双向数据流（当然为了实现单数据流⽅便管理组件状态， vuex便出现 了）， react是单向数据流。 vue 的vdom 是追踪每个组件的依赖关系，不会渲染整 个组件树， react每当应该状态被改变时，全部⼦组件都会re-render
4.4 为什么⽤ vue
简洁、轻快、舒服
五、⽹络基础类
5.1 跨域
很多种⽅法，但万变不离其宗，都是为了搞定同源策略。重⽤的有jsonp 、iframe 、cors、 img、H TML5 postMessage 等等。其中⽤ 到 html 标签进⾏跨域的原理就是 html 不受同源策略影响。但只是接受Get 的请求⽅式，这个得清楚。
延伸1：img iframe script 来发送跨域请求有什么优缺点？
-
iframe
优点：跨域完毕之后DOM操作和互相之间的JavaScript调⽤都是没有问题的
缺点：1.若结果要以URL参数传递，这就意味着在结果数据量很⼤的时候需要分割传递， 巨烦。2.还有⼀个是iframe本身带来的，⺟⻚⾯和iframe本身的交互本身就有安全性 限制。 - script
优点：可以直接返回json格式的数据，⽅便处理
缺点：只接受GET请求⽅式
延伸2：配合 webpack 进⾏反向代理？
webpack 在 devServer 选项⾥⾯提供了⼀个 proxy的参数供开发⼈员进⾏反向代理
然后再配合 http-proxy-middleware插件对 api请求地址进⾏代理
然后再⽤
nginx 把允许跨域的源地址添加到报头⾥⾯即可
说到nginx ，可以再谈谈CORS 配置，⼤致如下
5.2 http ⽆状态⽆连接
http协议对于事务处理没有记忆能⼒
对同⼀个url 请求没有上下⽂关系 每次的请求都是独⽴的，它的执⾏情况和结果与前⾯的请求和之后的请求是⽆直接关系 的，它不会受前⾯的请求应答情况直接影响，也不会直接影响后⾯的请求应答情况
服务器中没有保存客户端的状态，客户端必须每次带上⾃⼰的状态去请求服务器
⼈⽣若只如初⻅，请求过的资源下⼀次会继续进⾏请求
http协议⽆状态中的 状态 到底指的是什么？！
【状态】的含义就是：客户端和服务器在某次会话中产⽣的数据
那么对应的【⽆状态】就意味着：这些数据不会被保留
通过增加 cookie和 session 机制，现在的⽹络请求其实是有状态的 在没有状态的http协议下，服务器也⼀定会保留你每次⽹络请求对数据的修改，但这跟 保留每次访问的数据是不⼀样的，保留的只是会话产⽣的结果，⽽没有保留会话
5.3 http-cache：就是 http 缓存
- ⾸先得明确 http 缓存的好处
减少了冗余的数据传输，减少⽹费
减少服务器端的压⼒
Web 缓存能够减少延迟与⽹络阻塞，进⽽减少显示某个资源所⽤的时间
加快客户端加载⽹⻚的速度
- 常⻅ http 缓存的类型
私有缓存（⼀般为本地浏览器缓存）
代理缓存 - 然后谈谈本地缓存
本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源，浏览器并不会
发送真正的请求给服务器了。它的执⾏过程是
第⼀次浏览器发送请求给服务器时，此时浏览器还没有本地缓存副本，服务器返回资源给 浏览器，响应码是 200 OK，浏览器收到资源后，把资源和对应的响应头⼀起缓存下来
第⼆次浏览器准备发送请求给服务器时候，浏览器会先检查上⼀次服务端返回的响应头信 息中的 Cache-Control ，它的值是⼀个相对值，单位为秒，表示资源在客户端缓存的最 ⼤有效期，过期时间为第⼀次请求的时间减去Cache-Control的值，过期时间跟当前的 请求时间⽐较，如果本地缓存资源没过期，那么命中缓存，不再请求服务器
如果没有命中，浏览器就会把请求发送给服务器，进⼊缓存协商阶段。
与本地缓存相关的头有： Cache-Control 、 Expires ， Cache-Control 有多个可选值代表不同的意义，⽽ Expires就是⼀个⽇期格式的绝对值。
3.1 Cache-Control
Cache-Control是 HTPP 缓存策略中最重要的头，它是 HTTP/1.1 中出现 的，它由如下⼏个值
no-cache ：不使⽤本地缓存。需要使⽤缓存协商，先与服务器确认返回的响应是否被更 改，如果之前的响应中存在ETag ，那么请求的时候会与服务端验证，如果资源未被更 改，则可以避免重新下载
no-store ：直接禁⽌游览器缓存数据，每次⽤户请求该资源，都会向服务器发送⼀个请 求，每次都会下载完整的资源
public ：可以被所有的⽤户缓存，包括终端⽤户和 CDN 等中间代理服务器。
private：只能被终端⽤户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。
max-age：从当前请求开始，允许获取的响应被重⽤的最⻓时间（秒）。
3.2 Expires
Expires是HTTP/1.0出现的头信息，同样是⽤于决定本地缓存策略的头， 它是⼀个绝对时间，时间格式是如 Mon, 10 Jun 2015 21:31:12 GMT，只要 发送请求时间是在Expires 之前，那么本地缓存始终有效，否则就会去服务 器发送请求获取新的资源。如果同时出现Cache-Control：max-age和 Expires ，那么 max-age优先级更⾼。他们可以这样组合使⽤
3.3 所谓的缓存协商
当第⼀次请求时服务器返回的响应头中存在以下情况时
没有 Cache-Control和 Expires
Cache-Control和 Expires 过期了
Cache-Control的属性设置为 no-cache 时
那么浏览器第⼆次请求时就会与服务器进⾏协商，询问浏览器中的缓存资源是 不是旧版本，需不需要更新，此时，服务器就会做出判断，如果缓存和服务端 资源的最新版本是⼀致的，那么就⽆需再次下载该资源，服务端直接返回304 Not Modified 状态码，如果服务器发现浏览器中的缓存已经是旧版本了，那 么服务器就会把最新资源的完整内容返回给浏览器，状态码就是 200 Ok ，那 么服务端是根据什么来判断浏览器的缓存是不是最新的呢？其实是根据HTTP的另外两组头信息，分别是： Last-Modified/If-Modified-Since 与 ETag/If-None-Match。
Last-Modified 与 If-Modified-Since
浏览器第⼀次请求资源时，服务器会把资源的最新修改时间Last-Modified:Thu, 29 Dec 2011 18:23:55 GMT放在响应头中返回给浏览器
第⼆次请求时，浏览器就会把上⼀次服务器返回的修改时间放在请求头 If-ModifiedSince:Thu, 29 Dec 2011 18:23:55发送给服务器，服务器就会拿这个时间跟服务器上 的资源的最新修改时间进⾏对⽐
如果两者相等或者⼤于服务器上的最新修改时间，那么表示浏览器的缓存是有 效的，此时缓存会命中，服务器就不再返回内容给浏览器了，同时Last-Modified头也不会返回，因为资源没被修改，返回了也没什么意义。如果没 命中缓存则最新修改的资源连同Last-Modified头⼀起返回
这组头信息是基于资源的修改时间来判断资源有没有更新，另⼀种⽅式就是根 据资源的内容来判断，就是接下来要讨论的
ETag 与 If-None-MatchETag与If-None-Match
ETag/If-None-Match与 Last-Modified/If-Modified-Since`` 的流程其实 是类似的，唯⼀的区别是它基于资源的内容的摘要信息（⽐如 MD5 hash ```）来 判断
浏览器发送第⼆次请求时，会把第⼀次的响应头信息 ETag 的值放在 IfNone-Match的请求头中发送到服务器，与最新的资源的摘要信息对⽐，如果 相等，取浏览器缓存，否则内容有更新，最新的资源连同最新的摘要信息返 回。⽤ ETag的好处是如果因为某种原因到时资源的修改时间没改变，那么 ⽤ ETag 就能区分资源是不是有被更新。
5.4 cookie 和 session
session ： 是⼀个抽象概念，开发者为了实现中断和继续等操作，将 user agent和server之间⼀对⼀的交互，抽象为“会话”，进⽽衍⽣出“会话状态”，也就是 session 的概念
cookie ：它是⼀个世纪存在的东⻄，http 协议中定义在header 中的字段，可以认 为是 session 的⼀种后端⽆状态实现
现在我们常说的session ，是为了绕开 cookie 的各种限制，通常借助 cookie 本身和后端存储实现的，⼀种更⾼级的会话状态实现
session的常⻅实现要借助 cookie 来发送 sessionID
5.5 安全问题，如 XSS 和 CSRF
``XSS ```：跨站脚本攻击，是⼀种⽹站应⽤程序的安全漏洞攻击，是代码注⼊的⼀种。常⻅⽅ 式是将恶意代码注⼊合法代码⾥隐藏起来，再诱发恶意代码，从⽽进⾏各种各样的⾮法活动
防范：记住⼀点 “所有⽤户输⼊都是不可信的”，所以得做输⼊过滤和转义
CSRF：跨站请求伪造，也称XSRF ，是⼀种挟制⽤户在当前已登录的 Web 应⽤程序上 执⾏⾮本意的操作的攻击⽅法。与 XSS 相⽐， XSS利⽤的是⽤户对指定⽹站的信任， CSRF 利⽤的是⽹站对⽤户⽹⻚浏览器的信任。
防范：⽤户操作验证（验证码），额外验证机制（ token 使⽤）等
如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取，希望能够对你们有所帮助。
网友评论