讲师：双越
【说说面试的那些事儿】本章会出几个面试题，分析每道题目设计的知识点，然后总结出一个完整的知识体系。让我们开始 “题目->知识点->解题” 的快乐之旅吧。
- 前端面试中的重要考点
- HTML 和 CSS
- 原型、作用域、异步
- DOM 事件和 Ajax
- 性能优化
- 各种手写代码
- HTTP 协议
- 知识点介绍
- CSS
- 布局
- 定位
- 移动端响应式
- ES 语法
- 原型、原型链
- 作用域、闭包
- 异步、单线程
- Web Api
- DOM、Bom
- Ajax 跨域
- 事件存储
- 开发环境
- 版本管理
- 调试抓包
- 打包构建
- 运行环境
- 页面渲染
- 性能优化
- Web 安全
- 网络通讯
- headers
- Restful API
- 缓存策略
- CSS
- 基层工程师：基础知识
- 高级工程师：基础知识+项目经验
- 架构师：解决方案能力
- 工程师的自我修养：基础知识
- 扎实的基础能让你高效学习新技术
typeof能判断哪些类型？- 考点：JS 变量类型
- 何时使用
===何时使用==- 考点：强制类型转换
window.onload和DOMContentLoaded的区别？- 考点：页面加载过程
- JS 创建 10 个
<a>标签，点击的时候弹出对应的序号- 考点：JS 作用域
- 手写节流
throttle、防抖debounce- 考点：性能、体验优化
Promise解决了什么问题？- 考点：JS 异步
- 拿到一个面试题，你第一时间看到的是什么？
- 拿到一个面试题，第一时间看到->考点
- 如何看待网上搜出来的永远做不完的题海？
- 如何看到做不完的题海->不变应万变（题可变，考点不变）
- 如何对待接下来遇到的面试题？
- 如何对待接下来的题目->题目到知识点，再到题目
第四章
- 高效学习三部曲：找准知识体系；刻意训练；及时反馈
- 知识体系：结构化的知识范围
- 涵盖所有知识点；结构化、有组织、易扩展
- W3C 标准
- ECMA262 标准
- 开发环境
- 运行环境
- CSS 基础知识
- JS 基础语法
- JS-Web-API
- 开发环境
- 运行环境
- HTTP 协议
【要知己知彼，不打无准备之仗】 本章介绍面试之前你需要准备什么，以及如何解读 JD ，如何写好简历，还有些面试的注意事项。帮大家规避一些非技术的风险和问题。
2-4 JD 分析-知己知彼（上）
2-5 JD 分析-知己知彼（下）
- 简历包含的内容
- 简历中需要注意的问题
- 案例
简历就像高考作文——阅卷时间非常短
内容简洁
直击重点，表现出自己的优势
- 个人信息
- 简历内容-基本信息
- 必备：姓名 性别 电话 邮箱 籍贯 年龄可写
- 简历内容-基本信息
- 教育经历
- 写上最高学历即可
- 学校，专业，入学和毕业时间
- 不要写上高中，显的很不专业
- 专业技能
- 表现出自己的核心竞争力
- 内容不要太多，3、5 条即可
- 太基础的不要写，例如会用 vscode
- 项目经历
- 写 2-4 个具有说服力的项目（视工作时间）
- 项目描述，技术栈，个人角色
- 技巧：可以把别人的项目写上，只要你能 hod 住
- 工作经历
- 如实写
- 写明公司，职位，入职离职时间即可，多写无益
- 如果有空窗期，如实写明即可
- 博客和开源
- 有博客或者开源作品，会让你更有竞争力
- 切记：需要真的有内容，不可临时抱佛脚
- 可以从现在开始，慢慢积累
- 注意事项
- 界面不要太花哨，简洁明了即可
- 注意用词，“精通”“熟练”等慎用
- 不可造假，会被拉入黑名单（项目经历那里，不是造假！！）
- 看 JD，是否需要临时准备一下
- 打印纸质简历，带着纸和笔
- 最好带着自己的电脑，现场可能手写代码
- 要有时间观念，如果迟到或者推迟，要提前说
- 衣着适当，不用正装，也不要太随意
- 为何离职？——不要吐槽前东家，说自己的原因
- 能加班吗？——能！除非你特别自信，能找到其他机会
- 不要挑战面试官，即便他错了
- 遇到不会的问题，要表现出自己积极的一面
【不多说了，前端面试 CSS 是必考知识，不过关直接回家】 本章讲解 CSS 中常考和必考的知识点，包括布局、定位、响应式等。其中会讲到很多常考问题，如 BFC、居中对齐、flex 布局等。前端一面中，CSS 一般最先考察，不过关则直接宣告失败。
- 如何理解 HTML 语义化？
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
- 默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素？
- display：block/table；有 div h1 h2 table ul ol p 等
- display: inline/inline-block; 有 span img input button 等
- CSS 基础-块级元素与行内元素
分析知识模块:
- 布局
- 盒子模型的宽度如何计算？
offsetWidth=（内容宽度+内边距+边框），无外边距box-sizing:border-box，设置width为总宽度
- margin 纵向重叠的问题
- 相邻元素的 margin-top 和 margIn-bottom 会发生重叠
- 空白内容的
<p></p>也会重叠
- margin 负值的问题
- margin 的 top left right bottom 设置负值，有何效果？
- margin-top 和 margin-left 负值，元素向上、向左移动
- margin-right 负值，右侧元素左移，自身不受影响
- margin-bottom 负值，下方元素上移，自身不受影响
- BFC 理解和应用
- 什么是 BFC？如何应用？
- Block format context，块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
- 形成 BFC 的常见条件
- float 不是 none
- position 是 absolute 或 fixed
- overflow 不是 visible
- display 是 flex inline-block 等
- BFC 的常见应用
- 清除浮动
- 什么是 BFC？如何应用？
- float 布局的问题，以及 clearfix
- 如何实现圣杯布局和双飞翼布局
- 圣杯布局和双飞翼布局的目的
- 三栏布局，中间一栏最先加载和渲染（內容最重要
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于 PC 网页
- 圣杯布局和双飞翼布局的技术总结
- 使用 float 布局
- 两侧使用 margin 负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用 padding 一个用 margin
- 圣杯布局和双飞翼布局的目的
- 手写 clearfix
- 如何实现圣杯布局和双飞翼布局
- flex 画色子
- flex 实现一个三点的色子
- 常用语法回顾：必须熟练掌握
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-self
- 两端对齐
- 垂直居中对齐
- 水平居中对齐、尾对齐
- 常用语法回顾：必须熟练掌握
- flex 实现一个三点的色子
- 盒子模型的宽度如何计算？
- 定位
- absolute 和 relative 分别依据什么定位？
- relative 依据自身定位
- absolute 依据最近一层的定位元素定位
- 定位元素
- absolute relative fixed
- body
- 定位元素
- 居中对齐有哪些实现方式？
- 水平居中
- inline 元素：text-align：center
- block 元素：margIn:auto
- absolute 元素：left:50%+ margin-left 负值
- 垂直居中
- inline 元素：line-height 的值等于 height 值
- absolute 元素：top：50%+ margIn-top 负值
- absolute 元素：transform（-50%，-50%）
- absolute 元素：
top，left，bottom right = 0； margin：auto
- 水平居中
- absolute 和 relative 分别依据什么定位？
- 响应式
- rem 是什么？
- rem 是一个长度单位
- px，绝对长度单位，最常用
- em，相对长度单位，相对于父元素，不常用
- rem，相对长度单位，相对于根元素，常用于响应式布局
- 用 font-size 定义，对所有长度生效
- rem 是一个长度单位
- 如何实现响应式？响应式布局的常用方案
- media-query，根据不同的屏幕宽度设置根元素 font-size
- rem，基于根元素的相对单位
vw/vh- rem 的弊端：台阶性，不同 font-size 需手动设置
- 网页视口尺寸
- window.screen.height // 屏幕高度
- window.innerHeight // 网页视口高度
- document body.clientHeight // body 高度
vw/vh- vh 网页视口高度的 1/100
- vw 网页视口宽度的 1/100
- vmax 取两者最大值作为单位；vmin 取两者最小值
- rem 是什么？
- CSS3
- 动画
- 图文样式
- line-height 如何继承
- 写具体数值，如 30px，则继承该值（比较好理解）
- 写比例，如 2/1.5，则继承该比例（比较好理解）
- 写百分比，如 200%，则继承计算出来的值（考点）
- line-height 如何继承
3-2 html 面试题
3-3 布局-题目
3-4 布局-解题-1
3-5 布局-解题-2
3-6 布局-解题-3
3-7 布局-解题-4
3-8 布局-解题-5
3-9 定位-解题-1
3-10 定位-解题-2
3-11 图文样式-解题
3-12 响应式-解题
3-13 2 css-响应式-vw-wh
3-14 css 面试总结
【不会变量，别说你会 JS】 本章介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判断，深拷贝等。变量和类型是一个任何一门语言的基础，不了解的话，会被认为是 JS 语法不过关。
【三座大山之一，必考！！！】 本章介绍原型、原型链和 class 相关的知识点和题目。包括 class ，继承，原型，原型链，instanceof。原型是“JS 三座大山”之一，原型和原型链也是必考知识点。
【三座大山之二，不会闭包，基本不会通过】 本章介绍作用域和闭包的知识点和题目。包括作用域，自由变量，闭包，this 等部分。作用域是“JS 三座大山”之二，不知道闭包的话，面试通过概率不大。
【三座大山之三，必考！！！】 本章介绍异步的知识点和题目。包括异步和同步的区别，异步应用场景，以及 Promise 。异步是“JS 三座大山”之三，所有公司的 JS 面试，100% 会考察异步和 Promise 。
【想要进大厂，更多异步的问题等着你】 JS 的特色就是异步编程，所有有很多关于异步的考点，本章都会讲解。如 event loop、promise、async-await、微任务和宏任务。学不会这些，就不算是精通 JS ，也无法进大厂。
【学会 DOM，才能具备网页开发的基础】 本章介绍 DOM 操作的知识点和题目。包括 DOM 结构，常用 DOM 操作，DOM 性能优化等。DOM 是网页结构的基础，学会 DOM 操作才可以做网页开发。
【内容虽然不多，但是你不能不会】 本章介绍 BOM 操作的知识点和题目。本章内容虽然不多，但不可不会。
【事件不会，等于残废，必考！必考！】 本章介绍事件绑定的知识点和题目。包括事件绑定，事件冒泡机制，事件代理。事件能让网页和鼠标、键盘进行交互，初级 JS 面试必考。
【每个工程师必须熟练掌握的技能】 本章介绍 ajax 相关的知识点和题目。包括 XMLHttpRequest ，同源策略，跨域方式，以及常用插件介绍。我们早就进入了动态网页时代，而当下的前后端分离开发方式，更加要求每个工程师必须熟练掌握 ajax 。
【内容虽然不多，但不可不会】 本章介绍存储的知识点和题目。包括 cookie、localStorage 和 sessionStorage 。本章内容虽然不多，但不可不会。
【前后端分离的时代，网络请求是前端的生命线】 前端工程师做出网页，需要通过网络请求向后端获取数据，因此 http 协议是前端面试的必考内容。本章讲解 http 协议常考的知识点，如状态码、header、method、缓存等。特别是 http 缓存策略，非常重要。
【不会这些，你就会被认定是菜鸟小白，没做过项目】 本章介绍开发环境相关的知识点和题目。包括 git ，调试工具，抓包工具，webpack 和 babel ，以及 linux 常用命令。熟练使用开发环境的各个工具，才能证明你真的做过前端开发，真的有项目经验，否则只能被认定为菜鸟小白。
【这些会了，你就可以飞了】 本章介绍运行环境相关的知识点和题目。包括浏览器加载和渲染机制，性能优化，web 安全。网页在浏览器加载和运行，这些内容必须掌握，也是面试常考。
【很有必要带你避免面试犯低级错误】 本章回顾所有题目和知识点，总结课程内容。还会介绍一些实用的面试技巧，避免你在面试中犯一些低级错误。
17-1 课程总结~ 17-2 面试技巧
【我是来告诉你答案是什么】 本章节，通过一部分高频面试真题，带大家分析面试，以及如何解答。
slice 不影响原元素
arr = [0, 1, 2, 3, 4, 5];
arr.slice(); // [0, 1, 2, 3, 4, 5]
arr.slice(1); // [1, 2, 3, 4, 5]
arr.slice(1, 3); // [1, 2]
arr.slice(-2); // [4, 5]splice 返回被剪切的元素
arr = [0, 1, 2, 3, 4, 5];
arrSplice = arr.splice(1, 1, 'o'); // [1]
console.log(arr); // [0, "o", 2, 3, 4, 5][10, 20, 30].map(parseInt(curr, index));
// [10, NaN, NaN]parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。
- ajax 请求 get 和 post 的区别
- get 一般用于查询操作，post 一般用户提交操作 get 参数拼接在 url 上，post 放在请求体内（数据体积可更大）
- 安全性：post 易于防止 CSRF
event. stopPropagation
event. preventDefault
- 浏览器的同源策略（服务端没有同源策略）和跨域
- img script 所有 src 的标签，video audio link iframe
- 解释 jsonp原理