本篇文章立足面试题,所以会梳理各个模块的题目出来.
从前端技术的广度到深度进行技术的梳理,技术广度对应相应的技术深度,期望能够达到更高的技术层次.
目录
一. 技术广度
1. 传统的 web 前端
2. 各种小程序
3. 混合开发
4. Node.js
5. 桌面端
二. 技术广度基础上的技术深度
1. 传统的 web 前端
(1). html
(2). JavaScript
(3). css
(4). 相关的框架
2. 各种小程序
(1). 微信小程序基础
(2). 小程序相关框架
3. 混合开发
(1). 混合开发技术基础
(2). 混合开发框架
4. Node.js
(1). Node.js 基础
(2). Node.js 框架
三. 优化
(1). 性能优化
(2). 安全优化
四. 架构
(1). web 前端的架构
一. 技术深度
1. 传统的 web 前端
核心技术依然是前端的三大基础,html,JavaScript,css.
传统的技术领域是 pc 端的项目,现在更多的是移动端的 h5
2. 各种小程序
以微信小程序为代表的小程序,类似于 PWA 应用,依托于一些超级 APP,提供轻量化的,类似原生应用功能的应用,依然使用 web 前端技术,成为了 web 前端的一个技术方向.
3. 混合开发
以混合 APP 的开发为代表, 发展出来很多技术框架.
底层上以传统前端技术为基础,有 Cordova,RN,weex,Dcould 等. 还有全新的框架 flutter,是谷歌全新开发的框架,它可以开发 APP,web,甚至是服务端项目.
4. Node.js
前端已经深度延伸到后端领域了, Node.js 就是其中的代表.
js 语言单线程,事件循环机制等先天优势,使得 js 处理高并发,低 IO 的性能很出众,因此 Node.js 采用 js 语言的有点,并未 js 新增服务端语言功能,目前能够成功胜任后端项目,已被各大厂使用良久.
Node.js 发展出来很多框架,express,koa,egg 等等等,都非常优秀,值得学习
5. 桌面端应用
采用 web 前端技术,前端已经进入桌面端应用领域了.
目前 js 借助 Electron 就能很好的开发桌面端应用,vscode 就是完美的例子.
二. 技术广度基础上的技术深度
大前端已经包含很多领域了, 在 pc 端,移动端,小程序,混合开发技术,后端 Nodejs 等领域都有着大量的应用.
1. 传统的 web 前端
(1) html
- html 是什么?
- src 和 href 的区别
- 对 HTML 语义化的理解
- script 标签中 defer 和 async 的区别
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- HTML5 有哪些更新
- DOCTYPE(⽂档类型) 的作⽤
- 常⽤的 meta 标签有哪些
- 说一下 web worker
- head 标签有什么用,其中有什么标签不可少
- canvas 和 svg 有什么区别
- title 和 h1 的区别, b 和 strong 的区别, i 和 em 的区别
- img 的 srcset 的作用是什么?
- HTML5 的离线存储怎么使用,原理是什么,怎么更新?
- 渐进增强和优雅降级的区别
- iframe 有什么优点和缺点
- viewport 所有属性 ？
- h5 的 meta 标签都有哪些
(2) JavaScript
- JavaScript 有哪些数据类型，它们的区别？
- 数据类型检测的方式有哪些
- 判断数组的方式有哪些
- null 和 undefined 区别
- typeof null 的结果是什么，为什么？
- intanceof 操作符的实现原理及实现
- 为什么 0.1+0.2 ! == 0.3，如何让其相等
- 如何获取安全的 undefined 值？
- typeof NaN 的结果是什么？
- isNaN 和 Number.isNaN 函数的区别？
- == 操作符的强制类型转换规则？
- 其他值到字符串的转换规则？
- 其他值到数字值的转换规则？
- 其他值到布尔类型的值的转换规则？
- || 和 && 操作符的返回值？
- Object.is() 与比较操作符 “===”、“==” 的区别？
- 什么是 JavaScript 中的包装类型？
- JavaScript 中如何进行隐式类型转换？
- "+"操作符什么时候用于字符串的拼接？
- 为什么会有 BigInt 的提案？
- object.assign 和扩展运算法是深拷贝还是浅拷贝，两者区别
