目录

firstOne

 

版本控制工具

• 版本管理_svn_检出_更新_提交_本机 MAC 地址_冲突
• 版本管理_git

 

---

 计算机软件和硬件

• 性能优化_前言
• 浏览器的功能与组成
• 渲染引擎 & 页面渲染流程 & 阻塞
• 图层 & 重排 & 重绘
• 函数防抖 & 函数节流
• 高性能平滑动画_requestAnimationFrame
• http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_浏览器存储
• js 模块化
• webpack3_脚手架

 

---

 W3C标准

• 网页 3 大组成部分

 

---

 软件架构

 

---

 HTML

• 第一个网页    <标签 属性="属性值"></标签>
• HTML 的发展
• 乱码问题
• 常见的标签
• 字符实体（转义字符）
• 图片标签 <img />
• <meta /> 标签
• xhtml 的语法规范
• <frame></frame>内联框架 引入有一个外部html页面
• <frameset></frameset>框架集  ---- frame 和 iframe 的区别
• 超链接
• 命名规范

 

---

 HTML5 新标签

• HTML5 提供的新功能 ---- less 编译
• HTML5_音视频标签 <audio> 和 <video>
• HTML5_canvas 画布 ------------ diy 画板 ---- 画五角心 ---- 画圆弧
• pen.translate(x, y); pen.scale(x, y); pen.rotate(radian); 旋转案例
• canvas 图片加载_双缓冲_跳帧闪烁问题
• canvas 线性渐变 径向渐变
• canvas_填充文本，描边文本
• HTML5_图片合成_刮刮卡
• canvas_像素操作_图片马赛克_图片反相 ----------------

 

---

 层叠样式表 CSS

• 浏览器默认样式
• 块元素block_内联元素inline_行内块元素inline-block
• css 样式选择器
• 文本标签 及其样式
• 有序列表 ul，无序列表 ol，自定义列表 dl
• css 盒模型 (框模型)
• 垂直外边距重叠
• 父元素 对子元素 溢出内容的处理 overflow
• 文档流_网页最底层
• float 元素浮动
• 高度塌陷 问题
• 固定布局
• 导航条练习 ---------------- div 版本
• 导航条练习 ---------------- ul 版本
• Photoshop 的基本操作
• 定位 position
• 层级 z-index
• opacity 透明度
• 背景 background
• 背景图按钮-图片整合技术 CSS-Sprite 雪碧图 ---- 雪碧图的制作
• 表格 table ---- 表格美化 border-spacing border-collapse ---- 长表格（完整的 table）
• table 表格布局
• clearfix 解决垂直外边距重叠 和 高度塌陷
• form 表单 ---- 各种表单项
• IE6 到 IE11 对于包含中文路径的 png 显示问题
• css hack 技术

 

---

 css 细节总结 ---- 小结粘连布局

