给产品经理讲技术-01.web前端技术

只让部分页面刷新，AJAX，汉语读音：阿贾克斯或额塞克斯

解决的是不用刷新网页，就能和后台交互获取数据，并应用于当前网页的问题

搜索引擎的搜索框中，输入一个关键词，会出现联想词

地图类应用，随意放大或缩小页面时，网页没刷新，新出现的街道细节

例子

发起网络请求的能力由浏览器的内置能力提供，所有的浏览器都提供了XmlHttpRequest对象，它可以由网页调用，用来连接一个特定的地址

1.发起网络请求

相当于人的骨骼，DOM相当于网页结构

DOM：文档对象模型

2.无须刷新，可动态操作网页

具备的这两项能力，是怎么实现？

AJAX是一项用于异步拉取数据并展示在当前页面的技术

对需要延迟加载和触发式加载数据的页面，有很大益处

会加速页面响应，提升用户体验

总结

1.AJAX技术的妙用

文档对象模型，是web前端里最基础、最常用的一个模型

1.用JavaScript模拟了一棵简单的DOM树，在这上面演练所有的DOM操作

2.等时机成熟时再把虚拟DOM树和真正的浏览器的DOM树做对比，算出差异，一次性地改变真正的DOM树

虚拟DOM

2.DOM

因人而异显示不同内容，比例：QQ空间

根据时间线呈现内容变化，比如：新闻客户端

一直保持不变，比如：国企或政府网站

核心区别：后台是否有数据库支撑，简单来说：网页上展示的内容是否要变化

无须经过后台程序的处理，直接由服务器返回，实现静态网页后，数据不需要更新，一般不需要维护

静态网页

要经过后台程序的处理（ASP、JSP、PHP、Python、Ruby等），并由数据库提供数据支撑

动态网页更灵活

动态网页

3.静态网页与动态网页

http://news.qq.com/a/20160209/012154.htm?a=1&b=2&c=3

指http://部分，是协议的意思

协议是一套规则，定义数据的封装、打包、拆包和解释的规则

http://即表示只能通过HTTP这套规则访问这个页面资源

协议头：https、ftp、thunder

URL地址标识了一个资源，协议头表示可以通过不同的规则（协议）访问，前提是存放这些资源的服务器支持这个协议

也可以设计一个协议， 即自定义协议，利润：abc://

protocol

主机名

例子中，news.qq.com是hostname

主机可以理解为一台名叫news.qq.com的机器这台主机在qq.com域名下qq.com叫做一级域名，news.qq.com、qzone.qq.com等是二级域名

hostname

端口号

一般HTTP的端口号为80，HTTPS的微443，可以理解为计算机有很多个提供服务的点

把主机比作一个房子的话，这个房子可以有65536个门，门号就是端口号

例子中的URL没有任何端口号，默认为80

以 http://news.qq.com:8080/a/20160209/012154.htm?a=1&b=2&c=3#p=1为例，URL指定了从8080这个端口号（即从这个门）访问资源网页服务器必须先在这个端口部署服务，才能供用户访问（先把门打开，才能提供服务）。

port

路径

最终文件所在的路径和文件名，只不过此地址的文件存储在news.qq.com域名下的若干个服务器上

例子中：/a/20160209/012154.htm/，hostname后面的一长串全部称为path

path

参数（查询）

目的是：在URL中带上一些本地的信息传给服务器

例子中：?a=1&b=2&c=3

parameters

query

标准URl

4.分析URL的结构

用户和服务器数据交互的用户界面，一切向服务器提交的数据都是由其中的几个简单的标签组成

表单

标识这是一个表单

form

标识所有的数据内容将向引号内的地址提交

action

标识为提交到网站的方法（一般为GET或POST）

method

标识为一个输入框

input

标识为文本输入（user是其参数的名字）

type

标识一个按钮的类型为“提交”类型

input的type为submit

标签

5.网页基础知识：表单

