前端工程师自学面试找工作必备知识

本教程只是自己平时总结的零零总总学习大前端的知识,需要说明的是本系列教程并不是连续的由浅入深的内容,只是博主自己平日积累的。而且可能部分内容摘自互联网,请勿见怪,有出处的,我尽量会附上原网址链接。前端工程师本来对于技术就是不断积累和深化的过程,所以想进阶高级工程师,或者资深工程师,请务必牢记,踏踏实实学习积累,没有捷径。

如果你想踏入前端学习,准备在走向前端生涯,那么你该好好准备了。如果你想进入网易、百度、阿里这样的大公司,那你更要好好学习下面这些知识点,基础的知识要打牢,否则很难通过笔试或者面试哦。快快行动吧!

前端进阶系列课程

《用JavaScript自己写MVVM前端框架》:https://t.cn/REeKJp0

《前端函数式编程FP易学易用》:https://t.cn/REeKVSk

《前端自己用NodeJS编写区块链BlockChain》:https://t.cn/REeoF7v

《程序语言进阶之DSL与AST实战解析》:https://t.cn/R3XoQJA

《高性能web前端网页优化开发实战》:学习在线视频教程

《机器学习python与tensorflow实战》:在线学习视频教程

入门基础-最低要求

第一章:HTML基础知识

1.1. HTML发展历史HTML,HTML简介,简要介绍HTML发展历史、基本概念和文档声明等

1.2.标签,介绍标签语法、各类标签及语义化 标签语义化的目的就是对搜索引擎友好,有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取,这种符合搜索引擎收索规则的做法,网站的推广便可以省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO(search engine optimization)重要的一步。

1.3.实体字符,介绍常用实体字符

1.4. HTML元素嵌套约束

第二章:CSS知识点

2.1 CSS,CSS简介,简要介绍CSS发展历史和基本概念、引入、基本语法

2.2 选择器,基本选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器、分组选择器、优先级、层叠、继承、!important

2.3.文本,字体的基本设置、对齐方式、格式处理、高级设置等

2.4 .盒模型,盒模型概念 、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

2.5.背景 ,background基本属性、线性渐变、径向渐变 6.布局,布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

2.6.变形,2d变形方法、3d变形方法

2.7.动画,过渡动画、帧动画

2.8.IE下的css hack

第三章:javascript基础知识

基本语法

3.1.基本语法,主要介绍标示符、保留字与关键字、严格模式、注释等语法

类型系统

3.2.基本类型,主要介绍6种基本类型(Undefine、Null、Boolean、Number、String、Object)、原生类型及引用类型概念等

类型识别

3.3.类型识别,主要介绍typeof、Object.prototype.toString、constructor、instanceof等类型识别的方法 JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据。 typeof 可以用来检测给定变量的数据类型,可能的返回值:

  1. ‘undefined’ — 这个值未定义;
  2. ‘boolean’ — 这个值是布尔值;
  3. ‘string’ — 这个值是字符串;
  4. ‘number’ — 这个值是数值;
  5. ‘object’ — 这个值是对象或null;
  6. ‘function’ — 这个值是函数。
var aa = 'test string';
alert(typeof aa); // 'string'
alert(typeof 90); // 'number'

内置对象

3.4.简介,主要介绍内置对象的分类、构造器的介绍方法

3.5.Object,介绍Object构造器对象及其关键的对象方法、原型对象方法

3.6 String、Number、Boolean,介绍String、Number、Boolean类型的封装类(构造器对象)及其关键的对象方法、原型对象方法

3.7 .Array,介绍Array构造器对象及其关键的对象方法、原型对象方法

3.8.Function,介绍Function构造器对象及其关键的原型对象方法(apply、call、bind)

3.9 .RegExp、Date、Error,介绍RegExp、Date、Error构造器对象

3.10.Math、JSON 1.Math、JSON 介绍Math、JSON对象及其方法 8.全局对象,介绍全局对象方法parseInt、encodedURIComponent等

表达式、运算符

3.11.表达式、运算符,介绍表达式、算术运算符、位运算符、布尔运算符、关系运算符、相等与全等、条件运算符

语句

3.12.语句 简要介绍条件语句、循环语句、异常语句、with语句等

变量作用域

3.13.变量作用域 变量与作用域概述、Js词法环境、with/catch对作用域的影响

闭包

3.14.闭包 闭包概念、闭包原理、闭包应用

面向对象

3.15.简介,面向对象概述、自定义对象及属性创建、this

3.16.原型,原型、原型继承、原型链

3.17 JS面向对象, 全局变量、信息隐藏、封装、继承(类继承、原型继承)

第四章:文档树

4.1 .文档树,dom范围,节点类型,节点关系,getElements,children,sibling HTML文档树

4.2.节点操作,节点操作

  • getElementById,getElementsByClassName,getElementsByTagName,querySelector(All),createElement,innerHTML,innerText,appendChild,insertBefore,insertAdjacentELement(HTML),removeChild,replaceChild

4.3.属性操作,属性操作 getAttribute,setAttribute,datalist

4.4.样式操作,样式操作 className ,classList,style,cssText

4.5.事件,事件流 事件流的补充说明 capture、target、bubble

4.6.事件注册,事件注册的补充说明 事件注册、取消事件注册、事件触发;事件对象;阻止事件冒泡、阻止默认事件 有时我们不希望冒泡或默认的事件发生,这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。 可以通过以下三种方法做到不同程度的阻止。

