前端开发知识点整理

Growth Front-End Knowledge Summary

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

初衷。写这篇文章主要有以下几个初衷:

  • 梳理知识体系。网上虽然有许多类似的内容,但每个人都有各自独特的思维方式,适合自己的才是最好的。
  • 探索不足之处。明确自己到底掌握了哪些,哪些本应掌握但还没有学习。
  • 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。
  • 希望借此激发大家的一点思考。我们都在路上,我不是成功的例子,我写下我的思考,希望借此激发大家的一点思考。
  • 一个梗。自 2012 年以来,我知乎上获赞最多的答案却是引用他人的答案……有点尴尬:《一名合格的前端工程师的知识结构是怎样的?》

目录

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理
    • 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 导致无限循环加载本页面

Alt text

上图据说是 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)
      • 圆角
      • 阴影
      • 渐变
      • 透明度
      • 变形(旋转、缩放、矩阵变化)
  • 交互设计(多状态设计)
    • 动画(运动和静止是对立的统一)
      • 过渡效果
      • 动画关键帧
    • 反馈
      • active、checked 状态
    • 引导
      • 结合 Javascript
      • CSS 动画
    • 互动
      • hover 状态
  • 多设备设计
    • 响应式设计(多套代码,多种设备)
      • 媒体查询
    • 自适应设计(一套代码,多种设备)
      • 最小固定宽度布局
      • 百分比布局
      • 栅格布局、弹性布局
      • 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
    • 轻量编辑器
  • 基础语法
    • 数据类型
      • 基本数据类型 numberstringbooleannullundefinedobjectsymbol
      • 数据类型检测
      • 解构赋值
        • 数组
        • 对象
      • 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:也许学好摄影就能追到女神了呢?
    • 竞品分析 // 知己知彼,重视对手
  • 常用工具

后端基础

吃土小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

造轮子

要么站在巨人的肩膀上,要么自己成为巨人

未完待续……

  • UI 组件库
  • 前端工具
  • 前端微服务
  • 前端框架
    • (以下内容是 XX 的 YY 内容)
    • 学习优秀框架源码
    • 仿写核心内容
    • 掌握山寨一个框架的套路
    • 发现问题
    • 具备扎实的前端基础 + 运气 + 灵感
    • 解决问题

版本规划

本文会在 GitHub 上持续维护,欢迎大家提 issue ~

地址是:https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-front-end-summary.md

v x.x.x

  • 更新 造轮子
  • 考虑翻译成英文?
  • 加入重要性评分功能
    • 引导目前阶段应该掌握哪些
    • 分为:初级、中级、高级

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

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

亦可关注我的微信公众号:清风迅来

清风迅来

结语

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

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

感谢您一路看到这里,欢迎点击阅读原文在我的博客上进行留言一同探讨。(小透明表示公众号至今未开通留言功能……)

若有帮助,尽情打赏!^_^

ps: 好像图片有点大=。=

如果有帮助,欢迎打赏~如果有帮助,欢迎打赏~

许可

MIT

前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

【DIP】2011-2012 春季学期数字图像处理复习知识整理


2011-2012 春季学期 数字图像处理复习知识整理

前言:

① 这篇文章根据XX自认为是给分点的关键词加下划线和斜体

② 这篇文章会对XX听老师说的重点程度以不同颜色标记其标题或加粗

③ 如果发现我整理的知识点有遗漏或者错误的话欢迎各位童鞋(尤其是昨天去答疑了的童鞋)拍砖指正~

④ 带有标记的是XX感觉还不清楚或者有疑问的,希望大家多多提点~

⑤ 带有标记的是XX认为必考的知识点,各位童鞋多多关注~

⑥ 本文内容格式为:<1> 本章复习大纲 + <2> 知识点细化

⑦ 本文似乎更像一种知识导读类型的文章,不喜者慎入

⑧ 以下内容包含王路老师的复习内容,丁广太老师的复习内容本文收录,文章中出现的大多数截图版权归王路老师的PPT所有

 祝大家复习Happy ~

第一部分:考试周边

1.重点是各章主题词及课上复习内容,及这学期的作业

2.试卷题型及分值分布

填空题(30)+选择题(15)+是非判断题(10)+计算和算法设计(35)+简答(10)

3.答疑地点

6月5日 周2全天 行健楼308室  早上9点30 – 下午4点

4.考试时间和地点:

6月7日 周4 14:15-16:15Ⅰ教101

第二部分:正文

1章 绪论

(一) 本章复习大纲

要求:掌握《数字图像处理》理论及技术的基础性概念;掌握数字图像处理这门学科的基本理论及技术架构;熟悉其应用领域,硬件系统及设备

1.1.数字图像及应用

数字图像,各种电磁波谱及各种图像成像技术,以及图像处理在各种行业当中的应用,不同波段的图像,图像类型,图像应用领域

1.2.图像工程概述

图像处理3层次,数字图像处理与其他学科的关系

1.3.图像表示和显示

图像与函数,像素,图像的矩阵表示,图像的解析表示,图像输出设备

1.4.数字图像存储格式