• CSS3_边框 border 详解 三角形 圆形 ----------------一个 div 的阴阳图
• CSS3_标准盒子模型和怪异盒子模型
• 文本样式 text-shadow -webkit-text-stroke direction -webkit-background-clip 
• CSS3_盒阴影_倒影_盒子大小可调 resize: both; overflow: auto;     box-shadow -webkit-box-reflect
• 盒子背景 background-clip background-origin background-size background-image CSS3 过滤器: filter
• 背景的 线性渐变 和 径向渐变 background-image: linear-gradient(#000, #fff); 颜色结点
• css3 多列布局 column-xxx: xxx;
• 过渡 transition transform 2D 变换 ---------------- 瓶体旋转_动态时钟
• css3 transition 过渡之 'transitioned' 事件 ---------------- 扇形导航
• 3D 变换 transform-style: preserve-3d; 开启 3D 空间 景深 perspective: 300; 变换基点 transform-origin: px px;
• 天猫商品墙 -----------------
• css3 动画 animation: ; 关键帧 @keyframes xxx{... ...}
• 移动端开机动画 ----------------
• 伸缩和模型_CSS3 引入的布局模式 Flexbox 布局 ---------------- 毒液 (简单案例)
• CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

 

---

 JavaScript 的发展与简介 ---- 需要注意的地方

• 面向对象 OOP new 构造函数 this
• 原型链_对象的继承_多重继承_封装(函数式编程)
• console 对象 与 控制台接口
• javascript 编写位置 与 常用输出语句
• 字面量/变量_标识符_数据类型_数据的存储 ---- ES6 数值 Number 的扩展
• 对象的简介及其分类 ---- 对象的存储及引用
• Object 对象的相关属性/方法
• 包装对象 Number、String、Boolean
• 对象的 属性描述符对象
• javascript 强制类型转换 
• javascript 运算符 及运算符的优先级
• 字符串中使用 \u 输出 Unicode 字符
• if 练习 ---- else if ---- 小到大排序
• switch 练习 ---- 今天星期几
• 流程控制语句
• for 练习 ---- Sum of Odd/Even ---- sum of 7 ---- flower number ---- prime number ---- Meth.sqrt()
• 变量的作用域
• 函数_this_arguments_回调函数_IIFE_闭包_内存溢出_内存泄漏
• 预处理_预解析_函数上下文对象_函数的实参列表
• 对象的方法
• 重写对象的 toString()
• 垃圾回收机制 GC
• 数组 与 类数组对象 以及数组的相关方法 ---- 数组常见方法 ---- ES6 数组的扩展以及扩展运算符
• 日期对象 Date 及其相关属性/方法
• 数学对象 Math 及其相关属性/方法
• Error 错误对象_throw new Error('SomeThingWrong');_try{...}catch(e){...}finally{...};
• 正则表达式对象 RegExp ---- ES6 的正则表达式扩展
• JSON 对象 用于数据交换的文本格式
• 严格模式
• 定时器
• 异步操作_单线程模型_同步任务_异步任务_任务队列_事件循环
• Promise 对象 ---- 异步编程 Promise
• js 分线程——Web Workers 事件 Event 浏览器的事件模型 事件的传播 事件委派 / 事件代理（delegation） Event 对象

 

---

 ECMAScript 6 简介

• 必须要知道的
• 结构赋值 模式匹配
• 字符串_扩展_字符 是4字节还是2字节？_模板字符串_标签模板
• 函数的扩展_参数默认值 以及最后的 逗号,__参数初始化作用域_...多余实参数组_箭头函数_::运算符_尾调用_尾递归
• Symbol() 唯一类型值声明函数_Symbol 数据类型
• symbol(symbol.iterator) 新接口_iterator接口
• 生成器 Generator
• ES6 的正则表达式扩展
• async 函数
• 数值 Number 的扩展
• 数组的扩展_扩展运算符
• 对象的扩展_super 关键字_扩展运算符_以及对象的新增方法
• 类 class
• 唯一容器 Set 与 映射容器 Map
• 模块加载方案 与 ES6 Module 模块语法_import_export
• 行为重定义 Proxy

 

---

 DOM 文档对象模型

• Element 元素节点对象 及其属性/方法 ---- 属性及相关方法 以及 data-set
• document 对象 的属性/方法
• NodeList 接口，HTMLCollection 接口
• ParentNode 接口 、 ChildNode 接口
• document.querySelectorAll() 兼容 IE6
• javascript 操作 css 
• DocumentFragment 节点对象 ---- 反转一个节点多有子节点顺序
• Mutation Observer API 突变监视器 监听 DOM 节点变动
• 鼠标事件
• 键盘事件
• 进度事件
• 表单事件
• 拖拉事件
• 触摸事件
• 鼠标事件对象方法封装 ----------------
• 自定义 获取元素当前样式 函数 兼容 IE
• 自定义绑定响应函数 解除响应函数 兼容 IE
• 获取鼠标在目标元素中的坐标
• 获取元素在浏览器窗口的坐标
• 获取元素在网页中的坐标
• js 原生 拖动元素

---

 BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程

• window 对象的常见 属性/方法
• window.navigator 对象
• 不超过 4 KB 的 document.cookie 对象
• express_浏览器存储技术 Cookie（服务器将少量数据交于浏览器存储管理）
• XMLHttpRequest 对象
• BOM 浏览器对象模型_同源限制
• BOM 浏览器对象模型_Storage 接口 - window.sessionStorage - window.localStorage
• BOM 浏览器对象模型_当前窗口的浏览历史 history 对象

 

---

 jQuery

• 浏览器的事件模型 DOM0 DOM2
• 重点总结

 

---

 移动端 mobile

• 像素 屏幕分辨率 屏幕尺寸 屏幕像素密度 设备像素（物理像素）css 像素 设备独立像素（密度无关像素）位图像素 像素比（屏幕特性，高清屏还是普通屏？）
• 布局视口 视觉视口 理想视口
• 用户缩放 与 系统缩放
• 移动端基础事件 禁止浏览器默认行为 准备工作
• 点透(传透)
• 竖向滑屏 ----------------
• mobile_轮播图 ---------------- style_left 版本
• mobile_轮播图 ---------------- transform 版本 ---- transform 读写二合一
• 5 种常见适配(设备的兼容处理) ---- 具体像素值 rem 适配 viewport 适配 百分比适配 媒体选择器（响应式布局）
• 1 物理像素
• 音悦台模拟项目 ----------------

 

---

 PC 官网 项目 ----------------

 

---

 bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

• 基础模版 栅格系统 响应式重叠 列偏移 列排序 表单 图片 打印类 组件
• 栅格系统_响应式工具_源码分析

 

---

 Zepto.js

 

---

 MongoDB_简介_安装_基本使用_js_mongoose 操作 MongoDB 编程

 

---

 node.js 简介及其 npm 包管理器

• Buffer 缓冲区
• node 通过核心 FS 模块来操作文件系统
• 原生 node 服务器 与 express_搭建服务器
• express route 路由 app.get() app.post()
• express_中间件 middleware ---------------- 登录/注册实例源代码
• 加密库_sha1 ---- 密码明文_密文
• express.Router 路由器_模块化管理路由 ---------------- 登录/注册实例源代码
• 服务器渲染页面 ejs 引擎
• 浏览器存储技术 Cookie（服务器将少量数据交于浏览器存储管理）
• 临时会话对象 session
• 前端发送请求的技术 Ajax_简介： 异步的 JS 和 XML_原生写 ajax 分析其原理_art-template 模板引擎 ---- 艺术模板 art-template
• AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

微信公众号 (订阅号)

• 被动回复用户消息_服务器搭建_基本交互
• access_token_接口编程 创建菜单_菜单 name+表情
• 用户管理_自定义菜单_自动回复用户消息_素材上传与下载
• JS-SDK 网页开发
• 结合 爬虫 puppeteer 做个微信网页

 

---

 http 原理 HTTP 协议简介

• HTTP工作原理_HTTP消息结构格式
• HTTP请求方法 HTTP相应头信息 HTTP状态码分类
• content-type 对照表

 

---

 angular JS 

AngularJS_简介、特性及基本使用

 

---

React 

• React 简介及其基本使用
• React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
• 组件化 - 实例
• React_生命周期
• React_基本原理_ajax
• react_app 项目开发
• react_app 项目开发 (2)_axios_pubsub-js
• react_app 项目开发 (3)_单页面设计_react-router4
• react_app 项目开发 (4)_ React UI 组件库 ant-design
• react_app 项目开发 (5)_前后端分离_后台管理系统_开始
• react_app 项目开发 (6)_后台服务器端-node
• react_app 项目开发_遇到的坑
• react_app 项目开发 (7)_难点集合
• react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate
• react_app 项目开发 (9)_数据可视化 ECharts
• react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行

 

---

Vue

• vue 项目界面绘制_stylus_iconfont_swiper
• vue_简介_渐进式 js 框架
• vue_class 绑定_style 绑定
• vue_条件渲染_v-if_v-else_v-show
• vue_v-for_遍历数组_遍历对象
• vue_小项目_模糊搜索(列表过滤)_结果排序
• vue_事件绑定 v-on _事件修饰符
• vue_表单 input 的绑定
• vue_实例 viewModel 的生命周期
• vue_过渡_动画
• vue_过滤器： 对要显示的数据进行特定格式化后再显示
• vue-cli 脚手架 Command Line Interface
• vue_小项目_吃饭睡觉打豆豆
• vue_组件间通信：自定义事件、消息发布与订阅、槽
• vue_ajax 请求
• vue_mint-ui
• vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据
• vue_vuex
• vue_源码 原理 剖析
• vue_eHungry 饿了么
• 什么是 ajax？----异步 javascript 和 xml
• 面试题外话 - 关注微信公众号 "前端早读课"
• 微信小程序----没有 DOM 对象，一切基于组件化 ---- mpvue
• 一步一步 copy163： 网易严选 ---- vue-cli
• 到位App_jQuery_art-template
• 阿里小程序 - 钉钉应用

 

---

 前端面试题

1. js数据类型_对象_函数_内存

2. 原型链_作用域链_预处理_预解析

3. 闭包_对象组合继承模式_事件轮询机制

4. 属性描述符_访问描述符

5. 箭头函数_this 指向_es6 常用语法

6. 深度克隆_ES7**_arr.includes('孙悟空')

7. Buffer_包描述文件_npm常用指令_fs文件读写_模块化require的规则

8. 环境变量_数据库_mongoose的基本使用_模型对象的CRUD

9. http协议_响应状态码_页面渲染流程_路由_中间件

10_常见的get和post请求_路由器_ejs服务器渲染模板引擎

11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

12. 宏任务_微任务

13. 面试题： 多个 await 处理，有一个失败，就算作失败