整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

深入浅出浏览器渲染原理

块的文章网上也是比较多的,但大多数都是讲解DOM树的渲染,对于页面从请求到展示的详细流程讲解还是比较少的,而且有些说的也不容易理解,下面我将以图文结合的形式给大伙讲讲。

DNS查询

作用

DNS 的作用就是通过域名查询到具体的 IP。

背景

因为 IP 存在数字和英文的组合(IPv6),很不利于人类记忆,所以就出现了域名。你可以把域名看成是某个 IP 的别名,DNS 就是去查询这个别名的真正名称是什么。

过程

在 TCP 握手之前就已经进行了 DNS 查询,这个查询是操作系统自己做的。当你在浏览器中想访问 www.test.com 时,会进行一下操作:

  1. 操作系统会首先在本地缓存中查询 IP
  2. 没有的话会去系统配置的 DNS 服务器中查询
  3. 如果这时候还没得话,会直接去 DNS 根服务器查询,这一步查询会找出负责 com 这个一级域名的服务器
  4. 然后去该服务器查询 baidu 这个二级域名
  5. 接下来三级域名的查询其实是我们配置的,你可以给 www 这个域名配置一个 IP,然后还可以给别的三级域名配置一个 IP

以上介绍的是 DNS 迭代查询,还有种是递归查询,区别就是前者是由客户端去做请求,后者是由系统配置的 DNS 服务器做请求,得到结果后将数据返回给客户端。

TCP握手

在进行完DNS解析之后,接下来就是 TCP 握手,应用层会下发数据给传输层,这里 TCP 协议会指明两端的端口号,然后下发给网络层。网络层中的 IP 协议会确定 IP 地址,并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输了。

TCP建立连接的三次握手

首先假设主动发起请求的一端称为客户端,被动连接的一端称为服务端。不管是客户端还是服务端,TCP 连接建立完后都能发送和接收数据,所以 TCP 是一个全双工的协议。

起初,两端都为 CLOSED 状态。在通信开始前,双方都会创建 TCB。 服务器创建完 TCB 后便进入 LISTEN 状态,此时开始等待客户端发送数据。

第一次握手

客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后,客户端便进入 SYN-SENT 状态。

第二次握手

服务端收到连接请求报文段后,如果同意连接,则会发送一个应答,该应答中也会包含自身的数据通讯初始序号,发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

当客户端收到连接同意的应答后,还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态,服务端收到这个应答后也进入 ESTABLISHED 状态,此时连接建立成功。

第三次握手中可以包含数据,通过快速打开(TFO)技术就可以实现这一功能。其实只要涉及到握手的协议,都可以使用类似 TFO 的方式,客户端和服务端存储相同的 cookie,下次握手时发出 cookie 达到减少 RTT 的目的。

TLS握手

TLS 协议位于传输层之上,应用层之下,主要是对HTTP请求进行加密。首次进行 TLS 协议传输需要两个 RTT ,接下来可以通过 Session Resumption 减少到一个 RTT。

TLS 握手过程如下图:

  1. 客户端发送一个随机值以及需要的协议和加密方式。
  2. 服务端收到客户端的随机值,自己也产生一个随机值,并根据客户端需求的协议和加密方式来使用对应的方式,并且发送自己的证书(如果需要验证客户端证书需要说明)
  3. 客户端收到服务端的证书并验证是否有效,验证通过会再生成一个随机值,通过服务端证书的公钥去加密这个随机值并发送给服务端,如果服务端需要验证客户端证书的话会附带证书
  4. 服务端收到加密过的随机值并使用私钥解密获得第三个随机值,这时候两端都拥有了三个随机值,可以通过这三个随机值按照之前约定的加密方式生成密钥,接下来的通信就可以通过该密钥来加密解密

通过以上步骤可知,在 TLS 握手阶段,两端使用非对称加密的方式来通信,但是因为非对称加密损耗的性能比对称加密大,所以在正式传输数据时,两端使用对称加密的方式通信。

负载均衡服务器

数据在进入服务端之前,可能还会先经过负责负载均衡的服务器,它的作用就是将请求合理的分发到多台服务器上,这时假设服务端会响应一个 HTML 文件。

首先浏览器会判断状态码是什么,如果是 200 那就继续解析,如果 400 或 500 的话就会报错,如果 300 的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。

浏览器解析

浏览器开始解析文件,如果是 gzip 格式的话会先解压一下,然后通过文件的编码格式去解码文件。

文件解码成功后会正式开始渲染流程,先会根据 HTML 构建 DOM 树,有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话,会判断是否存在 async 或者 defer ,前者会并行进行下载并执行 JS,后者会先下载文件,然后等待 HTML 解析完成后顺序执行。

如果以上都没有,就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件,这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树,这一步就是确定页面元素的布局、样式等等诸多方面的东西

在生成 Render 树的过程中,浏览器就开始调用 GPU 绘制,合成图层,将内容显示在屏幕上了。

总结

总的来说,今天这篇文章主要是带着大家从 DNS 查询开始到渲染出画面完整的了解一遍过程,里面涉及到DNS、HTTP、TLS、负载均衡和浏览器渲染等等内容,算不上非常详细,但如果面试的时候能说出来这些,相信面试官也会对你刮目相看的。

