专栏名称: Coderfei
前端
目录
相关文章推荐
51好读  ›  专栏  ›  Coderfei

2019“寒冬”前端面试必备(持续更新...)

Coderfei  · 掘金  ·  · 2019-05-08 14:23

正文

阅读 116

2019“寒冬”前端面试必备(持续更新...)

最近也在准备面试,就把前端面试中常考的知识点梳理了出来,为了复习起来更方便,更有针对性,也希望能够帮到寒冬面试的一些朋友。本文包括 CSS,JS,ES6,浏览器,服务端与网络,VUE,HTTP,webpack 和 算法 十个部分。

如果按照本文的思路来准备面试,您定会有所收获。

1. CSS

1、怎么实现三栏布局?

  • 浮动(float)
  • 定位(position)
  • flex 布局
  • table-cell
  • 网格布局
  • bfc (set middle area overflow is hidden)

2. 垂直居中

个人觉得问这个的挺多

  • line-height: height
  • absolute + transform 居中为什么要使用 transform(为什么不使用marginLeft / Top),这是一道重绘重排的问题。
  • flex + align-items: center 我会对 flex 容器以及 flex 项目的每个 css 属性都了解一遍,并且写了一些小 demo。
  • absolute + top:0 bottom:0
  • 3、盒模型

    4. css单位

    5. css选择器

    6. 层叠上下文

    7. 常见页面布局?响应式布局?

    8、BFC

    • 概念
    • 如何触发
    • 怎么应用(清除浮动)

    9. css预处理器

    一般回答 变量 / 嵌套 / 自动前缀 / 条件语句 / 循环语句

    10. css3新特性

    animation和transiton的相关属性,animate和translate

    display哪些取值

    11、相邻的两个inline-block节点为什么会出现间隔,该如何解决

    12、meta viewport 移动端适配

    13、CSS实现宽度自适应100%,宽高16:9的比例的矩形

    14、rem 布局的优缺点

    15、画三角形

    16、1px 边框问题

    2、JavaScript

    1、数据类型的分类和判断

    2、原型、原型链、继承、构造函数、实例

    3、有几种方式可以实现继承,用原型实现继承有什么缺点,解决办法

    4、作用域、作用域链、闭包

    5、arguments 对象

    6、Ajax的原生写法

    7、对象深拷贝、浅拷贝

    8、图片懒加载、预加载

    9、实现页面加载进度条

    10、this关键字

    11、函数式编程

    12、手动实现parseInt

    13、为什么会有同源策略

    14、怎么判断两个对象是否相等

    15、事件模型(事件委托、代理,如何让事件先冒泡后捕获)

    16、window 的 onload 事件和 domcontentloaded

    17、for...in 迭代和 for...of 有什么区别

    18、函数柯里化

    19、call apply区别,原生实现bind

    call,apply,bind 三者用法和区别:角度可为参数、绑定规则(显示绑定和强绑定),运行效率、运行情况。

    21、async/await

    22、立即执行函数和使用场景

    23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

    24、iframe的缺点有哪些

    25、数组问题

    数组去重,数组常用方法,查找数组重复项,扁平化数组,按数组中各项和特定值差值排序

    26、BOM属性对象方法

    27、服务端渲染

    28、垃圾回收机制

    29、eventloop,进程和线程,任务队列

    30、如何快速让字符串变成已千为精度的数字

    3. ES6(web最新标准)

    1、let、const 声明

    2、解构赋值

    3、声明类与继承:class、extend

    4、Promise 的使用与实现(原理)

    5、generator(异步编程、yield、next()、await 、async)

    6、箭头函数 this 指向问题、拓展运算符

    7、module

    8、map 和 set 怎么用,如何实现一个数组去重,map数据结构有什么优点?

    9、ES6 怎么编译成 ES5,css-loader 原理,过程

    10、ES6 转成 ES5 的常见例子

    使用 es5 实现 es6 的 class

    4. 浏览器

    1、输入url到展示页面过程发生了什么?

    2、重绘与回流

    重绘(repaint): 当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此 损耗较少

    回流(reflow): 当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。会触发回流的操作:

    * 页面初次渲染

    * 浏览器窗口大小改变

    * 元素尺寸、位置、内容发生改变

    * 元素字体大小变化

    * 添加或者删除可见的 dom 元素

    * 激活 CSS 伪类(例如::hover)

    * 查询某些属性或调用某些方法

    * clientWidth、clientHeight、clientTop、clientLeft

    * offsetWidth、offsetHeight、offsetTop、offsetLeft

    * scrollWidth、scrollHeight、scrollTop、scrollLeft

    * getComputedStyle()

    * getBoundingClientRect()

    * scrollTo()

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

    3、防抖与节流

    4、cookies、session、sessionStorage、localStorage

    5、浏览器内核

    5. 服务端与网络

    1、常见状态码

    2、缓存

    200 From cache 和 200 ok

    400,401,403状态码分别代表什么

    浏览器缓存

    3、cookie, session, token

    4、前端持久化的方式、区别

    5、DNS是怎么解析的

    6、cdn

    7、计算机网络的相关协议

    8、http/https/http2.0

    9、get post区别

    10、ajax、 axios库

    11、tcp三次握手,四次挥手流程

    12、跨域

    13、前端安全XSS、CSRF

    14、websocket

    15、Http请求中的keep-alive有了解吗

    16、网络分层

    17、即时通信,除了Ajax和websocket

    18、模块化,commonJS,es6,cmd,amd

    6. Vue

    1、vue解决了什么问题

    2、MVVM的理解

    3、如何实现一个自定义组件,不同组件之间如何通信的?

    4、nextTick

    5、生命周期

    6、虚拟dom的原理

    7、双向绑定的原理?数据劫持?

    8、组件通信

    父->子

    子->父

    非父子组件

    9、Proxy 相比于 defineProperty 的优势

    10、watch computed区别

    11、virtual dom 原理实现

    12、vue-router(hash, HTML5 新增的 pushState

    单页应用,如何实现其路由功能---路由原理

    vue-router如何做用户登录权限等

    你在项目中怎么实现路由的嵌套

    13、vuex的理解

    前端性能优化

    页面DOM节点太多,会出现什么问题?如何优化?

    如何做性能监测

    SEO和语义化

    这个没被问过

    微信小程序

    微信小程序和h5差异,如果有开发weex的经验,可能会加上weex

    7. git

    • 基本操作
    • git rebase vs git merge

    • git merge
      • 记录下合并动作 很多时候这种合并动作是垃圾信息
      • 不会修改原 commit ID
      • 冲突只解决一次
      • 分支看着不大整洁,但是能看出合并的先后顺序
      • 记录了真实的 commit 情况,包括每个分支的详情
    • git rebase
      • 改变当前分支 branch out 的位置
      • 得到更简洁的项目历史
      • 每个 commit 都需要解决冲突
      • 修改所有 commit ID

    回答时候没有答出很多,这是后面总结,深刻发现日常做总结的必要性,一直觉得自己是了解的,等到总结时候才发现有一些 point 还是不清楚的。

    • 修改 commit message

    8. HTTP

    1. 跨域

    基本都被问同源策略以及引申到跨域来,一般我会说 CORS 以及 jsonp,CORS 会从简单请求跟非简单请求区分开,再讲 options 请求的意义。







    请到「今天看啥」查看全文