清华课程-web 发展/前端概述
DESCRIPTION
Tsinghua University Front-End courseTRANSCRIPT
Web 发展/前端概述rank @ FEX
- 刘平川，⺴⽹网名 rank；- 8 年开发经验；- 08 年⼊入职百度，现任 FEX 总负责⼈人；- 关注前端技术、电商、及新兴产品；- 喜欢旅⾏行，有摄影爱好；
关于我- http://rank.im- [email protected] t.sina.com/rank
- Web 发展/前端概述 - HTML/CSS 概要讲解 - 前端常⽤用⼯工具
Roadmap
by Ian Sane
I. Web 发展史
- 了解 Web 产⽣生场景 - 理解 Web 架构原型 - 掌握 Web 架构核⼼心
http://info.cern.ch/hypertext/WWW/TheProject.html by pgpdesign (paul)
ARPANET
1969 年 11 ⽉月
创世纪— ⽂文顿·瑟夫
为什么是创世纪
- 物理机器互联 - 异构⽹网络协议 TCP/IP - ⽂文件传输协议 FTP
1969 年 11 ⽉月
ARPANET 解决异种机⽹网络互联的⼀一系列理论和技术问题
20 年后的某⼀一天
CERN 梦开始的地⽅方欧洲核⼦子研究组织
1989 年 3 ⽉月
1989 年 3 ⽉月
Tim Berners-LeeInformation Management: A Proposal
@CERN1989 年 3 ⽉月
欧洲核⼦子研究组织
1989 年 3 ⽉月
浏览器「系统」真正⾃自由获取信息的开始
开创新世代
1990 年 12 ⽉月
怎么会有 GUI 界⾯面1990 年 12 ⽉月
怎么会有 GUI 界⾯面1990 年 12 ⽉月
NeXT Windows 3.0
- 超链⽂文本 HyperText - URL 定位 - 标记语⾔言 HTML - 传输协议 HTTP
Web 构成
HTML/Doc
HyperLink
HTTP HTTP
Client
HTML/Doc
URI URI
Web 架构概念
打破传递信息的最后障碍
by Marco Di Fabio
March 1989: “Information Management: A Proposal” written by Tim Berners-Lee (TBL) and circulated for comments at CERN.
March 2014
http://www.webat25.org/about/history/
http://www94.web.cern.ch/WWW94/ http://www2014.kr/
WWW International Conference• • • • • • • • • • • • • • • • • • • • • • • • • •
嫁接超⽂文本发明了 HTTP
发明了 URL第⼀一个 WebServer
第⼀一个浏览器
成⽴立 WWW
- Web 基础架构长达 25 年⽆无⼤大变化
- Web 免版权费
Web 惊叹之处
「与其他所有推动⼈人类进程的发明不同，这是⼀一件纯粹个⼈人的劳动成果，万维⽹网只属于伯纳斯·李⼀一个⼈人」。
⼀一个⼈人的贡献。
下个 25 年 Web 是什么样的
思考
II. HTTP 协议简介Web 架构的核⼼心
by m vitor
URLprotocol:// hostname[:port]/path/[;parameters][?query]#fragment
- http(s)!- ftp!- gopher!- mailto!- thirdparty
Uniform Resource Locator
HTTPHTTP协议（HyperText Transfer Protocol，超⽂文本传输协议） 是⽤用于从 WWW 服务器传输超⽂文本到本地浏览器的传送协议。
HTML/Doc
HyperLink
HTTP HTTP
Client
HTML/Doc
URI URI
Web 架构概念
Why a new HTTP protocol?- Why not FTP - Why not News Protocol
Existing protocols cover a number of different tasks.!- File transfer protocols allow the transfer of data at the request of either the sender or receiver, but
allow little processing of the data at the responding side.- Mail protocols allow the transfer of transient messages from a single author to a small number of
recipients, at the request of the author.- News protocols allow the broadcast of transient data to a wide audience.- Search and Retrieve protocols allow index searches to be made, and allow document access. Few
exist: Z39.50 is one and could be extended for our needs.!The protocol we need for information access (HTTP) must provide!- A subset of the file transfer functionality - The ability to request an index search- Automatic format negotiation.- The ability to refer the client to another server
Why a new protocol?
http://www.w3.org/Protocols/WhyHTTP.html
HTTP 协议特点
- 简单，快速理解与部署 - 快速，更少的服务器资源 - 灵活，可传输任何数据对象 - ⽆无状态，只保留本次链接状态
HTTP 协议版本
- HTTP 0.9 - HTTP 1.0 - HTTP 1.1 - HTTP 2.0
HTTP 协议内容
- HTTP 消息结构 - HTTP 请求⽅方法 - HTTP 请求头信息 - HTTP 状态码
请求⽅方法 空格 URL 空格 协议版本 回⻋车请求⾏行
头部字段名 : 字段值
换⾏行
回⻋车 换⾏行
回⻋车 换⾏行
请求头
请求内容
头部字段名 : 字段值 回⻋车 换⾏行
HTTP 消息结构 Request
HTTP 消息结构 Request
GET /hello.txt HTTP/1.1!User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3!Host: www.example.com!Accept-Language: en, mi
请求⽅方法 空格 URL 空格 协议版本 回⻋车请求⾏行
头部字段名 : 字段值
换⾏行
回⻋车 换⾏行
回⻋车 换⾏行
请求头
请求内容
协议版本 空格 状态码 空格 状态内容 回⻋车状态⾏行
头部字段名 : 字段值
换⾏行
回⻋车 换⾏行
回⻋车 换⾏行
消息头
消息内容
头部字段名 : 字段值 回⻋车 换⾏行
HTTP 消息结构 Response
HTTP/1.1 200 OK!Date: Mon, 27 Jul 2009 12:28:53 GMT!Server: Apache!Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT!ETag: "34aa387-d-1568eb00"!Accept-Ranges: bytes!Content-Length: 51!Vary: Accept-Encoding!Content-Type: text/plain
HTTP 消息结构 Request
HTTP 请求⽅方法
GET!
POST!
HEAD!
PUT!
DELETE!
TRACE!
CONNECT!
OPTIONS
请求获取Request-URI所标识的资源
在Request-URI所标识的资源后附加新的数据
请求获取由Request-URI所标识的资源的响应消息报头
请求服务器存储⼀一个资源，并⽤用Request-URI作为其标识
请求服务器删除Request-URI所标识的资源
请求服务器回送收到的请求信息，主要⽤用于测试或诊断
保留将来使⽤用
请求查询服务器的性能，或者查询与资源相关的选项和需求
HTTP 状态码
状态码分类 状态码内容
1** 信息，服务器收到请求，需要请求者继续执⾏行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进⼀一步的操作以完成请求
4** 客户端错误，请求包含语法错误或⽆无法完成请求
5** 服务器错误，服务器在处理请求的过程中发⽣生了错误
HTTP 状态码
200 - 请求成功 301 - 资源（⽹网页等）被永久转移到其它 URL 304 - 缓存 404 - 请求的资源（⽹网页等）不存在 500 - 内部服务器错误
HTTP 状态码301 302 有什么区别？
HTTP 缺陷
HTTP 中间⼈人攻击Man-in-the-Middle Attack
偷梁换柱 Server
Middle
HTTP 明⽂文传输
Hyper Text Transfer Protocol over Secure Socket Layer
HTTPS
- TSL
- SSL
从输⼊入 URL 到⽹网页加载完成中发⽣生了什么
思考
http://fex.baidu.com/blog/2014/05/what-happen/
III. Web 前端简介
- 什么是 Web 前端 - 前端⼯工作⽅方式 - 前端发展及变化 - 前端的⼀一些案例
什么是 Web 前端
by generalstussner
Tell the browser what to do
Tell the browser what to do
你在百度做什么。
⽗父⺟母的困惑: 你在百度做什么。
Web 前端⼯工作
界⾯面交互 业务
Web 前端⼯工作
所见即所得 内容多样性 编程门槛低
交互界⾯面
Web 前端⼯工作
— ⽤用户体验是根本
页⾯面性能对产品影响
⽩白屏时间
⾸首屏时间
Web 前端
越来越多⼈人加⼊入到
前端与哪些⼈人打交道在各⼤大互联⽹网公司⾥里
前端 ⼯工程师
后端 ⼯工程师
产品经理
视觉/交互
运营经理
前端的发展及变化在各⼤大互联⽹网公司⾥里
界⾯面交互 JavaScript
业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
界⾯面交互 JavaScript
业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
重构⼯工程师
JavaScript ⼯工程师
界⾯面交互 JavaScript
浏览器业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
WebServer Nginx/Apache/IIS
服务器业务逻辑 PHP/NodeJS/Python/Java/ASPX ｝全 栈 ⼯工 程 师
前端
界⾯面交互 JavaScript
浏览器业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
⼿手机 PC TV Pad 其他
终端展现
全端 ⼯工程师
前端的⼀一些案例在各⼤大互联⽹网公司⾥里
总结
- Web 发展史与意义 - HTTP 协议 - Web 前端历史 - Web 前端⼯工作
谈谈这节课的感受