前端面试知识点目录一览

写在前面:

金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习; 详细内容会在之后一一对应地补充上去(有些在我的个人主页笔记中也有相关记录), 这里暂且放一个我的面试知识点目录; 大家有兴趣可以自己根据目录去扩展, 欢迎在评论下方指点一二, 看还有哪些没考虑到的, 互相交流一哈...

基本功考察

关于Html

1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化
   2. h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag
   3. h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)

关于CSS

1. CSS选择器( 三大特性 ) 
   2. BFC机制
   3. 盒模型
   4. CSS模块化开发(封装);  SCSS和LESS的使用
   5. 屏幕适配 以及 页面自适应   
   6. CSS3中新增的选择器
   7. CSS3中新增的属性, transform trasition animation等...

关于布局

1. 标准文档流(padding + margin + 负margin) + 浮动float + 定位
   2. 百分比布局(流式布局):  px单位 用 %num代替, 占父级元素的百分比
   3. flex弹性布局: 主轴 辅助轴的几个属性
   4. grid栅格布局: 使用框架中的类名来替代: 本质上还是百分比布局

关于JS基础

1. 变量数据类型及检测:  基本 + 引用
   2. 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等       
   3. 条件, 循环, 异常处理  if  switch(){case xxx:} try catch finally throw 
   4. 函数定义, 调用方式(apply, call, 直接调用), 传参: 实参给形参赋值
   5. 字符串, 数组, 对象常用API, 
   6. 正则表达式

关于JS高级

1. 作用域, 作用域链, 闭包
   2. 原型, 原型链, 继承
   3. 函数上下文, this指向
   4. js的运行机制, 事件队列和循环
   5. Ajax原理, axios库
   6. 同步, 异步编程
   7. jQuery源码学习

关于浏览器

1. 浏览器的构成和运行机制,
   2. 浏览器内核
   3. 浏览器交互: BOM和DOM相关webApi, 监听事件
   4. 浏览器缓存机制
   5. 浏览器的渲染原理
   6. 浏览器的安全性: 跨域 和 攻击

关于网络协议

1. HTTP协议
   2. cookie, session, token

关于ES6语法

1. 字符串, 数组, 对象 扩展的api
   2. 变量扩展: let const 解构赋值 块级作用域
   3. 函数扩展: 箭头函数 默认参数, rest参数
   4. 展开运算符, 模板字符串
   5. set 和 map数据结构
   6. 迭代器和生成器函数 next 和 yield的理解
   7. proxy对象  属性代理器: 属性的读取(get)和设置(set)相关操作
   8. promise对象, 异步编程的解决方案
   9. async + await: 异步编程的终极方案 promise + generator的语法糖
   10. class语法  构造函数的语法糖
   11. 模块化编程  export + import 的 导出和导入

VUE基础

1. 基本指令
   2. 实例的 属性 和 方法
   3. 实例的生命周期
   4. 组件基础: 创建,注册,添加属性方法,套用等...
   5. 组件通信传值  父子, 兄弟, 跨级
   6. 插槽slot 等...

VUE高级

1. vue-router: 搭建SPA
       路由,组件的配置
       路由间的传值
       路由跳转
       路由的导航守卫

记住在router.js 和 组件页面中的使用方式

2. vuex: 状态管理: 数据仓库store   
       实例化仓库的5大属性的使用
       state, getters, mutations, actions, modules
       辅助函数mapState等..., 仓库中计算属性的映射, 方便操作

记住在 store.js 和 组件中 使用方式

VUE深入, 源码阅读

1. 数据响应式原理
   2. virtual dom
   3. diff 算法
   4. nextTick等等...

工程能力考察:

项目能力

1. vue-cli脚手架搭建 和 功能配置 vue.config.js   
   2. webpack的常用配置
   3. 项目构建 打包
   4. 熟悉各类框架的文档...
   5. UI框架: Bootstrap, MUI, Element-ui等
   6. 常用的插件整理, 整理一个自己插件库, 封装自己的方法库,组件库
   7. 常用的工具熟练度
   8. PC端 和 移动端开发注意事项
   9. 经验总结: 快速确定项目的技术选型
   10. 坑点总结: 项目遇到坑坑坑!!!
   11. 项目中的性能优化记录 ( 都是细节点...多记录 )
   12. 需求文档的理解, 可以结合 项目流程图, UML图
   13. 问题解决能力: (bug定位调试, 查找文档, 寻求他人...)
   14. 记录习惯养成

模块化, 组件化开发能力

1. 项目分类; 各类文件整理,分类
   2. 各类功能封装
   3. 组件和功能模块的抽离, 解耦, 复用

内功考察:

面向对象的编程思想

1. 类的抽象
   2. 对象的封装, 继承
       为了更好的去管理数据, 分类数据     实现高内聚, 低耦合

设计模式

设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式

数据结构和算法

学习常用的排序搜索算法, 顺序表,链表,栈,队列,树,堆 结构等等...
   考验你的 抽象思维 和 数学功底了
   将现实需求 抽象成 计算机代码 的思维能力

附加技能考察:

1. 学习能力

1. 持续学习的态度--博客, 笔记记录
    2. 技术论坛活跃度高, 问答多
    3. GitHub开源项目参与

2. 了解一门后端语言

1. python, node.js, php等...
    2. 数据库mysql,redis,mongodb.  sql的操作语句, mongo的操作语句, redis操作语句
    3. node + express 搭建本地服务等
    4. python + django + request + scrapy

3. 系统编程

1. Linux命令行操作, 系统文件管理
    2. 多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解

