前端开发知识点整理

  1. 云栖社区>
  2. 博客列表>
  3. 正文

前端开发知识点整理

水灵儿 2017-12-14 10:17:39 浏览418 评论2

摘要: 本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS。

目录

  • 专业技能

    • 前端理论

      • 浏览器

      • HTML

      • CSS

      • JavaScript

      • 编程通用

      • SEO 数据统计 数据分析

      • 网络基础

    • 交叉领域理论

      • 产品设计相关

      • 后端基础

    • 前端实践

      • 解决实际问题

      • 学习型项目

      • 前端工程

      • 第一阶段:框架应用

      • 第二阶段:简单自动构建优化

      • 第三阶段:JS/CSS模块化开发

      • 第四阶段:组件化开发与资源管理

      • 项目技术选型

      • 造轮子

  • 版本规划

  • 致谢

  • 联系方式

  • 结语

  • 许可

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理

    • HTML 解析器

    • CSS 解析器

    • JavaScript 引擎

    • 渲染流程

      • 加载

      • 解析(确定结构、计算样式)

      • 构建 DOM 树、应用样式

      • 绘制

      • 回流

      • 重绘

  • 浏览器调试

    • 工具

      • F12

      • 扩展插件

      • 浏览器常用快捷键

    • 调试内容

      • 元素

        • 结构

        • 属性

      • 样式

      • 脚本

        • 日志

        • 断点

        • 事件

        • 变量监听

        • 调用堆栈

      • 性能

        • snapshot

        • 耗时

      • 网络请求

        • 模拟请求

        • 审查网络

        • 模拟网络环境

      • 内存

      • 本地存储信息

        • cookie

        • local storage

        • cache

    • 调试技巧

  • 浏览器事件

    • 常见事件

      • 鼠标事件

      • 表单元素事件

      • 键盘事件

      • 文档事件

      • CSS 事件

      • ……

    • 事件处理、添加、移除

  • 浏览器任务调度机制

    • micro queue

    • macro queue

  • 浏览器兼容性

    • 各平台浏览器的坑(家家有个难填的坑,有的坑深,有的坑浅)

      • 移动端浏览器

        • UC

        • Safari

        • 微信浏览器

        • 百度

        • ……

      • PC 端浏览器

        • Chrome

        • Firefox

        • IE

        • Edge

        • ……

      • 小程序

    • 不同浏览器内核差异

      • CSS 私有属性前缀(注:建议使用 postcss 自动化补全)

      • Polyfill

    • HTML、CSS、Javascript 特性支持度

      • MDN

      • Can I use ?

  • 常见问题

    • 请求跨域

    • iframe 跨域通信

    • 各种兼容性问题

    • 网页加载速度慢

    • 按钮点击没反应……

HTML

吃土小2叉:据说 HTML 和 CSS 一起学习体验最佳哦

  • 语法 & 语义

    • !DOCTYPE HTML 文档标准

      • 怪异模式

      • 标准模式

    • head

      • meta 元数据标签

      • 网页描述

      • 设备描述

      • HTTP 请求描述

      • HTTP Client Hints

    • body

      • 装饰型标记(不推荐、部分已废弃)

      • 功能型标记

        • 无语义容器(div、span)

      • 用户交互(交互型标记)

        • 输入框

        • 选择器

        • 多选框

        • 单选框

        • 按钮

      • 数据可视化(展示型标记)

        • 列表

          • 定义列表

          • 无序列表

          • 有序列表

        • 表格

        • 结构化数据标记、微数据

        • 多媒体

          • 图片

          • 视频

          • 音频

        • SVG、Canvas

        • 文章(正文、摘要、段落、章节、前言、结语、引用)

  • 规范

    • 标签类型

    • HTML 代码规范

    • HTML 使用规范(标签嵌套规则)

  • 可访问性、无障碍体验

  • 常见问题

    • 图片空 src 导致页面加载两次

    • iframe 空 src 导致无限循环加载本页面

