前端面试知识点架子(待更新......)

html基础

CSS基础 css3

盒子模型
BFC
css3动画
flex布局
    flex：auto／1/2
    Flex-wrap: nowrap/wrap 一行或者多行
sass/less

js基础

数组
函数
构造函数
作用域
闭包
作用域

es6

promise
箭头函数
let const
async

自动化构建项目工具的应用

webpack

node.js

计算机网络知识点

跨域解决方案
Http网络协议
  Http请求头有哪些
      Content-type

get和post的区别：
   [参考：](https://mp.weixin.qq.com/s?__biz=MzI3NzIzMzg3Mw==&mid=100000054&idx=1&sn=71f6c214f3833d9ca20b9f7dcd9d33e4#rd)

算法

冒泡排序
    当前位的值和后一位的值进行循环比较  前一位比后一位大（小）就交换它们的位置 一次循环
    双次循环实现
快排
    循环每次将最大或者最小的元素放在第一位 然后继续

前端性能优化

预加载（？？？），资源合并、[x]按需加载（vue chunk文件）
压缩文件gzip
    浏览器请求头设置accept-encoding:gzip
    服务器返回headers返回包含content-encoding:gzip
资源压缩合并，减少http请求
    例如雪碧图 js、css合并
非核心代码异步加载——>异步加载的方式——>异步加载的区别
 方式：1）动态脚本加载 <script>标签
    2）defer  (<script>标签上加defer或者async)
      在HTML解析完之后才会执行，如果多个，按照加载的顺序依次执行
    3）async
      在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
利用浏览器缓存——>缓存分类——>缓存的原理
    1）强缓存
      Expires Expires：Thu,21 Jan 2017…. 过期时间
      Cache-Control Cache-Control :max-age=3600(相对时间)
    2)协商缓存
      Last-Modified If-Modified-Since Last-Modified:Web,26 Jan…..
      Etag If-None-Match
使用CDN
    静态资源分地区放在不同的服务器
预解析DNS
    <meta http-equiv=“x-dns-prefetch-control” content=“no”>
    <meta rel=“dns-prefetch” href=“//host_name_to_prefetch.com”>

设计模式 -> 观察者模式

hybird开发相关知识点

网页渲染机制

渲染机制
    什么是DOCTYPE及作用
        DTD(document type definition 文档类型定义)一系列的语法规则，告诉浏览器文档是什么类型
        DOCTYPE是用来声明文档类型和DTD规范的
    浏览器渲染过程
        HTML转成dom tree
        CSS转换成 style rules tree
        将dom tree和style rules tree转换成render tree
        layout计算位置 再绘制painting
        DOM
    重排reflow／
        增加删除修改dom节点的时候会reflow或者repaint
        移动dom位置的时候 或者加动画
        修改css样式的时候
        可能resize窗口的时候，或者滚动的时候
        修改网页默认的字体时
    重绘repaint
        dom／css改动的时候
    布局layout
Js运行机制
    单线程：同一时间只能做一件事 js是从上向下执行。 同步任务／异步任务
    同步任务优先于异步任务
    console.log(1);//同步任务
    setTimeout(function(){//异步执行 挂起
        console.log(2)
    },0);
    console.log(3);//同步任务
    输出：1 3 2

页面性能

错误监控

正则表达式基础了解

浏览器缓存机制

Vue

vue周期

Create 
    创建实例 data数据对象生成 
    Mounted 
        Vue实例挂载完成，渲染成功
    Updated
        数据变化时触动updateed方法
    Distory
        数据的变化将不再监测  dom结构依然存在

mvvm模式的理解

model view viewModel 通过双向数据绑定viewModel把view和model链接起来  数据的更新自动的 不需要人为的去干涉更新
vm层 vue做相应处理 

watch和computed的区别

组件之间的传值

通过props父组件单向传值
子组件向父组件传值
   $.emit()方法
平行组件之间的传值用vuex

vue开发中常见问题及解决方法

props只能从父组件单向传值给子组件 子组件需要改变父组件的值可以将数据设置为对象或者数组 因为引用类型的改变不会导致错误 但是官方不推荐这么做

vue源码（看不错的博客）

Q：请简要概述vue的生命周期有哪些

Q：写出vue中父子组件如何通信

Q：请输出vue-router的导航守卫（或者函数钩子）有哪些？这些函数中有哪些参数

    router.beforeEach 全局守卫
afterEach
监听路由 父组件里面 watch:{‘$route’}

Q：在vuex中，要想state中存入数据的步骤是什么

Q：Vue的get、set，里面的坑以及如何解决？

Q：Vue的批量更新？

Q：batchupdate的策略是什么？

Q：装饰器风格的vue util库怎么实现？

Q：Vue的inject和provide是什么？

Q：怎么利用Vue来实现高阶组件，slot怎么办

Q：依赖收集问题

* Vue的所有属性都是Observable的
* @computed所能自我计算的，只有他所监控的（autorun）

Q：Vue模块加载的失败处理（白屏等情况）

Q：Vue双向绑定的实现

Q：Vue diff实现（1.0，2.0），与 react diff的区别

Q：Vue如何实现的一个插件

Q：如果有多个插件怎么挂载方式便于开发

Q：如何封装一个component，在不使用template的情况下输出一下dom结构（vue）

Vue动画组件

Jquery特点和源码（找总结不错的博客看）

核心架构

事件委托

$(document).on("click", "td", function(){
　　    $(this).toggleClass("click");
　　 })

利用事件冒泡 做事件委托 不需要每个子元素都调用
  插件机制
  优点
    选择器id选择器的性能最高
    伪类选择器的性能最差
    链式调用速度快于非链式调用
  优化
    循环时减少对dom的操作
    e.g.:
        将dom对象定义在循环外面  或者需要插入的内容用变量存储在添加到dom中
    Dom对象的缓存

小程序web-view和网页之间的通信怎么做？token怎么存储

通常面试流程及准备

Jd描述分析

业务分析或实战模拟

技术栈准备

Jquery
Vue/react/anglur  遇到的问题 解决方法
构建工具 sass web pack npm 

自我介绍

简历
    公司岗位 技术栈职责 
    公司项目的优化方案 攻克的技术难点总结
    开源项目，github和说明 （可以参与到开源项目中）
自我陈述
    豁达、自信适度发挥
    陈述引导面试官面试自己熟悉的相关知识 
    平时喜欢逛一些不错的技术博客 看别人的总结等

技巧

模拟一面 基础

Css盒模型 dom事件类
http协议类 原型链类
面向对象类 通信类
前端安全类 前端算法类

模拟二面 项目负责人

渲染机制
Js运行机制
页面性能
错误监控

模拟三面 团队负责人

业务能力
团队协作能力
带人能力

模拟终面 hr

职业竞争力 你的优势在哪里 人家为什么要你
职业规划

题目演练

知识梳理

项目架构能力
项目把控能力

复习指导