. 对 HTML 语义化的理解

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代 码语义化)。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下:

对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬 取有效信息,有利于 SEO。除此之外,语义类还支持读屏软件,根据 文章可以自动生成目录;

对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发 者能清晰地看出网页的结构,便于团队的开发与维护。

常见的语义化标签:

2. DOCTYPE(⽂档类型) 的作⽤

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明,它的目 的是告诉浏览器(解析器)应该以什么样(html 或 xhtml)的文档类 行定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄JavaScript 脚本的解析。它必须声明在 HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式(可通过 document.compatMode 获取,比 如,语雀官网的文档类型是 CSS1Compat):

CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用 W3C 的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈 现页面。

BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的 怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后 兼容的方式显示。

3. script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样 就阻塞了后续文档的加载。

下图可以直观地看出三者之间的区别:

其中蓝色代表 js 脚本网络加载时间,红色代表 js 脚本执行时间,绿 色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件,它们都不 会阻塞页面的解析,其区别如下:

执行顺序:多个带 async 属性的标签,不能保证加载的顺序;多个带 defer 属性的标签,按照加载顺序执行;

脚本是否并行执行:async 属性,表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的,即异步执行;defer 属性,加载后 续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步),js 脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded 事件触发执行之前。

4. 行内元素有哪些?块级元素有哪些? 空(void)元素有那 些?

行内元素有:a b span img input select strong;

块级元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;

空元素,即没有内容的 HTML 元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:

常见的有:<br>、<hr>、<img>、<input>、<link>、<meta>;

鲜见的有:<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

5. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载?

在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问页面 ,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经 访问过页面并且资源已经进行离线存储了,那么浏览器就会使用离线 的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文 件改变了,就会重新下载文件中的资源并进行离线存储。

离线的情况下,浏览器会直接使用离线存储的资源。

6. Canvas 和 SVG 的区别

(1)SVG:

SVG 可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标 记语言 XML 描述的 2D 图形的语言,SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的,可以为某个元素附加 Javascript 事件处 理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象 的属性发生变化,那么浏览器能够自动重现图形。

其特点如下:

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)不适合游戏应用

(2)Canvas:

Canvas 是画布,通过 Javascript 来绘制 2D 图形,是逐像素进行渲 染的。其位置发生改变,就会重新进行绘制。

其特点如下:

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

注:矢量图,也称为面向对象的图像或绘图图像,在数学上定义为一 系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是

一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等 属性。

7. 说一下 HTML5 drag API

dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。

darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触 发。

drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