1e9952569fe453a87a45689119a38d7b8adc6718

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉:用设计师的思维去理解 CSS,用程序员的思维去写 CSS

  • 语法(CSS 从入门到放弃)

    • 基本用法

    • 选择器

      • 基础选择器

      • 组合选择器

      • 伪类选择器

    • 媒体查询

    • 简写属性

    • 注释

    • 属性运算 calc()

  • 规范(编写可读性良好的 CSS)

    • 用例规范

      • 权限控制

      • 最佳实践

      • 不良习惯

    • 格式规范

      • 风格

      • 复用

      • BEM 规范

  • 逻辑特性(在 CSS / Less 中运用 OO 思想和设计模式)

    • 权重(优先级)

    • 作用域

    • 封装(mixins)

    • 组合(mixins+)

    • 扩展(:extend)

    • 继承(mixins)

    • CSS 变量、Less 变量

    • 模块化(import)

  • 视觉设计(单一状态设计)

    • 布局(分久必合、合久必分)

      • 盒模型(高度、宽度、边框、外边距、内边距、溢出控制)

      • 定位方式

      • 层叠上下文(z-index)

      • display 类型(table、inline、inline-block、block、flex、grid)

      • 浮动

      • 伪元素::after、:before

    • 字体排印(厉害了 word 哥)

      • 字体(字体族、网络字体)

      • 文本(删除线、下划线、斜体、粗细、字号)

      • 段落(行高、缩进、断句方式、换行方式)

      • 对齐

      • 方向

    • 装饰(神说,要有光)

      • 颜色

      • 背景

      • 边框(border、outline)

      • 圆角

      • 阴影

      • 渐变

      • 透明度

      • 变形(旋转、缩放、矩阵变化)

  • 交互设计(多状态设计)

    • hover 状态

    • 结合 Javascript

    • CSS 动画

    • active、checked 状态

    • 过渡效果

    • 动画关键帧

    • 动画(运动和静止是对立的统一)

    • 反馈

    • 引导

    • 互动

  • 多设备设计

    • 最小固定宽度布局

    • 百分比布局

    • 栅格布局、弹性布局

    • js + rem 方案(rpx)

    • 媒体查询

    • 响应式设计(多套代码,多种设备)

    • 自适应设计(一套代码,多种设备)

  • 常见问题

    • 权重控制

    • 嵌套层级

    • 语义性

    • transition “失效”?

    • z-index “失效”?

    • 视觉还原度

    • 调试技巧

    • 属性“失效”问题

    • 外边距合并

    • 边框 1px 问题

    • 垂直居中

    • 大屏幕 rem 小屏幕 px

    • 图片适配

    • 可维护性

  • 扩展内容

    • 预处理器:Less、Sass

    • 后处理器:postcss

    • 小程序的 WXSS

    • Weex、RN 中的 CSS

JavaScript

吃土小2叉:至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了:《The Modern JavaScript Tutorial》http://javascript.info/ ,推荐阅读。

  • JavaScript 标准

    • 严格模式

    • 兼容模式

  • 开发工具

    • IDE

    • 轻量编辑器

  • 基础语法

    • 数据类型

      • 基本数据类型 number、 string、 booleannullundefinedobjectsymbol

      • 数据类型检测

      • 解构赋值

        • 数组

        • 对象

      • date 与时间

      • JSON

        • 格式说明

        • 序列化

        • 反序列化

      • 数组

        • 数组操作(增、删、改、遍历、复制)

        • 多维数组

    • 变量

      • 声明 varletconst

      • 声明提升

      • 作用域

    • 逻辑控制

      • 循环

      • 分支

      • 判断

    • 对象(基础部分)

      • 对象操作(增、删、改、查、复制)

      • Symbols

      • 类型转换

      • 垃圾回收机制

      • 对象方法中的 this

      • new

    • 函数

      • 函数默认值

      • 函数声明

      • 立即执行函数

      • 箭头函数

    • 运算符

      • 数值运算

      • 逻辑运算

    • 事件

      • 浏览器事件

      • 冒泡、捕获

      • 事件捕获

      • 浏览器默认行为

    • 文档

      • DOM 树

      • 节点

        • 节点类型

        • 节点标签

        • 节点内容

      • window 对象

    • DOM 操作

      • 元素节点(增、删、移、换、复制)

      • 元素属性(增、删、改、查)

      • 文本内容(增、删、改、查)


    • 网络请求

      • ajax(回调函数)

      • Promise

      • async、await

  • 深入细节

    • 对象、类、继承

      • 属性标记与属性描述

      • 原型、原型链

      • 继承

      • 属性定义

      • 对象混合

      • 类型检测

    • 数据类型

      • 基本类型

      • 复杂类型

    • 函数进阶

      • 递归、调用堆栈

      • 闭包

      • 函数绑定、上下文

      • 剩余参数、扩展语法

      • 函数对象

      • 任务调度:定时器

      • 柯里化

      • 深入箭头函数

      • 函数式

    • 错误处理

      • 异常捕获

  • 代码质量

    • 注释

    • 相关工具

      • ESLint、JSLint

      • Standard.js

      • Prettify

      • 自动化测试工具:Jest、Mocha

    • 用例规范

      • 最佳实践

      • 不良习惯

    • 格式规范

      • 风格

  • 正则表达式

    • 普通字符、转义字符

    • 元字符

    • 字符类

    • 分支条件

    • 分组

    • 反义

    • 贪婪与懒惰

    • 后向引用

    • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读:来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

  • 达标(语法、词法)

    • 正确拼写

    • 准确用词

    • 注意单复数

    • 不要搞错词性

    • 处理缩写

    • 用对时态和语态

  • 熟练(语义、可用性)

    • 单一职责

    • 避免副作用

    • 代码一致性

    • 合理设计函数参数

    • 合理运用函数重载

    • 使返回值可预期

    • 固话术语表

    • 遵循一致的代码风格

  • 卓越(系统性、大局观)

    • 版本控制

    • 确保向下兼容

    • 设计扩展机制(易于扩展)

    • 控制 API 的抽象级别

    • 设计模式

    • 注释

    • DRY

    • 编码规范

    • 解耦

    • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉:尽人事,听天命(天者,用户也)

  • SEO

    • 影响因素

      • 相关性

        • title

        • 关键词密度

      • 权威性

        • 外链

        • 内链

        • 域名年限

        • 网站收录

        • 安全性

      • 用户体验

        • 广告

        • 加载速度

        • 内容质量:内容真实性、内容原创性、内容有益性

        • 用户反馈

    • 不良行为

      • 堆叠关键词

      • 抄袭、作弊

      • 大量低价值外链

      • 广告、木马、病毒 

  • 数据统计

    • 工具

      • 统计、埋点工具:Google Analytics、百度统计、Piwik……

      • 站长工具:Google Webmaster 、百度站长工具

      • 其他工具:百度指数、SEO 各项指标助手工具……

  • 数据分析

    • 工具

      • 同数据统计工具

      • 脑子是个好东西

    • 分析方法

      • 归因、排查

      • 细分

        • 来源、渠道

        • 用户属性

          • 人口统计学

          • 用户终端、型号

        • 用户行为

          • 站内搜索关键词

          • 自定义事件(埋点事件)

          • 浏览频率、时间、跳出页

          • 访问内容

          • 访问漏斗

        • 站点属性

      • 对比

        • 时间维度

        • 统计指标维度

    • 目标设置

      • 转化路径

      • 转化目标

      • 转化价值