是HTML 5中定义的一种离线存储技术标准

可以让开发者明确地指定页面中哪些静态页面资源可以再第一次访问网页的同时 缓存到本地并且在下次访问该网页时向服务器询问本地缓存的资源是否需要更新

当浏览器打开使用了Application Cache技术的网页时，会尝试先从Cache中加载数据，并同时向服务器询问本地资源是否已经过期如果过期，浏览器会自动从服务器上更新资源到Cache中

避免每次打开网页都会拉取大量数据的过程，取而代之的是只是一个轻量级的更新检查请求

开发者的服务器带宽就被大大释放出来

用户打开同一页面时，内容展示时间大大缩短

页面可以在离线的情况下被完整地加载

优势

Application Cache

6.H5应用程序缓存简介

如果读者在浏览某些网站时按“F12”键启动开发者工具，会在Console这个Tab下收到网站开发者的留言

DevTools

没有网络时，在Chrome里随便打开一个网址，读者会看到小恐龙，再按“空格”键，游戏就开始了

恐龙小游戏

在Android版的Chrome浏览器里访问某些网站时，读者会发现标题栏和状态栏的颜色变成了该网站的主题色

变色的标题栏

如果读者想在淘宝搜索某件商品，或者想在知乎搜索某个问题，可以在Chrome的地址栏里直接输入淘宝或者知乎的域名，然后按“Tab”键，Chrome的地址栏就显示“用××搜索”

指定搜索引擎

直接在 Chrome 的地址栏里进行计算

计算器

同样在地址栏里，使用“javascript:××”就能执行相应的JavaScript语句

执行 JavaScript 语句

按“Ctrl+P”组合键唤起“打印网页”对话框，然后在目标打印机的选项中选择“另存为PDF”选项

将网页存为PDF文件

7.Chrome里的冷知识

是一种对网站发起大量连接，导致正常用户无法访问网站的攻击手段

8.JS DDoS攻击的原理与防御

定义：UserAgent（用户代理）的简写，一般用来区分不同的浏览器

9.UA的故事

在网络标准协议中规定了URL中只能包含英文字符

虽然读者在浏览器的输入框里使用了中文，可一旦浏览器发出网络请求，请求中的中文将不复存在，会变成读者看到的不明所以的东西，都是中文编码后的结果

10.URL编码

一个普通的.txt 文件里的文字进行标记，标记其中的一段为title，标记另一段应该另起一行，标记任意一段为某个意思

这些记号超过了普通文本的标记，它们对普通文本的修饰，构成了一套规则，这套规则就是HTML

Markup（标记）

HTML是用来布局网页中的每一个元素的

HTML（HyperText Markup Language）是超文本标记语言

样式，指的是外观。起到的修饰作用，和HTML一起配合使用

CSS（Cascading Style Sheets）是级联样式表

作用是控制HTML中的每一个元素

可以利用JavaScript完成页面上的元素增删

JavaScript 是一种脚本语言，主要用于前端页面的DOM处理

11.简单理解HTML、CSS和JavaScript

嵌入另一个页面，两个页面的功能可以解耦合，不依赖对方而存在

iframe

被拒绝，是浏览器底层被称为“同源策略”的安全机制起来作用

跨域

两个页面的协议、主机名、端口一样，就是同源，否则就是非同源

同源

JSONP

iframe document.domain

iframe location.hash

HTML 5 PostMessage

合理的跨域沟通的方法有以下几种

12.跨域与同源

浏览器提供了原生的同源机制来保证不同域下的网站互相隔离，正是这种机制的存在，保证了Web生态下各个网站不乱套

不同源，就不能修改另一个页面，更不能获取与另一个页面相关的内容。只有同源的页面才可以相互访问。

同域就是同源，跨域就是跨源

第4中是较新的HTML 5规范，规定了跨域问题的解决方法，并且是异步，大部分浏览器已经支持

浏览器每次向服务器请求数据的时候携带一些额外信息，非常少，主要是为了解决服务器“记性不好”的问题

