知识结构体系

140 阅读9分钟

HTML与CSS

DOM操作与性能问题

  • 页面需要渲染一万个dom元素,如何提升页面性能?
  • 页面需要操作一万个dom元素,如何提升页面性能?

事件冒泡和事件委托

  • 事件委托到父节点上或者documnet中,哪个更好?

虚拟DOM的设计

页面布局原理

常见页面布局的技巧

浏览器的布局过程

Javascript

Javascript 的原型和继承

对单线程 Javascript 的理解

异步事件机制

作用域与闭包

this 与执行上下文

对 Eventloop 的理解的区别

ES6/ES7相关的语法

浏览器相关

浏览器的同源策路

浏览器的缓存相关

浏览器加载顺序

浏览器的渲染原理

浏览器事件

网络相关

一个完整的HTTP请求过程

HTTP协议相关

Node.js

Node.js 模块与 API

用作服务端的 Node.js

安全相关

前端安全

  • 前端安全中,需要注意的有哪些问题
  • XSS/CSRF是怎样的攻击过程,要怎么防范
  • 除了 XSS 和 CSRF,你还了解哪些网络安全相关的问题呢

其他web安全

算法与数据结构

算法相关

常见的数据结构

计算机通用知识

计算机资源

编程与设计模式

前端框架与工具库

前端框架

其它前端工具库

小程序相关

Node.js 与 服务端

技术选型

应用场景

性能优化

前端通用性能优化

  • 有做过性能优化相关的项目吗,具体的优化过程是怎样的/优化效果是怎样的
  • 常见的前端页面性能优化包括哪些内容
  • 如何理解项目的性能瓶颈/什么时候我们需要对一个项目进行优化

具体的性能优化方案

项目角度性能优化

www.alloyteam.com/2019/10/h5-…

  • 首屏性能提速
    • 按需加载/懒加载预加载
    • 秒看
    • SSR 直出
    • 客户端容器化
    • 客户端离线化
  • 网络请求优化
    • CDN 优化
    • 缓存优化
    • 使用 HTTP/2
    • 资源压缩(Gzip)
    • 请求优化(合并请求、域名拆分、减少 DNS 查旬时间)

前端工程化

构建工具和脚手架

前端模块化

Webpack

代码编译和构建

自动化/流程化实践

持续集成 CI 和持续部署 CD

自动化流程

  • 你们的代码有写单元测试自动化测试吗,为什么
  • 前端代码支持自动化发布吗,如何做到的
  • 生产环境的代码如何支持灰度发布和快速回滚自动化流程
  • 在搭建自动化、流程化的过程需要投入不少人力,在业务进度同样吃力的场景下,怎么平衡人力投入问题

多人协作规范

代码规范

  • 怎么强制进行 Code Review
  • 有遇到代码习惯差异的问题吗,如何解决
  • 有哪些常用的代码校验的工具
  • 代码有使用 Elint、prettier 这些工具吗,谈谈对这些工具的看法

开发流程

  • 多人开发过程中,代码冲突如何解决
  • 项目中有使用 Git 吗?介绍一下 Git flow 流程开发流程
  • 如果项目频繁交接,如何提升开发效率

开发效率提升

  • 做了很多的管理端 H5, 有考虑过怎么提升开发效率吗
  • 你的项目里,有没有哪些工作是可以用工具完成
  • 项目中有进行组件和公共库的封装吗
  • 如何管理这些公共组件/工具的兼容问题
  • 日常工作中,如何提升自己的工作效率

前端监控相关

数据上报

  • 发生异常,要怎么快速地定位到具体位置
  • 业界常见的埋点方案包括哪些
  • 页面数据如何进行合理的上报,而不影响核心功能

实时监控

  • 日常开发过程中,怎么保证页面质量

  • 版本发布有进行灰度吗?灰度的过程是怎样的

  • 版本发布过程中,如何及时地发现问题,需要关注哪些数据

  • 如何观察线上代码的运行质量