网络基础

此处是不是又要出现,经典问题:当你在浏览器输入 URL 并回车(非单页应用的传统网站),直到你看见这个页面,此时经历了哪些过程(略去浏览器渲染环节)。

  • TCP / IP

    • HTTP

      • 请求

        • 请求头

        • 请求正文

      • 响应

        • HTTP 状态码(2xx、3xx、4xx、5xx)

        • 响应头

        • 响应正文

      • 过程:三次握手

    • HTTP2

    • HTTPS

    • Web Socket

    • CORS

    • Session、Cookie

    • RESTful / RPC

  • DNS 、域名、IP

    • 域名劫持

    • 内网、公网地址段

  • 缓存

    • 服务端缓存

    • 客户端缓存

  • 常用工具

    • F12 Network Panel

    • Advanced REST client

    • EditThisCookie

    • Wireshark

    • Fiddler、Charles

  • 常见问题

    • HTTP 迁移到 HTTPS 站点部署问题

      • HTTPS 证书部署

        • TLS 版本问题

        • 证书作用域(是否包含子域名)

        • 证书、秘钥配置文件

      • 资源加载同协议

        • error 级

          • 外部 JavaScript 加载

          • iframe

        • warning 级

          • img

          • CSS

      • 网络请求同协议

        • error 级

          • ajax

          • jsonp

交叉领域理论