总结

以上所述是小编给大家介绍的前端面试知识点目录一览,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • Javascript前端经典的面试题及答案

    前言 如果面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别有: 移动 & PC端布局类 JavaScript 核心基础类 衍生框架类 项目应用类 这四大类别的面试题若按出现频率来划分,则面试时 100% 会问到的题型有:"移动端&PC端布局类.JavaScript 核心基础类".本次选择这两类中难度更高一些的 "JavaScript 核心基础类" 面试题,进行了分析和解答,供面试

  • BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型:Object(Array,Da

  • 一道JS前端闭包面试题解析

    问题 代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] } } } var a=fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun(3); var c=fun(0).fun(1); c.fun(2); c.fun(3); 求出程序输出 这是一个闭包测试题 转换为等价代码 retu

  • 一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发挥).本文提供了众多前端开发面试题,无论是招聘方还是应聘方都值得一看! 前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过于轻视他. 题目如下: function Foo() { ge

  • js前端面试题及答案整理(一)

    Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.indexOf(v) < 0){ result.push(v); } }); return result; } •利用hash表去重,这是一种空间换时间的方法 Array.prototyp

  • for循环 + setTimeout 结合一些示例(前端面试题)

    一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 setInterval 的执行机制 在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,setTim

  • 前端面试知识点锦集(JavaScript篇)

    JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为"Asynchronous JavaScript And XML"(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 优点 a.不需要插件支持 b.优秀的用户体验 c.提高Web程序的性能 d.减轻服务器和带宽的负担 缺点 a.浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持 b.破坏浏览器"前进&qu

  • 前端面试知识点目录一览

    写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习; 详细内容会在之后一一对应地补充上去(有些在我的个人主页笔记中也有相关记录), 这里暂且放一个我的面试知识点目录; 大家有兴趣可以自己根据目录去扩展, 欢迎在评论下方指点一二, 看还有哪些没考虑到的, 互相交流一哈... 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化   

  • 前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • JavaScript前端面试扁平数据转tree与tree数据扁平化

    目录 一.写在前面 二.正文部分 2.1 扁平数据转为 tree 数据 2.2 tree 数据转为扁平数据 2.3 完整测试 demo 三.写在后面 一.写在前面 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力.例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构. 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我

  • 高级前端面试手写扁平数据结构转Tree

    目录 前言 什么是好算法,什么是坏算法 时间复杂度 计算方法 空间复杂度 计算方法: 不考虑性能实现,递归遍历查找 不用递归,也能搞定 最优性能 小试牛刀 前言 招聘季节一般都在金三银四,或者金九银十.最近在这五六月份,陆陆续续面试了十几个高级前端.有一套考察算法的小题目.后台返回一个扁平的数据结构,转成树. 我们看下题目:打平的数据内容如下: let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id:

  • js前端面试常见浏览器缓存强缓存及协商缓存实例

    目录 前言 搭建环境 强缓存 协商缓存 Etag和If-None-Match Last-Modify和if-modified-since 前言 最近在背面试题时,时常会看见浏览器缓存,虽然没有用过但是从它的描写中大致是知道它的作用和重要性.但是还是没有代码实操过,也是一知半解的,这口气咽不下啊,开始找资料,但是大部分都是理论半行代码没有,终于东拼西凑顿悟了.开始搭环境,干活. 浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本

  • 前端面试之输入npm run后执行原理

    目录 引言 引言 在前端开发的工作当中,使用 npm run dev 的命令启动本地开发环境,是再正常不过的事了.那么,当输入完类似 npm run xxx 的命令后,究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢? 首先我们知道,Node 作为 JavaScript 的运行时,可以把 .js 文件当做脚本来运行,像这种: node index.js 当我们使用 npm 来管理项目(或者 yarn)时,会在根目录下生成一个 package.json 文件,其中的 scri

  • 前端面试运行npm run xxx发生过程原理解析

    目录 引言 package.json文件 总结 引言 事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后TCP 连接,TCP 三次握手… 面试官:停停,我问的不是从URL输入到页面展现到底发生什么?,是npm run xxx的时候,发生了什么. 我(尴尬,条件反射地以为是问的八股文):emmmm,我记得 npm run xxx的时候,首先会去项目的package.json文件里找sc

  • 前端面试必会网络跨域问题解决方法

    目录 什么是跨域 跨域解决方法1-代理 跨域解决方法2-JSONP 跨域解决方法3-CORS 概述 简单请求 简单请求的判定 简单请求的交互规范 需要预检的请求 附带身份凭证的请求 一个额外的补充 什么是跨域 浏览器有一个重要的安全策略,称之为「同源策略」 其中,源=协议+主机+端口源=协议+主机+端口源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域 比如: 源 1 源 2 是否同源 www.baidu.com www.baidu.com/news www.baidu.

  • 前端面试的底气之实现一个深拷贝

    目录 前言 青铜段位 白银段位 黄金段位 铂金段位 砖石段位 星耀段位 王者段位 总结 前言 深拷贝这个功能在开发中经常使用到,特别在对引用类型的数据进行操作时,一般会先深拷贝一份赋值给一个变量,然后在对其操作,防止影响到其它使用该数据的地方. 如何实现一个深拷贝,在面试中出现频率一直居高不下.因为在实现一个深拷贝过程中,可以看出应聘者很多方面的能力. 本专栏将从青铜到王者来介绍怎么实现一个深拷贝,以及每个段位对应的能力. 青铜段位 JSON.parse(JSON.stringify(data)

随机推荐