2019初中级前端知识体系

展开查看

1、CSS

• 一、盒模型
• 二、flex
• 三、css单位
• 四、css选择器
• 五、bfc 清除浮动
• 六、层叠上下文
• 七、常见页面布局
• 八、响应式布局
• 九、css预处理，后处理
• 十、css3新特性
  • animation和transiton的相关属性
  • animate和translate
• 十一、display哪些取值
• 十二、相邻的两个inline-block节点为何会出现间隔，该如何解决
• 1三、meta viewport 移动端适配
• 1四、CSS实现宽度自适应100%，宽高16:9的比例的矩形
  • 案例：连接
• 1五、rem布局的优缺点
• 1六、画三角形
• 1七、1像素边框问题

2、HTML

• 一、语义化
• 二、新标签新特性
• 三、input和textarea的区别
• 四、用一个div模拟textarea的实现
• 五、移动设备忽略将页面中的数字识别为电话号码的方法

3、JS

• 一、原型/原型链/构造函数/实例/继承
• 二、有几种方式能够实现继承
• 三、用原型实现继承有什么缺点，怎么解决
• 四、arguments
• 五、数据类型判断
• 六、做用域链、闭包、做用域
• 七、Ajax的原生写法
• 八、对象深拷贝、浅拷贝
• 九、图片懒加载、预加载
• 十、实现页面加载进度条
• 十一、this关键字
• 十二、函数式编程
• 1三、手动实现parseInt
• 1四、为何会有同源策略
• 1五、怎么判断两个对象是否相等
• 1六、事件模型
  • 事件委托、代理
  • 如何让事件先冒泡后捕获
• 1七、window的onload事件和domcontentloaded
• 1八、for...in迭代和for...of有什么区别
• 1九、函数柯里化
• 20、call apply区别，原生实现bind
  • call，apply，bind三者用法和区别：角度可为参数、绑定规则（显示绑定和强绑定），运行效率、运行状况。
• 2一、async/await
• 2二、当即执行函数和使用场景
• 2三、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现
• 2四、iframe的缺点有哪些
• 2五、数组问题
  • 数组去重
  • 数组经常使用方法
  • 查找数组重复项
  • 扁平化数组
  • 按数组中各项和特定值差值排序
• 2六、BOM属性对象方法
• 2七、服务端渲染
• 2八、垃圾回收机制
• 2九、eventloop
  • 进程和线程
  • 任务队列
• 30、如何快速让字符串变成已千为精度的数字

4、ES6

• 一、声明 let、const
• 二、解构赋值
• 三、声明类与继承：class、extend
• 四、Promise的使用与实现
• 五、generator（异步编程、yield、next()、await 、async）
• 六、箭头函数this指向问题、拓展运算符
• 七、map和set有没有用过，如何实现一个数组去重，map数据结构有什么优势？
• 八、ES6怎么编译成ES5,css-loader原理,过程
• 九、ES6转成ES5的常见例子
  • 使用es5实现es6的class

5、浏览器

• 一、输入url到展现页面过程发生了什么？

• 二、重绘与回流

  • 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时因为只须要UI层面的从新像素绘制，所以 损耗较少
  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会从新渲染页面，称为回流。此时，浏览器须要从新通过计算，计算后还须要从新页面布局，所以是较重的操

  会触发回流的操做:

  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变
  • 元素字体大小变化
  • 添加或者删除可见的 dom 元素
  • 激活 CSS 伪类（例如：:hover）
  • 查询某些属性或调用某些方法
  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

  回流一定触发重绘，重绘不必定触发回流。重绘的开销较小，回流的代价较高。

• 三、防抖与节流

• 四、cookies、session、sessionStorage、localStorage

• 五、浏览器内核

6、服务端与网络

• 一、常见状态码
• 二、缓存
  • 200 From cache和200 ok
  • 400,401,403状态码分别表明什么
  • 浏览器缓存
• 三、cookie, session, token
• 四、前端持久化的方式、区别
• 五、DNS是怎么解析的
• 六、cdn
• 七、计算机网络的相关协议
• 八、http/https/http2.0
• 九、get post区别
• 十、ajax、 axios库
• 十一、tcp三次握手，四次挥手流程
• 十二、跨域
• 1三、前端安全XSS、CSRF
• 1四、websocket
• 1五、Http请求中的keep-alive有了解吗
• 1六、网络分层
• 1七、即时通讯，除了Ajax和websocket
• 1八、模块化，commonJS，es6，cmd，amd

7、Vue

• 一、vue解决了什么问题
• 二、MVVM的理解
• 三、如何实现一个自定义组件，不一样组件之间如何通讯的？
• 四、nextTick
• 五、生命周期
• 六、虚拟dom的原理
• 七、双向绑定的原理？数据劫持？
• 八、组件通讯
  • 父->子
  • 子->父 非父子组件
• 九、Proxy 相比于 defineProperty 的优点
• 十、watch computed区别
• 十一、virtual dom 原理实现
• 十二、vue-router(hash， HTML5 新增的 pushState
  • 单页应用，如何实现其路由功能---路由原理
  • vue-router如何作用户登陆权限等
  • 你在项目中怎么实现路由的嵌套
• 1三、vuex的理解

8、前端性能优化

页面DOM节点太多，会出现什么问题？如何优化？ 如何作性能监测 SEO和语义化 这个没被问过

9、微信小程序

微信小程序和h5差别，若是有开发weex的经验，可能会加上weex

10、git

一些基本命令

11、打包工具webpack

• 一、打包原理
• 二、打包插件
• 三、webpack热更新原理
• 四、优化构建速度

12、算法

• 一、排序算法
• 二、动态规划，参见背包问题
• 三、二叉树
• 四、加油站问题(贪心算法)
• 五、二分法
• 六、二叉树遍历
• 七、单链表反转
• 八、取1000个数字里面的质数
• 九、找出数组中和为给定值的两个元素，如：[1, 2, 3, 4, 5]中找出和为6的两个元素。
• 十、线性顺序存储结构和链式存储结构有什么区别？以及优缺点

十3、移动端

• 一、自适应
• 二、pwa
• 三、移动端手势

十4、附加题

• 一、无限滚动方案
• 二、如何处理兼容性问题
• 三、你遇到过最难的问题是什么
• 四、ES6 class与ES5 function区别及联系
• 五、vue怎么监听数组
• 六、写过webpack loader吗
• 七、微信网页版登陆机制思考

后记

若是你刷到这里，你的心里os是否是：前端知识点好多啊，我记不住啊！大兄弟，我和你同样，我也记不住，常常学了就忘，没事，继续学就行了。。。 我也是一边面试一边增长的，因此可能有的知识点分类不合适，请包涵哈。 以前作这些知识点罗列的时候，也没想发出来，只是单纯的作点笔记。这些知识点有的来自于其余前端小伙伴写的面经，有的是我本身去面试的时候被问到的。

刚准备面试的时候，心里慌的不行啊！可是后来发现，"多面面就行了"这句话简直太正确了，越面越顺，并且本身心情也会比较放松了。

为何扯这么多呢，其实就想告诉正在找工做的同窗们. 坚持！！！