A:return false --->In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中,可以阻止默认事件和冒泡事件。
B:event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。
C:event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中,可以阻止冒泡但是允许默认事件的发生。
event.stopImmediatePropagation() 如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行. 如果某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用), 该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

4.7.事件类型,事件类型的补充说明 DOM事件分类及继承关系;鼠标事件类型、鼠标事件对象、鼠标事件举例;键盘、输入、焦点事件类型、事件对象、事件举例;其他常用事件介绍与举例 4.事件代理,事件代理的补充说明 事件代理原理、事件代理例子、事件代理优缺点

第五章:数据通信

5.1.http协议,http协议中的头信息字段及应用

5.2.ajax 添加CORS和Frame代理的原理链接 ajax(xhr2,跨域),CORS,jsonp

第六章:数据存储

6.1.cookie,上传代码示例 cookie

6.2.storage,localStorage、sessionStorage

第七章:动画,音频、视频,canvas,BOM

7.1.动画 上传动画的DEMO代码 setInterval, setTimeout, requestAnimationFrame(),幻灯片切换动画实例

7.2.音频、视频 添加多媒体兼容性列表、多媒体相关事件列表、WebAudio API audio和video常用属性、方法和事件

7.3.canvas 添加Mozilla官方教程 介绍canvas基本用法,用太阳系动画的例子简单介绍下Canvas的常用API

7.4.BOM,Screen,navigator,location,history对话框,窗体互操作,load,beforeunload,scroll,resize等事件

第八章:表单操作、列表操作

8.1.表单元素,对表单元素的补充说明,DEMO下载(附件),表单元素介绍及应用,input、select、textarea

8.2.表单验证,表单验证属性、接口、事件、应用

8.3.表单提交,表单提交属性、接口、事件、应用

8.4.表单应用,案例讲解表单的综合应用

8.5.列表操作,列表的显示、添加、删除、更新、选择操作,面向视图编程和面向数据编程方式的实现对比

第九章:前端性能优化与前端发布

第十章:模块化

第十一章:基础面试题

1.0 为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前?

1.1 JS常用函数

1.2 JS闭包与原型链

1.3 正确使用“use strict”

1.4 函数调用的角度理解call

1.5 JS原生编解码函数

1.6 es5与es6标准

1.7 new的过程做了什么或者https://www.tuicool.com/articles/rEJN7n6

1.8 js函数与object或者:https://www.cnblogs.com/daishuguang/p/3978409.html

 

进阶知识 – 升职加薪

第十二章:JavaScript系列

进阶知识 ES6、ES7

2.1 JavaScript跨域请求的方方面面

2.2 异步回调之Promise对象

2.3 JS模板引擎之JST语法

2.4 AMD与CMD规范-javascript模块化

2.5 如何理解function

2.6 ES6模板字符串

2.7 异步promise

2.8 vue与angular与react

2.9 20行实现字符拼接模板

2.10 基于ES6标签模板实现事件绑定与数据监听

2.11 ES6黑科技之拆箱与装箱

2.12 touch点击穿透与click

2.13 Javascript中的Map和WeakMap对象什么区别

2.14 关于Throttle: JavaScript 节流函数 Throttle 详解
Debounce and Throttle: a visual explanation
函数节流(throttle)与函数去抖(debounce)

框架混杂

3.1 jQuery的细枝末节

3.2 jquery笔记deferred

3.3 jQuery数组操作、克隆、伪类选择器

3.4 深入浅出React

3.5 Angularjs 双向绑定机制解析

3.6 Scope和Digest

3.7 全面理解虚拟DOM,实现虚拟DOM

3.8 谈谈因Vue.js引发关于getter和setter的思考

NodeJS

4.1 NodeJS/Express运行实例

4.2 Grunt/Gulp工具

4.3 NodeJS 网络爬虫

4.4 NodeJS的buffer使用总结

4.5 NodeJS+mongoDB部署到Linux

4.6 基于Nodejs创建https服务

4.7 发布或删除Node模块到NPM社区

第十三章:HTML系列

5.1 iframe的方方面面

5.2 浏览器兼容性经验笔记

5.3 Canvas图像处理和滤镜特效

5.4 WebRTC相关的canvas与video

5.5 WebStorge使用

5.6 手机网页开发问题集锦

5.7 管理history之pushState、replaceState

第十四章:CSS系列

6.1 伪类使用技巧

6.2 SCSS/SASS编译

6.3 两端对齐

6.4 高性能CSS动画

第十五章:前端优化

7.1 Web前端性能优化总结

7.2 前端工程师必看网站

7.3 关于CSS选择器性能

7.4 实现路径动画SMIL或offset-path和canvas

  1. 使用 Service Workers提升体验
  2. WebStorge使用
  3. indexDB

第十六章:前端测试

8.1 mocka + chai

8.2 nightwatch

8.3 nightmare

第十七章:其他

9.1 浏览器工作原理

9.2 前端构建C语言解释执行环境调研

9.3 http协商缓存VS强缓存 或者: https://developers.google.cn/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

9.4 浏览器线程理解与microtask与macrotask

11 前端面试STAR法则

11.1 前端面试应该怎么准备

11.2 一些面试题

大前端资源合集(转)

 

代码练习

第十九章:入门代码练习

  1. 前端入门学习案例1 – 致敬卓别林
  2. 跳舞的机器人

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » 前端工程师自学面试找工作必备知识

赞 (9) 打赏

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