需要携带什么信息，其实是由服务器决定的

.Cookie

13.Cookie和广告联盟

HTTP协议的Header是一块数据区域，分为请求头和响应头2种类型客户端向服务区发送请求时带的是请求头服务器响应客户端数据时带的是响应头

表示当前浏览器可以接受的文件类型

accert

表示当前浏览器可以接受的数据编码，如果不匹配，会产生乱码

accept-encoding

表示当前使用的浏览语言

accept-language

很多和用户相关的信息都存在 Cookie 里，用户在向服务器发送请求数据时会带上

Cookie

表示浏览器的版本信息

user-agent

请求头关键信息

表示返回内容的压缩编码类型

content-encoding

表示这次回包的数据大小，如果数据大小不匹配，要当作异常处理

content-length

表示数据的格式

content-type

set-cookie

相应里头的关键信息

14.HTTP Header是什么

用户在浏览器的地址栏中输入一个网站的登录页地址，目的是从服务器上拉取登录页的HTML文件。在这个过程中，浏览器向后台发起了HTTP GET的请求，登录页比较常见的 URL 形式是http://xxx/login。

这种类型的请求是从服务器拉取资源而不改变服务器的资源

GET

浏览器收到登录页的 HTML 文件并解析后，用户看到的是用户名和密码的输入界面，输入后单击“提交”按钮，这时浏览器又向后台发了一个请求，不过发这次请求时，用户并没有在地址栏输入什么，地址栏的内容也没有立刻发生改变

这种类型的请求会带一些发起者的数据并让服务器发生一些改变

POST

通常认为GET 就是拉取服务器的数据，POST 就是向服务器提交数据。但实际上两者并没有这种明确的界限

15.简单理解HTTP的GET和POST

如果想做一个实时性很强的网页，或者想向网页及时推送一些信息，尽量选择WebSocket

比如：在股票交易时间内，股票的价格变化十分迅速，股票网站需要向正在浏览页面的用户实时更新股价传统的HTTP协议是无状态的，每次发出请求时建立连接，收到回复时便断开连接。如果使用 HTTP 协议来完成这个需求，则有两种实现方式可以选择：一种是使用轮询的方式，每隔几秒就重新向服务器发送一个请求，查询是否能获取最新的数据。这样做付出的代价是，每次都要重新建立一次连接，建立连接就需要重新进行三次握手，发送Header等冗余信息，很浪费资源。一种通过HTTP实现实时更新的技术，就是Comet，它的原理是发送一个更新请求后，就一直占据端口，等待服务器响应，直到服务器有数据返回时才会断开连接。一个请求一直不断开，也很浪费客户端和服务器的资源。

WebSocket可以很好地解决这个问题WebSocket是HTML 5的一个主要特性，它是建立在TCP上的一种全双工协议，也就是说客户端可以向服务器发信息，服务器也可以向客户端推送消息。WebSocket 在首次建立连接时，使用普通HTTP和服务器通信，同时告诉服务器后面的交互用WebSocket的方式。在WebSocket连接建立后，往来的消息都可以通过这条管道发送，同时客户端与服务器也会不断地用ping-pong的方式保持心跳，防止连接异常断开。

16.WebSocket是什么

“直出”其实是“直接输出”的意思，讲的是在浏览器打开某个网页时，拿到的数据是服务器“直接输出”的，显示速度特别快，很多“秒开”的网页，很可能用了“直出”的技术。

17.“直出”是什么

网络爬虫的作用就是抓取某个指定网页的数据并存储在本地，而一些大公司的主要收入都来源于搜索引擎，搜索引擎的数据是由网络爬虫没日没夜地从互联网上抓取的，所以说网络爬虫就是它们的黄金矿工。

