美文网首页
前端系统知识整理

前端系统知识整理

作者: 花开有声是我 | 来源:发表于2021-10-09 17:52 被阅读0次

一、 编程基础

理解互联网产品开发流程、Web应用各部分的逻辑关系、命令行基础、Git代码管理

二、 HTML与CSS核心知识

1、掌握HTML4(5)常见标签的用法、表单的用法
2、理解CSS2(3)选择器权重、优先级、匹配顺序、继承、单位
3、两种盒模型
4、理解块、行的特性、理解边距折叠的概念
5、理解浮动的特性,会用几种方式清除浮动
6、理解BFC与各种FC的概念
7、掌握定位的用法
8、理解层叠上写文的概念
9、会使用flex布局做页面,理解flex-basis、flex-grow、flex-shrink的计算方法
10、会使用Grid布局做页面
11、 垂直水平居中的几种实现
12、会浏览器兼容处理
13、会使用页面响应式
14、会使用字体图标、svg图标
15、能灵活使用CSS3常见特效如圆角、阴影、渐变、过渡、动画

三、 浏览器的渲染原理

1、理解从url输入到用户展现发生了什么
2、了解浏览器的组成、页面渲染流程
3、理解script和css的加载阻塞解析和阻塞渲染
4、理解异步加载async和defer
5、理解白屏、无样式内容闪烁的原因

四、 JavaScript核心知识

1、掌握ES5/ES6基础语法
2、熟悉DOM操作API、熟练操作DOM
3、理解事件流机制,理解事件代理机制,能将原理熟练运用于实际效果
4、会Mock数据、会封装Ajax实现前后端交互、理解各种跨域技巧
5、理解闭包,会运用到 合适场景
6、理解JavaScript各个场景下的this
7、理解Prototype、原型链、继承的用法,会用到class封装组件
8、异步、Promise、async/await

五、 打包工具的原理、应用、简易实现

1、原生ESM实现模块化
2、会用Parcel构建项目
3、会用Webpack构建项目
4、Webpack插件、Loader的实现
5、手写简易Webpack

六、 React的应用、原理、实现

1、JSX、set State同步与异步更新、this
2、生命周期
3、列表、受控与非受控组件、Context、数据传递、错误便捷
4、Class组件和函数组件
5、React Hooks的用法、原理和简易实现
6、React中使用样式的几种方法
7、CRA搭建React全家桶项目
8、Mobx与Redux
9、ReactRouter
10、在React项目中使用TypeScript
11、React Diff原理
12、Diff算法和时间复杂度
13、实现一个简易的React

七、 Vu2(3)的应用、原理、实现

1、组件实例、生命周期
2、data、methods、computed、watch
3、Vue2和Vue3的响应式原理,手写reactive实现track trigger
4、条件、列表、事件、组件、双向绑定、单向数据流
5、Vue3组件注册、Props、Attribute、自定义事件
6、插槽、具名插槽、作用域插槽
7、爷孙数据传递Provide&Inject
8、动态组件与keep-alive
9、过渡与动画
10、使用VueCLI4搭建Vue项目
11、Vite的原理、使用
12、组合式API重构项目
13、VueRouter的原理和使用
14、Vuex的原理和使用
15、虚拟DOM与Diff算法
16、TypeScript基础
17、在Vue3项目中使用TypeScript
18、Vue2和Vue3区别

八、 HTTP与安全

1、三次握手与四次挥手
2、HTTP状态码、请求/响应有哪些字段
3、缓存的机制(重要)
4、Keep-alive与多路复用
5、Cookie与Session
6、网站鉴权机制(登录/注册)
7、HTTP2.0是什么
8、HTTPS的原理
9、CSRF攻击
10、XSS攻击

必备的拓展:

JavaScript进阶

1、常见特效如循环轮播、懒加载、瀑布流、木桶布局的原理和实现
2、ES6新特性
3、EventLoop、宏任务、微任务
4、垃圾回收机制
5、前端性能优化方案
6、虚拟长列表的原理和实现
7、二进制浮点数运算过程

设计模式

1、单例模式
2、观察者模式
3、适配器模式
4、装饰者模式

手写代码

1、手写数组去重、深浅拷贝、数组拍平
2、手写柯里化
3、实现new、bind、call、apply
4、裴波那切数列优化
5、手写防抖和节流
6、手写EventHub
7、数据响应式
8、实现缓存函数

移动端

1、物理像素、逻辑像素、CSS像素、PPI
2、viewport的原理和用法
3、移动端适配的各种适配方案
4、移动端的手势
5、实现细边框
6、300ms延时

算法

1、快速排序、插入排序、选择排序、冒泡排序
2、反转链表、链表环判断、链表相加、删除链表重复元素、合并有序链表
3、跳台阶、斐波那契数列优化、表达式求值
4、二分查找、KMP算法
5、二叉树先序、中序、后序遍历、根据先(中)序排列重建二叉树
6、求连续子串、反转字符串、最长回文子串、大数相加、最长公共前缀
7、合并两个有序数组、根据找数组累加等于和的项
8、子数组最大累加和、最长公共子序列
9、寻找第k大数

前端需要学习很多东西,做了前端开发,就需要有积极的学习心态

相关文章

  • 前端系统知识整理

    一、 编程基础 理解互联网产品开发流程、Web应用各部分的逻辑关系、命令行基础、Git代码管理 二、 HTML与C...

  • 前端知识整理

    HTML 1 新增标签 语义化标签: arcticle footer header nav section 表单控...

  • 前端知识整理-JavaScript

    目录

  • 前端知识整理-CSS

    目录:引用方式选择器流、元素、与基本尺寸块级元素内联元素盒子模型

  • 2018 前端面试准备

    前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-D...

  • Python Web 全栈开发

    需要学习的知识:python知识、操作系统知识、前端知识、数据库知识、网络知识、程序设计

  • 四年前端狗,面试被虐,如何翻身?

    课程链接 课程抢先看 课程亮点 36 个热点主题 50 讲系统性整理输出 在实战演练中掌握前端知识和编程技巧 面试...

  • 前端开发面试知识点大纲

    史上最全 前端开发面试问题及答案整理 本文旨在加深对前端知识点的理解,资料来源于网络,由本人收集整理。 前端开发面...

  • html+css+js基本使用整理

    在自学前端知识时,基本很多功能实现都是依赖百度,而没有系统的去掌握,这次的整理主要是把自己遇到的基础知识梳理一遍,...

  • CSS基础入门宝典

    最近根据项目需要,由游戏前端转成了web前端,特别的学习了一下前端的知识,整理了一下CSS基础知识,希望能帮助更多...

网友评论

      本文标题:前端系统知识整理

      本文链接:https://www.haomeiwen.com/subject/eznqoltx.html