目录

自学前端我该何去何从

“我做前端1年了，能做事但总觉得基本功很不扎实，想换份工作面了两家发现问的一些基础知识自己都不会，工作之余我该如何做自我提升，才能让自己更有竞争力“

社群里不少做前端的朋友问过我这个问题，我内心很想说建议你来谷里回炉重造，嘴上还是讲一些大致的、初略的、方向性的建议。其实想要基本功更扎实，把缺漏的知识通过各自途径补充起来。

这里罗列了具体的知识点，也是大大小小公司面试时必问的知识。你可以把它看成无聊的面试刷题，也可以看成查缺补漏的自学路线，或者看作自己基本是否扎实的检测。

HTML相关

  1. DTD的作用是什么？什么是怪异模式？什么是标准模式？二者有什么差别（举例）？产生的历史原因是什么？使用时需要注意什么？
  2. HTML5是什么？有哪些新特性？新增了哪些语义化标签？新增了哪些表单元素？和h5有啥关系？
  3. 你是如何理解 HTML 语义化的？
  4. meta viewport 是做什么用的，怎么写？
  5. HTML 和 XHTML 有什么区别？
  6. 使用 data-* 属性有什么用？
  7. <script>、<script async> 和 <script defer> 的区别。
  8. 白屏和FOUC是什么？为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？有没有例外的情况？
  9. 浏览器渲染机制？什么是回流(reflow)、重绘(repaint)？
  10. 什么属性能让浏览器直接使用ES6 Module

CSS

  1. 两种盒模型分别说一下。
  2. 如何垂直居中？
  3. Flex 怎么用，常用属性有哪些？
  4. Grid布局用过吗？
  5. BFC 是什么？
  6. CSS 选择器优先级
  7. CSS 中 class 和 ID 的区别
  8. CSS reset 和 CSS normalize是什么？
  9. 浮动 (Floats)元素有哪些特性？
  10. 清除浮动说一下
  11. z-index和叠加上下文是如何形成的？在同一个层叠上下文中才能比较z-index的大小。
  12. CSS sprites是什么
  13. 字体图标和svg图标用过吗
  14. 你日常工作是如何处理浏览器兼容的？
  15. 如何为有功能限制的浏览器提供网页？
  16. 渐进增强，优雅降级是什么？
  17. 有哪些的隐藏内容的方法？
  18. 栅格系统是什么
  19. 你用过媒体查询吗？
  20. 如何优化网页的打印样式？如果设计中使用了非标准的字体，你该如何去实现？
  21. 浏览器是如何判断元素是否匹配某个 CSS 选择器？
  22. 伪元素 (pseudo-elements) 有什么用？
  23. 列出你所知道的 display 属性的全部值
  24. inline 和 inline-block 的区别
  25. relative、fixed、absolute 和 static 元素的区别？
  26. 响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
  27. 为什么提倡使用 translate() 而非 不是 absolute？
  28. 如果实现一个高性能的CSS动画效果？
  29. 圣杯布局，双飞翼布局了解吗

JavaScript

  1. JS有哪几种数据类型
  2. 变量声明提升？let、var、const的区别？
  3. ES 6 语法你平常能用到哪些？
  4. undefined和null有什么区别？
  5. Promise、Promise.all、Promise.race 分别怎么用？
  6. 这段代码里的 this 是什么？
  7. 箭头函数和普通函数有什么区别？如果把箭头函数转换为不用箭头函数的形式，如何转换
  8. 闭包是什么？
  9. 什么是跨域？有哪些方法？
  10. 图片懒加载的原理
  11. 动画有几种实现方式，性能对比
  12. 聊一聊DOM事件流、冒泡、捕获
  13. 事件委托是什么，封装一个事件委托函数
  14. EventLoop是什么
  15. 宏任务微任务是什么

手写代码

  1. 手写函数防抖和函数节流
  2. 手写Ajax
  3. 如何实现深拷贝？考虑循环引用的情况？
  4. 封装一个JSONP？
  5. 如何用正则实现 trim()？
  6. 不用 class 如何实现继承？用 class 又如何实现？
  7. 如何实现数组去重？
  8. 手写函数柯里化
  9. 实现一个new
  10. 实现bind、call、apply
  11. 数组拍平
  12. 手写发布订阅
  13. 手写Promise
  14. 斐波那契实现与优化
  15. 手写快速排序