三部分 附录(因为暂时不支持插入超链接所以部分内容无法显示


附录一 DIV命名规范


  • 企业DIV使用频率高的命名方法
  • 网页内容类
  • 标题: title
  • 摘要: summary
  • 箭头: arrow
  • 商标: label
  • 网站标志: logo
  • 转角/圆角:corner
  • 横幅广告: banner
  • 子菜单: subMenu
  • 搜索: search
  • 搜索框: searchBox
  • 登录: login
  • 登录条:loginbar
  • 工具条: toolbar
  • 下拉: drop
  • 标签页: tab
  • 当前的: current
  • 列表: list
  • 滚动: scroll
  • 服务: service
  • 提示信息: msg
  • 热点:hot
  • 新闻: news
  • 小技巧: tips
  • 下载: download
  • 栏目标题: title
  • 热点: hot
  • 加入:joinus
  • 注册: regsiter
  • 指南: guide
  • 友情链接: friendlink
  • 状态: status
  • 版权: copyright
  • 按钮: btn
  • 合作伙伴: partner
  • 投票: vote
  • 左右中:left right center


  • 注释的写法: /* Footer */ 内容区/* End Footer */
  • id的命名:
  • 页面结构
  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

  • 导航
  • 导航:nav
  • 主导航:mainbav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

  • 功能
  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的:current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

  • class的命名:
  • 颜色:使用颜色的名称或者16进制代码,如
  • .red { color: red; }
  • .f60 { color: #f60; }
  • .ff8600 { color: #ff8600; }
  • 字体大小,直接使用”font+字体大小”作为名称,如
  • .font12px { font-size: 12px; }
  • .font9px {font-size: 9pt; }
  • 对齐样式,使用对齐目标的英文名称,如
  • .left { float:left; }
  • .bottom { float:bottom; }
  • 标题栏样式,使用”类别+功能”的方式命名,如
  • .barnews { }
  • .barproduct { }

  • 注意事项::
  • 一律小写;
  • 尽量用英文;
  • 不加中杠和下划线;
  • 尽量不缩写,除非一看就明白的单词.


  • 推荐的 CSS 书写顺序:
  • 显示属性
  • display
  • list-style
  • position
  • float
  • clear
  • 自身属性
  • width
  • height
  • margin
  • padding
  • border
  • background
  • 文本属性
  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
  • other text
  • content

附录二 CSS精灵


  • CSS精灵原理以及应用
  • CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。
  • 该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。
  • 一个简单的例子:
  • 一张图片作出一个按钮的三个状态
  • 一个链接用CSS做成按钮的样式,我们可以使用同一张图片,完成按钮的三个状态,a:link,a:hover,a:active <a class="button" href="#">链接</a>
  • 加入右侧的图片为:200px 65px的三个按钮图拼合而成的图片button.png,从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定义状态*/
 text-indent:-2015px; /*隐藏文字*/
 background-image:url(button.png); /*定义背景图片*/
 background-position:0 0;
 /*定义链接的普通状态,此时图像显示的是顶上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定义链接的滑过状态,此时显示的为中间部分,向下取负值*/
}
a:active {
 background-position:0 -132px; 
 /*定 义链接的普通状态,此时显示的是底部的部分,向下取负值*/
}
  • 更多的CSS雪碧,图片更复杂,背景定位更精确。可能会用到大量的数值
  • 如:background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
  • 优点:
  • 减少加载网页图片时对服务器的请求次数
  • 可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
  • 提高页面的加载速度
  • sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
  • 减少鼠标滑过的一些bug
  • IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。
  • 不足:
  • CSS雪碧的最大问题是内存使用
  • 影响浏览器的缩放功能
  • 拼图维护比较麻烦
  • 使CSS的编写变得困难
  • CSS 雪碧调用的图片不能被打印
  • 错误得使用 Sprites 影响可访问性

附录三 一些tips解决方案


页面优化实践


  • 从下面的几个方面可以进行页面的优化:
  • 减少请求数
  • 图片合并
  • CSS文件合并
  • 减少内联样式
  • 避免在 CSS中使用 import
  • 减少文件大小
  • 选择适合的图片格式
  • 图片压缩
  • CSS 值缩写(Shorthand Property)
  • 文件压缩
  • 页面性能
  • 调整文件加载顺序
  • 减少标签数量
  • 调整选择器长度
  • 尽量使用CSS 制作显示表现
  • 增强代码可读性与可维护性
  • 规范化
  • 语义化
  • 模块化

写DIV+CSS 的一些常识


  • 不要使用过小的图片做背景平铺
  • 这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200200=40, 000 次,占用资源
  • 无边框
  • 推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源
  • 慎用 通配符
  • 所谓通配符,就是将CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
  • CSS的十六进制颜色代码缩写
  • 习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
  • 样式放头上,脚本放脚下。不内嵌,只外链
  • 坚决不用 CSS表达式
  • 使用 引用样式表,而不是通过@import 导入。
  • 一般来说,PNG比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。
  • 千万不要在 HTML中缩放图片,一者不好看,二者占资源。
  • 正文字体最好用偶数
  • 12px、14px、16px,效果非常好。特例,15px。
  • block、ul、ol等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。
  • 段落之间,至少要有一倍行距
  • 强行指定某些元素的 line-height,正文 1.6倍于文字大小,标题1.3倍。
  • 中文标点用全角
  • 英文夹杂在中文中,左右空格,半角。
  • 中文字体的粗体和斜体,远离较好

常用代码片段


  • 雅虎工程师提供的CSS初始化示例代码【仅供参考】
  • 可以在html头文件中直接引用,从而避免浏览器的不兼容带来的错误。
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}
  • mobile meta标签
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
  • 表格不被撑开
table-layout: fixed; word-break: break-all;;border-collapse: collapse
  • 不设宽高居中
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>
  • 透明度的兼容代码
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
  • 文字溢出点点省略
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
  • 清除浮动的几种方法
  • 方法一:投机取巧法 – 不推荐
  • 直接一个放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强
  • 方法二:overflow + zoom方法 –不推荐
  • .fix{overflow:hidden; zoom:1;}
  • 此方法优点在于代码简洁,涵盖所有浏览器
  • 方法三:after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了
  • clearfix只应用在包含浮动子元素的父级元素上
.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}
  • 更多代码片段详情
  • 实用的60个CSS代码片段

一些总结


  • 自动继承属性:
  • color
  • font
  • text-align
  • list-style
  • 非继承属性:
  • background
  • border
  • position
  • 具有破坏性的元素:
  • float
  • display:none;
  • position:absoblute/fixed/sticky;
  • 具有包裹性的元素:
  • display:inline-block/table-cell
  • position:absolute/fixed/sticky
  • overflow:hidden/scroll
  • 消除图片底部间隙的方法
  • 图片块状化-无基线对齐
  • img{display:block;}
  • 图片底线对齐
  • img{vertical-align:bottom;}
  • 行高足够小 - 基线位置上移
  • .box{line-height:0;}

一些概念


  • BFC
  • BFC全称”Block Formatting Context” 中文为“块级格式化上下文”
  • 记住这么一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
  • 优雅降级(graceful degradation)
  • 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
  • 渐进增强 progressive enhancement:
  • 是在浏览器开启JavaScript功能后,如果浏览器版本不支持某些 JavaScript 能力,我们解决这种问题的方式
  • 平稳退化
  • 是在浏览器没有JavaScript功能,或没有开启JavaScript功能情况下,我们解决这种问题的方式;

学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!