存储器件,图像文件格式

主题词:不同波段的图像数字图像数字图像处理系统图像处理图像分析图像理解图像的矩阵表示半调输出BMPGIFTIFFJPEG

(二) 知识点细化:

1.1 图像及应用

图像的定义:图像是用各种观测系统以不同形式和手段观测客观世界而获得的,可以直接或间接作用于人眼并进而产生视知觉的实体。P1

(注:引用朱文浩老师一句话:这个是咱们XXXX这门课的尊严。)

数字图像的定义:(书上P11页:离散化了的图像)

what_is_digital_image
what_is_digital_image

1.1.1 不同波段的图像(注:文中用该颜色标记代表:“主题词”,也就是理论上的重点)P1~P4

    应该是了解下各个波段的排列顺序即可

different_frequency_of_light.png
different_frequency_of_light.png

① 宇宙γ射线图像:0.001nm,能量极高:1011 eV

② X射线图像:0.001~10nm,医学诊断、治疗

③ 紫外线图像:10~400nm

④ 可见光图像:400~700nm(注:书上说是400~800nm

⑤ 红外线图像:0.78~1000μm,反映热度分布

⑥ 无线电波图像

⑦ 交流电波图像

1.1.2 不同类型的图像P4~P8

    2D图像、3D图像、彩色图像、多光谱图像、立体图像、多视图像、深度图像、纹理图像、投影重建图像……

① 3D图像:坐标空间为3维,需要用三元函数f(x,y,z)来表示的图像

② 彩色图像:用3个性质空间(如:RGB)的数值来表示

③ 多光谱图像:多波段图像(如:遥感图像)

④ 立体图像:双目图像

⑤ 序列图像:运动图像,时间上有一定顺序和间隔,内容上相关的一组图像,

⑥ 深度图像:其灰度反映场景中景物与摄像机之间距离信息的图像

⑦ 纹理图像:侧重反映物体表面的特性,因为纹理是物体表面的固有特征之一。

⑧ 投影重建图像:CT,磁核共振,雷达图像

⑨ 合成图像

1.1.3 图像应用领域P9

① 视频通信 ② 文字档案 ③ 生物医学 ④ 遥感测绘 ⑤ 工业生产 ⑥ 军事 ⑦ 交通 ⑧ 公安安全

1.2 图像工程概述

1.2.1 图像工程的3个层次

① 图像处理:着重强调在图像之间的变换。

② 图像分析:主要是对图像中感兴趣的目标进行检测和测量。

③ 图像理解:重点是在图像分析的基础上,进一步研究图像中各目标的性质和它们之间的联系,并得出对图像内容含义的理解以及对原来客观场景的解释,从而指导和规划行动。

图像工程的3个层次
图像工程的3个层次
图像工程的3层次
图像工程的3层次

数字图像处理与其他学科的关系:

计算机图形学、模式识别、计算机视觉

数字图像处理与其他学科的关系
数字图像处理与其他学科的关系

1.3 图像表示和显示

1.3.1 图像和像素

图像与函数,像素,图像的矩阵表示,图像的解析表示,图像输出设备

① 图像和表示

图像与函数:一幅图像可以用一个2D函数 f(x,y)来表示(计算机中为一个2D数组),xy表示2D空间XY中一个灰度坐标点的位置,而f代表图像在点(x,y)的某种性质的数值。

② 像素和表示

像素:一幅图像可分解为许多个单元。每个基本单元叫做图像元素,简称像素

要表示图像就需要表示其各个元素,对像素也可用f(x,y)来表示,此时xy表示像素的空间位置,而f则代表像素的灰度值

图像的矩阵表示一幅图像可表示为一个2DM*N的矩阵(其中每个元素表示一个像素,MN分别表为图像的行数和列数)

图像的矩阵表示
图像的矩阵表示

图像输出设备

1.3.2 图像显示 

① 半调输出P13~P14 

半调输出的原理是利用人眼的集成特性,在每个像素位置打印一个其尺寸反比于该像素灰度的黑圆点,即在亮的图像区域打印的点小,而在暗的图像区域打印点大。

这个方法通过减少图像的空间分辨率来增加图像的幅度分辨率,所以有可能导致图像采样过粗而影响图像的显示质量。

② 抖动技术 P14 注:复习大纲中没有,所以……减负……

1.4 图像存储与格式

BMP: Windows环境中的一种标准图像格式,也称位图文件。包括三个部分:① 位图文件头 ② 位图信息 ③ 位图阵列(即图像数据)

GIF公用的图像文件格式标准,8位文件格式(一个像素一个字节),最多存储256色图像。采用改进的LZW算法压缩,压缩比1:1~3:1。可以有动态图。

TIFF: 独立于操作系统和文件系统的格式,便于在软件之间进行图像数据交换。TIFF格式的描述能力很强,可指定私人用的标识信息。

JPEG: 对静止灰度或彩色图像的一种国际压缩标准,尤其适用于拍摄的自然照片在数字照相机上得到广泛应用。采用有损编码格式。

下一章:第2章 图像采集