2020-01月 - 在玖富数科深圳研发团队的分享

2019-11-15

字数统计: 5k字 | 阅读时长≈ 20分

2020-01 在玖富数科深圳研发团队的分享

分享的内容模块

分享的目标

了解前端开发工作内容；
了解网页结构以及各类标签的作用；
了解调试工具的使用方法，能区分当前 Bug 的归属地；
了解浏览器缓存机制；
了解前端，爱上前端；

一、什么是前端开发

1.定义
前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。

2.需要掌握的技能

Html / CSS / Javascrit；
NodeJs / jQuery / zepto；
Bootstrap / Foundation / Meteria；
Angular / Vue / React；
Element-ui / iView / Cube-ui / Vant；
Webpack / Gulp / CommondJs；
SSR（服务端渲染） / CSR（客户端渲染）；
SEO；
……
3.需要了解的技能*
页面设计；
图片和设计稿处理；
数据库：MySQL / SQL Server；
java / php / .NET；
……

https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/10009024

4.HTML、XHTML、XML、HTML5 概念理解

https://www.cnblogs.com/xiaofeixiang/p/5027746.html

**Html** 是一种基于超文本标记语言的应用，是一种非常灵活的[置标语言](https://baike.baidu.com/item/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/5964436?fromtitle=%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80&fromid=4777729&fr=aladdin "%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80&fromid=4777729&fr=aladdin")；**XHTML** 则基于可扩展标记语言（XML），HTML 和 XHTML 其实是平行发展的两个标准。

XML 设计用来传送及携带数据信息，不用来表现或展示数据，HTML 语言则用来表现数据。

本质上说，XHTML 是一个过渡技术，结合了部分 XML 的强大功能及大多数 HTML 的简单特性。建立 XHTML 的目的就是实现 HTML 向 XML 的过渡。

XHTML 只是在内容结构上改进原有的 HTML 系统，缺乏交互性。在 Web App 大行其道的年代，XHTML2 就不合时宜了，于是就催生了 HTML5。

W3C（The World Wide Web Consortium）无视 Web 设计人员的需求，仅从理论角度闭门造车，却扛着标准的大旗，引发了来自 Opera、Apple 以及 Mozilla 等浏览器厂商的反对。2004 年，他们组建了一个以推动网络 HTML5 标准为目的的组织–网页超文本技术工作小组（Web Hypertext Application Technology Working Group，缩写为 WHATWG）。

Html5 目标是取代 HTML4.01 和 XHTML1.0 标准，旨在提高网页性能，增加页面交互。Html5 吸取了 XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的 HTML 标签 header、footer、dialog、aside、figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在这些场合是一律使用 div 的。

W3C 与 WHATWG 双方经过多年努力，终于在 2006 年达成妥协。2006 年 10 月，Web 之父、万维网联盟（W3C）主席、美国国家科学院院士蒂姆·伯纳斯-李（Tim Berners-Lee）发表了一篇博客文章表示，从 HTML 走向 XML 的路是行不通的（XHTML is dead）。2009 年 W3C 明智的放弃了改进 XHTML2.0 标准的计划，选择了 WHATWG 的成果作为基础。事实上, XHTML 在 2002 年更新之后的数年时间里，尽管发现了众多问题，但都没有去修改过。W3C 在 2014 年 10 月 29 日，Html5 标准规范终于制定完成。

二、网页的组成元素与作用

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
//...
</head>

<body>
//...
</body>

</html>

1.DTD（文档类型定义）
首先说一下什么是 DTD（Document Type Definition）文档：

由于历史原因，HTML 有很多的版本的规范，不同的版本有不同的差异，为了方便浏览器正确的编译解析以及渲染我们的网页，我们需要在 HTML 的文件的第一行告诉浏览器我们当前的网页是基于那个标准规范编写的，浏览器只有知道了我们是哪个版本的规范编写，才能正确的读取解析以及渲染。

其次说一下 DTD 文档的声明格式：

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

每一个不同的版本有不同的声明格式，因为 H5 向下兼容，H5 的 DTD 声明格式为：

1	`<!DOCTYPE HTML>`

注意：一个标准的 HTML 的网页，第一行必须是 DTD 文档声明，也就是说 DTD 文档声明必须写在 HTML 的第一行，而且不区分大小写；

W3C 规定，DTD 文档的声明不算是一个标签，只是告诉浏览器我们基于哪个版本进行编写的网页，但是浏览器并不完全依赖这个文档，他有一套自己的机制，具体要看浏览器的内核，也就是说，没有这个文档也可以正常运行网页。

2.meta 标签

https://www.cnblogs.com/chenqiBlog/p/9517619.html

meta 标签共有两类属性，分别是 http-equiv 属性和 name 属性。

1> name 属性

name 属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为 content，content 中的内容是对 name 填入类型的具体描述，便于搜索引擎抓取。meta 标签中 name 属性语法格式是：

1	`<meta name="参数" content="具体的描述">。`

其中 name 属性共有以下几种参数。(A-C 为常用属性)

A. keywords(关键字)
说明：用于告诉搜索引擎，你网页的关键字。举例：

1
2

<meta name="keywords"
    content="玖富, 超级大脑, 开放平台, 超级数字钱包, 数字科技, 金融赋能, 金融服务, 金融产品设计, 大数据风控, 信用评分, 人工智能, 数字证书, 数字营销, 支付体系, 账户体系">

B. description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。举例：

1
2

<meta name="description"
    content="玖富超级大脑将向场景合作伙伴全面提供智能化、模块化、即插即用型的高性能数字科技解决方案，赋予全场景B端3A级（Account、AI、API）底层金融服务能力">

C. viewport (移动端的窗口)
这个属性常用于设计移动端网页。在用 Bootstrap, AmazeUI 等框架时候都有用过 Viewport。举例：

1	`<meta name="viewport" content="width=device-width, initial-scale=1">`

D. robots(定义搜索引擎爬虫的索引方式)
说明：robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content 的参数有 all, none, index, noindex, follow, nofollow。默认是 all。举例：

1	`<meta name="robots" content="none">`

具体参数如下：

none : 搜索引擎将忽略此网页，等价于 noindex，nofollow。
noindex : 搜索引擎不索引此网页。
nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
index : 搜索引擎索引此网页。
follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

E. author (作者)
说明：用于标注网页作者举例：

1	`<meta name="author" content="Lxxyx,841380530@qq.com">`

F. generator(网页制作软件)
说明：用于标明网页是什么软件做的举例:

1	`<meta name="generator" content="Sublime Text3">`

G. copyright(版权)
说明：用于标注版权信息举例：

1	`<meta name="copyright" content="Alvin xxxxxx"> //代表该网站为 Alvin 个人版权所有。`

H. revisit-after(搜索引擎爬虫重访时间)
说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：

1	`<meta name="revisit-after" content="7 days">`

I. renderer (双核浏览器渲染方式)
说明：renderer 是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说 360 浏览器。举例：

1	`<meta name="renderer" content="webkit"> //默认 webkit 内核`

1	`<meta name="renderer" content="ie-comp"> //默认 IE 兼容模式`

1	`<meta name="renderer" content="ie-stand"> //默认 IE 标准模式`

2> http-equiv 属性

http-equiv 顾名思义，相当于 http 的文件头作用，可以定义 HTTP 参数。meta 标签中 http-equiv 属性语法格式是：

1	`<meta http-equiv="参数" content="具体的描述">`

其中 http-equiv 属性主要有以下几种参数：

A. content-Type (设定网页字符集)(推荐使用 HTML5 的方式)
说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

1
2
3

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的 HTML，不推荐

<meta charset="utf-8"> //HTML5 设定网页字符集的方式，推荐使用 UTF-8

B. X-UA-Compatible (浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：

1	`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> //指定 IE 和 Chrome 使用最新版本渲染当前页面`

C. cache-control (指定请求和响应遵循的缓存机制)
用法1.
说明：指导浏览器如何缓存某个响应以及缓存多长时间。举例:

1	`<meta http-equiv="cache-control" content="no-cache">`

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒。
用法2.(禁止百度自动转码)
说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在 head 中加入例子中的那句话，就可以避免百度自动转码了。举例：

1	`<meta http-equiv="Cache-Control" content="no-siteapp" />`

D. expires(网页到期时间)
说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：

1	`<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />`

E. refresh (自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:

1	`<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是 2 秒后跳转向我的博客`

F. Set-Cookie(cookie设定)
说明：如果网页过期。那么这个网页存在本地的 cookies 也会被自动删除。

<meta http-equiv="Set-Cookie" content="name,date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
//具体范例

三、Chrome 开发者工具的使用

1.Elements（元素选项卡）

当前选中：当鼠标移动到任何一个元素上，对应的 html 视图中会给该元素蓝色的背景；
定位：选中一个元素，在面板的底部会显示该元素在 html 结构中的位置关系；
实时微调：可以在右侧的 styles 选项中编辑元素的样式，且界面会实时更新；
事件绑定：在右侧显示面板中切换到 Event Listeners 选项，观察元素绑定的事件；
搜索：按快捷键 ctrl+F 可以看到底部有输入框，在输入框中输入你想要查找的任何内容，如果匹配到了，都会在 Elements 面板中高亮显示;
快速定位：点击左上角的问号（箭头）图标，然后把鼠标移动到视图界面中，对准元素按下鼠标左键，对应的 Elements 面板会定位到选择的元素。
状态模拟：选中一个元素，右击鼠标，在弹出的窗口里面有若干选项；
2.NetWork 时间轴*
Network 是一个监控当前网页所有的 http 请求的面版，它主体部分展示的是每个 http 请求，每个字段表示着该请求的不同属性和状态;
单击面板中的任意一条 http 信息，会在底部弹出一个新的面板，其中记录了该条 http 请求的详细参数 header（表头信息、返回信息、请求基本状态—请参看 http1.1 协议内容对号入座）、Preview（返回的格式化转移后文本信息）、response（转移之前的原始信息）、Cookies（该请求带的 cookies）、Timing（请求时间变化）
面板顶部有一列选项，可以过滤 http 请求信息；
最后在主面板的底部有记录了整体网络请求状态的一些基本信息；
可以模拟网络状态；
常见错误码分类：
信息代码：1xx，
成功代码：2xx，
重定向：3xx，
客户端错误：4xx，
服务器错误：5xx
其中，我们需要关注的是客户端和服务器端错误代码，即 4xx 和 5xx 代码以及这些代码的常见解决方案。

A：客户端错误，从 400 到 499 编码的客户端错误是由客户端引起的某些错误导致的，该客户端是 Web 浏览器、curl 命令或 postman 等其他服务器测试软件发出的请求等。

B：从 500 到 599 为服务器错误，当服务器发生错误或服务器识别出无法处理请求时，将发送服务器错误。

3.Console 面板

利用 console.error , console.warn 等将输出到控制台的信息进行分类整理(语义化);

console.log('我是普通信息！！！');
console.info('我是提示类信息！！！');
console.warn('我是警示信息！！！');
console.error('我是错误信息！！！');

利用 console.group 与console.groupEnd 将信息分组；

console.group("玖富农银钱包");
console.log("来自钱包模块的信息 blah blah blah...");
console.groupEnd();
console.group("收银台支付");
console.log("来自支付模块的信息 blah blah blah...");
console.groupEnd();

让抛出的信息也能美观：Chrome 提供的 API 中包含了一些格式化的指令，比如 %c；

console.log('%chello world','font-size:25px;color:red;');
console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0,
#f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,
#2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;-webkit-background-clip: text;font-size:5em;');

还有其他有趣的指令，参考 API

利用 console.table 将数据直接以表格的形式输出，清晰明了；

console.table([
{
first: 'René',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
]);

操作对象或数组：keys & values；

1
2
3

var personInfo = { name:'Alvin', age:'18', hobby:'swimming' };
keys(personInfo);
values(personInfo);

console.time & console.timeEnd 除了输出调试信息之外，console 甚至还有性能测试的功能；

console.time("该段代码执行时间：");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("该段代码执行时间：");

4.Sources面板
Sources 功能面板是资源面板，可以查看资源文件以及监控 js 在执行期的活动。

左侧显示网页加载的脚本文件：例如 css， js 等资源文件;
选中 js 资源文件，在 js 文件中设置调试断点；
断点调试的几个常用的按钮和快捷键：

停止断点调试
不跳入函数中去，继续执行下一行代码（F10）
跳入函数中去（F11）
从执行的函数中跳出
禁用所有的断点，不做任何调试
程序运行时遇到异常时是否中断的开关

切换到 Watch Expressions 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的 js 代码;
强大的监听功能：可以监听几户所有响应事件；
5.Application 面板*
Web Storage
Cookies

四、浏览器的数据储存和资源缓存

1.Web Storage（Session Storage、Local Storage）和 Cookies

https://www.jianshu.com/p/41432b9c3d01 / https://www.cnblogs.com/tangyuu/p/6396644.html

区别：

存储空间
与服务器交互
接口
2.Session Storage 和 Local Storage*
区别：
失效时间
3.强缓存*

https://www.cnblogs.com/mq0036/p/7090635.html

浏览器在请求某一资源时，会先获取该资源缓存的 header 信息，判断是否命中强缓存（cache-control 和 expires 信息），若命中直接从缓存中获取资源信息，包括缓存 header 信息；本次请求根本就不会与服务器进行通信。

1 2	`expires: Mon, 10 Jun 2015 21:31:12 GMT cache-control：max-age = 123456789`

如果 max-age 与 expires 同时存在的话，max-age 的优先级高于 expires，验证通过返回 200。

4.弱缓存（协商缓存）
如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的 header 字段信息（Last-Modified/If-Modified-Since 和 Etag/If-None-Match），由服务器根据请求中的相关 header 信息来比对结果是否协商缓存命中；

若命中，则服务器返回新的响应 header 信息更新缓存中的对应 header 信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容;

Response:

1 2	`ETag: W/"49818-1571206748000" Last-Modified: Wed, 16 Oct 2019 06:19:08 GMT`

Request:

1 2	`If-None-Match: W/"27b71c-y45A0S8XIOGMpTt/mWg1FPuK7wc" If-Modified-Since: Wed, 16 Oct 2019 06:19:08 GMT`

Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。

5.不同浏览器之间的缓存策略差异

Unless specifically constrained by a cache-control directive, a caching system MAY always store a successful response.
如果没有 Cache-Control 进行限制，缓存系统**可以**对一个成功的响应进行存储

五、前端开发的乐趣

乐趣在这儿

本文作者： Alvin
本文链接： https://alvinyw.github.io/2019/11/2/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！