HTTP

  1. 讲一讲TCP协议的三次握手和四次挥手流程
  2. 为什么TCP建立连接协议是三次握手，而关闭连接却是四次握手呢？为什么不能用两次握手进行连接？
  3. OSI有哪七层模型？TCP/IP是哪四层模型
  4. 传输层有哪些协议
  5. 应用层有哪些协议，常用端口
  6. 常见Http方法有哪些？使用场景分别是什么？
  7. GET与POST有什么区别？
  8. 在HTML的form 标签里，method支持哪些类型？
  9. 状态码 200、301、302、304、403、404、500、503分别代表什么？
  10. Web安全中有哪些常见的攻击方式？
  11. 一次完整的Http请求所经历哪些步骤？
  12. URI和URL的区别？
  13. HTTP请求报文与响应报文的格式？Http首部包含哪些字段？举例说明
  14. Websockt是什么？和HTTP有什么区别？
  15. 常见的鉴权方式有哪些
  16. 谈谈Session/Cookie机制，如何实现会话跟踪
  17. 谈谈JWT鉴权原理
  18. 谈谈Auth2鉴权原理
  19. 浏览器是如何控制缓存的
  20. 什么是非持久连接，什么是持久连接？
  21. 服务端推送有哪些技术
  22. 谈谈Comet（长轮询）的原理
  23. HTTPS的原理是什么？
  24. Keep-Alive: timeout=5, max=100是什么意思？
  25. HTTP1.0，HTTP1.1，HTTP2.0，HTTP3区别（HTTP1.1版本新特性？HTTP2快在哪里？HTTP3变了什么？）

打包工具

  1. 除了Webpack外你还用过哪些构建工具？
  2. Webpack与Grunt、Gulp有什么区别？
  3. Webpack的构建流程是什么
  4. 有哪些常见的Loader？他们是解决什么问题的？
  5. 有哪些常见的Plugin？他们是解决什么问题的？
  6. Loader 和 Plugin 有什么差别
  7. 有没有写过Loader
  8. 有没有写过Plugin
  9. compiler与complilation有什么区别？
  10. 有哪些代码分离的方法
  11. 什么是 Tree Shaking
  12. 如何利用Webpack来优化前端性能
  13. 如何提高Webpack的构建速度
  14. 打包文件大怎么解决

Vue

  1. watch、computed、methods区别是什么
  2. v-show与v-if区别是什么
  3. 列表遍历时key作用？
  4. Vue有哪些生命周期钩子函数？有什么用？
  5. Vue父子组件生命周期调用顺序
  6. Vue如何实现组件通信
  7. data为什么是函数
  8. Vue2数据响应式原理
  9. Vue3数据响应式和Vue2有什么不同
  10. 手写reactive实现track和trigger
  11. nextTick怎么用？原理是什么
  12. diff算法和时间复杂度
  13. Vue中的keep-alive有什么用
  14. Vuex怎么用
  15. VueRouter怎么用
  16. VueRouter中hash和history模式的原理
  17. VueRouter如何做登录跳转
  18. Vuex的原理，有哪些概念

React

  1. 什么是虚拟DOM
  2. setState更新的原理
  3. 什么是 React Context
  4. React Class 组件的生命周期
  5. 函数组件如何体现生命周期
  6. React Diff 原理
  7. React 项目引入CSS有什么方法
  8. Diff算法时间复杂度
  9. React Fiber是什么
  10. React Hooks 原理与使用
  11. Mobx/Redux/RxJS里涉及的概念
  12. React和Vue比较
  13. 有没有自己实现过React
  14. 有没有自己实现过Hooks
  15. 项目中有没有使用过TypeScript

移动端

  1. px、em、rem、vw、百分比的区别
  2. 物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么
  3. 移动端页面为什么要加<meta name="viewport" content="width=device-width">
  4. 图片高清怎么做
  5. 如何实现0.5px边框/细边框
  6. 移动端如何做适配有哪些方案
  7. 聊聊viewport缩放方案
  8. 聊聊动态REM方案
  9. 聊聊vw适配方案
  10. 300ms延时的原因和解决
  11. fastclick是什么原理

性能优化

  1. 前端性能优化经验
  2. 如何做首屏渲染优化
  3. 白屏优化
  4. 长列表优化方案
  5. HTTP2如何提升性能
  6. 懒加载、预加载、HTTP2的服务器推送都是什么

非技术问题

  1. 做个自我介绍
  2. 介绍最难的项目
  3. 项目如何做优化
  4. 如何做技术选型
  5. 单元测试做不做
  6. 有什么流程和规范
  7. 读过源码吗
  8. 有没有造过轮子
  9. 平时不写博客吗
  10. 你是怎么学前端的
  11. 你的职业规划
  12. 你有什么要问的

自荐一下我的前端系统课 ，以上内容的答案绝大多数都分散在课程的主线任务、项目、日常拓展课直播里

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com