吃土小2叉:学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉:学会优雅地质疑设计 => 给用户更好的体验

  • 与设计师的沟通、协作

  • 设计理念 => 用户体验

    • 一致性

    • 可用性

    • 易用性

    • 反馈

  • 提升审美

    • 单反穷三代 // 单身狗 XX:也许学好摄影就能追到女神了呢?

    • 竞品分析 // 知己知彼,重视对手

  • 常用工具

    • 雪碧图生成工具(http://www.spritecow.com/)

    • 图片有损压缩工具(https://tinypng.com/)

    • .psd 智能标注(http://www.fancynode.com.cn/pxcook)

    • 强烈建议设计师使用 Sketch 进行设计

后端基础

吃土小2叉:只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 (迷之微笑)

XX 的观点:时刻谨记编程语言只是一种工具,分别有不同适用的场景罢了。理性、客观、结合实际。

  • 与后端开发工程师的沟通、协作

    • 明确分工

    • 文档先行

    • mock 数据

  • 简单了解一门后端语言 // XX 注:如果你已经自己搭建了个人博客站点,后端语言的语法层面足够了。

  • 了解前端路由与后端路由的区别

  • 简单应用数据库(MySQL)

    • 增、删、改、查

    • 备份、导出

  • 了解作用与概念

    • GraphQL

    • Nginx

    • Redis

    • 负载均衡

    • CDN

    • 数据库主从备份

  • 计算机相关基础知识 // 有时间多重温(预习)重温(预习)

    • 数据库

    • 操作系统

    • 编译原理

    • 离散数学

    • 数字逻辑

前端实践

实践是检验真理的唯一标准,在此引用 Vue.js 作者尤雨溪的一段话:

技术方案都是先有问题再有思路同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉:写下这篇文章的时候恰逢今年高考,很感谢高一的英语老师当时给我们布置的一个作业:整理考试错题集。因为经历过太多次,同样类型的题目这次错,下次仍然错。而我又是一个比较较真的人,每次整理错题的时候,不单单只记录做错的问题和答案,还会去分析这里的考点,所涉及的知识点,去试着换位思考如果我是出题人,会怎么出这道题,考哪些知识点可以坑一下考生。而这一过程,又有着考试做错题的心理愧疚感,记忆会特别深刻。另一方面,在复习阶段,也可以更具有针对性地复习,为自己减压。要尽量把大脑当成 CPU 来用,或者倒排索引,而非硬盘、数据库。

Learn from your practice.

而在编程过程中,也是比较接近。我们可以记录下自己犯过的错误,不良的编码案例。同时,我们也可以像经常收集一些名人名言、固定搭配等写作套路一样,去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化,那就更好了。

Learn from your worry & adversity.

另外,抱着积极的态度强大的内心去面对开发过程中的任何困惑、困境,都是助力快速成长的好机会。

前阵子我在 GitHub 上也开了一个项目,专门记录、收集我最近在前端开发过程中遇到的一些问题,有已经解决的,也有仍待解决的。

https://github.com/xunge0613/front-end-practice-collections

目前整理的已解决问题有:

仍待解决的问题:

  • 如何优雅地监听元素高度变化?

  • 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论,包括:

  • 如何解决问题?

  • 如何提问题?

后续我也会不断完善这一块内容。重点是:形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是:

拥有一个完全属于自己的博客、域名、网站、服务器,并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title:前端工程师

以下引用张云龙 dalao 的文章:前端工程 —— 基础篇

第一阶段:库/框架选型 第二阶段:简单构建优化 第三阶段:JS/CSS模块化开发 第四阶段:组件化开发与资源管理

由于先天缺陷,前端相比其他软件开发,在基础架构上更加迫切的需要组件化开发和资源管理,而解决资源管理的方法其实一点也不复杂:

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段:框架应用

吃土小2叉:只要是一个文档友好的框架,遇到不会的问题,去翻翻文档,如果解决不了,再去认真翻一次。因此,第一阶段,亦可认为是:面向文档编程

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线:

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

  • jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档

    • 核心

      • 对象访问

      • 数据缓存

      • 队列控制

      • 插件机制

      • 多库共存

    • 事件

      • 页面载入

      • 事件处理

      • 事件委托

      • 事件切换

      • 常用事件

        • 鼠标事件(click、dbclick、hover、mouse*……)

        • 键盘事件(key*……)

        • 表单事件(blur、change、focus、submit、select)

        • 浏览器事件(error、resize、scroll)

        • 触摸事件(touch*……)

    • 选择器

      • 基本

      • 组合

      • 伪类

      • 内容

      • 可见性

      • 属性

      • 表单

    • 筛选器

      • 过滤

      • 查找

      • 串联

    • CSS

      • CSS

      • 位置

      • 尺寸

    • DOM 操作

      • 元素节点(增、删、移、换、复制)

      • 元素属性(增、删、改、查)

      • 文本内容(增、删、改、查)

    • 网络请求

      • Ajax

      • when

      • deferred

    • 特效

      • 基本(显示、隐藏)

      • 滑动

      • 淡入淡出

      • 自定义动画控制

    • 辅助工具(类似于 lodash)

      • 数组、对象操作

      • 函数操作

      • 字符串操作

      • 浏览器及特性检测

      • 类型检测

      • JSON 序列化

  • artTemplate

    • 模板引擎

  • Vue.js

    • MVVM 思想

    • 声明式渲染

    • 条件与循环

    • 处理用户输入

    • 数据绑定、响应式数据

    • 组件化应用构建

      • 组件间通信

      • 状态管理

  • lodash.js // 提供各种 helper 方法,专注于数据处理

    • 数据类型

      • 数组

      • 集合

      • 日期

      • 函数

      • 数值

      • 对象

      • 字符串

    • 语言特性    

      • 类型检测

      • 类型比较

      • 复制

    • 数学运算

    • 辅助工具


XX:

  • 学你会用 artTemplate 以后,会发现 Vue.js 很容易上手

  • 当你学会 Vue.js 以后,你会发现小程序真的很容易上手

第二阶段:简单自动构建优化

专注业务开发

  • 工具

    • Grunt

    • Gulp

  • 预处理

    • Less

    • Babel

    • TypeScript

  • 后处理

    • PostCSS

  • 校验

    • ESLint

  • 压缩

    • 代码

    • 图片

  • 合并

  • 打包

  • 自动化测试

  • mock 接口调试

第三阶段:JS/CSS模块化开发

张云龙:分治、分治、分治

  • AMD

  • CommonJS

  • UMD

  • ES6 Module

  • ……

第四阶段:组件化开发与资源管理

核心目的:提高开发效率 & 兼顾运行性能

  • 分治、解耦、自由组合、就近维护

  • Vue.js 组件化开发

    • 抽象业务逻辑组件

      • 组合基础 UI 组件形成业务组件

      • 独立编写业务相关组件

      • ……

    • 定制基础 UI 组件库

      • 轮播图组件

      • 弹窗组件

      • ……

  • 资源管理

    • 推荐阅读:静态网页资源的管理和优化

项目技术选型

理性、客观、避免偏见

  • 预计投入

    • 开发资源

      • 时间

      • 人手

      • 技术储备

    • 项目资源


    • 产品资源

      • 用户群体

        • 浏览器兼容性

        • 浏览器局限性

        • SEO 问题

  • 期望回报

    • 开发人员自我成长

    • 公司技术栈

    • 开发效率

    • 可维护性

    • 性能、稳定性

    • 易于测试

    • 易于把控项目周期

  • 应急预案

    • 兼容方案

    • 回退方案

    • A / B Test

    • 渐进增强

    • Plan B

造轮子

吃土小2叉:要么站在巨人的肩膀上,要么自己成为巨人

未完待续……

  • UI 组件库

  • 前端工具

  • 前端微服务

  • 前端框架

    • (以下内容是 XX 的 YY 内容)

    • 学习优秀框架源码

    • 仿写核心内容

    • 掌握山寨一个框架的套路

    • 发现问题

    • 具备扎实的前端基础 + 运气 + 灵感

    • 解决问题

===== 当前版本分割线 =====


v 0.0.3 内容迭代

  • 更新 编程通用

    • 条目更新

  • 更新 JavaScript

  • 更新 前端实践

    • 新增引导语

  • 更新支付宝图标、微信图标……


v 0.0.2 内容迭代

  • 新增 后端基础

  • 新增 前端工程 第一阶段 jQuery、Vue.js 介绍

  • 新增 常见问题

  • 更新 前言

  • 更新 网络基础

  • 更新 学习型项目

致谢

  1. 前端工程 —— 基础篇 by 张云龙

  2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队

  3. The Modern JavaScript Tutorial by Ilya Kantor

  4. jQuery 1.4 中文文档 by 张鑫旭

  5. MDN Web 开发 // 这里有个小彩蛋,这个页面右上角有某 XX

结语

作为一个老菜鸟,我只是知识的搬运工

本文大多讨论的是有哪些知识点(what),至于如何学习与应用这些知识点(how & why),敬请期待我之后的一系列文章,目前已完成一些雏形,仅供试阅:

  • Growth CSS

  • Growth Vue

本人转载自 https://github.com/xunge0613

用云栖社区APP,舒服~

【云栖快讯】新年大招!云栖社区为在读大学生/研究生准备了一份学(huan)习(zhuang)攻略,发布博文即有机会赢得iPad mini 4等大奖,学习换装两不误!欢迎报名参与~  详情请点击

网友评论

1F
萧熏儿

收藏收藏~

2F
安国通

收藏

水灵儿
文章148篇 | 关注65
关注
业内领先的面向企业的一站式研发提效平台,通过项目流程管理和专项自动化提效工具,能够很好地支持... 查看详情
大数据开发套件(Data IDE),提供可视化开发界面、离线任务调度运维、快速数据集成、多人... 查看详情
云数据库PPAS版,是阿里云与EnterpriseDB公司合作基于PostgreSQL高度兼... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
2017阿里千余份技术干货大盘点

2017阿里千余份技术干货大盘点