这些爬虫是怎样“寻宝”的呢？首先给爬虫几个初始的URL 链接，爬虫把这些链接的网页抓取回来，经过对网页进行分析，得到两部分数据：一部分是网页的有效内容，可以用来建立搜索关键词的索引，这部分数据先存储起来；另一部分就是网页中的URL链接，这些链接可以作为下一轮爬虫抓取的目标网页，如此反复操作，也许整个互联网的网页都可以被抓取下来。

如果网站运营者不愿意网站内容被爬虫抓取，那么可以在网站根目录下放一个 robots.txt文件，在其中具体描述该网站的哪些页面可以被抓取，哪些不能。

18.互联网的黄金矿工：爬虫

单页Web应用，顾名思义，单击链接后，会直接在这个页面里刷新并展示在多页的网站中，每打开一个新的链接，浏览器都会重新向服务器请求一个完整的HTML 网页，然后重新运行进度条，重新刷新

单页的 Web 应用会在用户单击链接之后直接和服务器联系（不会告诉浏览器页面切换了），拉取数据多页Web应用，或者说传统的网页应用，更应被称为“网站”，它的服务器上有很多页面，每个页面有属于自己的URL。服务器上也有可能没有页面，服务器根据请求动态生成 HTML 输出给浏览器单页Web应用，更像是一个原生的Android或者iOS应用，只不过现在浏览器成了一个操作系统

单页 Web 应用如何能在一个页面里把多个页面才能做的事情做完呢？这就需要以下两个必备技术：1.AJAX。有了它，前端的JavaScript 代码就可以拉取服务器上的数据了。2.页面历史栈。单页 Web 应用只有一个页面，也就是只有一个URL，那么用户想前进或者后退该怎么办呢？这就依赖单页Web页面自己的处理了

单页Web应用越来越多，有以下两个原因≤1.多页面的网站结构，打开一个链接后，还要等很长时间整页才刷新，用户体验不好2.如果项目有Android、iOS、Web三种页面，那么最好由服务器提供数据API，然后三者共用。显然，单页Web应用比多页Web应用有优势

19.简单理解单页Web应用

网页滚动到中部时，我们单击“回到顶部”选项，就跳到了网页的顶部。其实是依靠“锚点”这个概念

20.锚点与网页内跳转的实现

“盗链”就是盗取别人的链接

一般网站的反盗链手段都是返回一张警告图片。遇到这些图片，就表示用户访问的网页很可能盗链了别人的资源

如何做到呢？其实很简单，大部分浏览器在请求一个资源时会将当前网页的域名放在HTTP请求头的refer字段里，服务器只需要判断这个域名是否属于允许请求该资源的站点，如果“是”，就返回正确内容，否则就返回一张反盗链警告图片。

21.简单理解“盗链”与“反盗链”

屏蔽广告的主要手段只有两招：一招是不让广告被下载，另一招是即便广告被下载，也不让它展示出来。

如果广告是图片或者视频的形式，则这些资源都有 URL，只要找到网页上广告资源对应的 URL，在浏览器拉取网页资源的过程中，直接拦截它们即可。如果广告是文字形式，或者拦截资源失败，就使用第二招：不让广告展示出来。网页的广告一般都放在一个网页标签中展示，找到这个标签，将其隐藏，我们就“眼不见，心不烦”了

还有一个问题：互联网上这么多网站都是由不同的人开发的，它们的URL规则和广告标签的排布均不相同，要搞定这么多网站的广告规则一定需要很深奥的技术吧？其实并不是，能搞定这么多网站的广告规则全靠大量的人力投入通过人工找到这些广告规则有以下两个办法：第一个办法是单个击破，适用于那些大家经常访问的网站，因为它们的网站比较大，广告的规则不会变化得那么频繁。第二个办法是摸透大公司的广告系统，适用于一些中小网站，它们不会自建广告系统，而是使用大公司的广告系统。这些广告系统的规则也是相对固定的，只要将它们摸透，就可以将大部分中小网站的广告屏蔽搞定了。

22.广告过滤机制科普

01.web前端技术

给产品经理讲技术读书笔记分享