百度统计
百度统计最新资讯,36氪聚合所有百度统计相关的文章报道,并为你提供最新的相关资讯。
本次共找到 45 条【
百度统计
】相关信息

HTML 30 年进化史

编者按:本文来自微信公众号“CSDN”(ID:CSDNnews),作者司徒正美,编辑伍杏玲,36氪经授权发布。 现在我们谈前端,大多数谈框架,对于前端最基础的 HTML 你了解多少呢?本文作者用近两万字为你详解 HTML 的进化史,涉及前身SGML、到浏览器大战,HTML 模块的详解、HTML5的进化…… 随着近年来,前端框架战争的白热化,战斗溢出到后端、移动端、小程序端等层面……大家似乎不像以前那么关注底层,HTML、JavaScript、CSS 被一些更高级的语言所转译,成为了前端的汇编语言。 或许在许多年后,培训公司将会教授新人:TypeScript 怎么写,Sass 怎么写,JSX 怎么写,这时可能会出现 jQuery 时代的荒诞问题——jQuery 与JavaScript 哪一个更快?这是一种悲哀,也是时代的进步吧。正如我们开心敲着电脑,不用关心底层的芯片是如何运作的。这是文明建立在极度脆弱的生态下的至高产品。 而我们浏览的复杂页面的底层是 HTML+CSS+JavaScript 构建的,其中HTML 是基础中的基础,但它经常被人所忽视。要不想页面文明轻易湮灭,我们需认真封存这部分知识,就像亚述人把他们的知识楔入到泥板中一样。 01 HTML 的前身 SGML 战争驱动文明发展,互联网是美国军队为了快速传送情报而发明的。如果单纯传送文字,当时的电报就可以实现,但显然像地图上的图像信息,电服就不行了。这时候需要一种语言来组织这些文字与影像,最好还能存在交互性。交互虽然不能实时,但总好过没有。于是学者们找到当时最流行的文档描述语言 SGML。 SGML 是国际上定义电子文档和内容描述的标准。它源于 1969 年 IBM 公司开发的文档描述语言 GML,GML 主要用来解决不同系统中文档格式不同的问题。后经过多年发展,1986 年经 ISO 批准为国际标准 ISO8897,并被称为 SGML。 它有许多 HTML 的特征,如内容与样式分离。在 SGML 中,标记分两种:一种用来描述文档显示的样式,称为程序标记;另一种用来描述文档中语句的用途,称为描述标记。一个 SGML 文件通常分三个层次:结构、内容和样式。结构为组织文档的元素提供框架,内容是信息本身,样式控制内容的显示。正因为如此,它的使用范围很广,被许多大型公司用来创建和发布信息。诸如布告、技术手册、章节目录、设计规范、各种信函等,都可以用它来设计描述。 但是 SGML 有致命的缺憾,并且它的优点成为了它的缺点。SGML 设计精良,规范严谨,导致了其复杂性也高,在军情紧急的情况下,需要快速交换情报,不能慢吞吞写好每个标签,因为当时每秒几个比特的网速也是一个问题。 因此它需要裁减,于是有了HTML。 http://info.cern.ch/ 世界第一个网站,非常简洁。 02 浏览器大战对 HTML 的影响 当时大家原本要的是一个精简版的 SGML,但最终他们得到的一个完全不同的东西。 这要从解析网页的浏览器说起,Web 之父 Tim Berners Lee 设计的浏览器WorldWidWeb 过于简单,于是让商业浏览器有可乘之机。 在刚开始时,浏览器商还是按照 W3C 的制定的规则,如 Mosia、Netscape,但微软介入之后就发生改变。微软制定自己的浏览器语法与标准,于是导致了两套标准的出现。 在规划中,HTML 也是一门严谨的语言,是高度有组织性、规范化、模块化。例如,规范化是有一个文档类型声明 DOCTYPE 来指明它怎么解析的。模块化,是说各种标签其实也是有组强性的,几个几个地划分地不同的族群,合起来实现一个功能,最著名的是表单与表格。 但是后来出现了一些意外,一些用来装饰用的标签(s、b、i、u、font)因为 CSS 的出现,被人们诉之败作,渐渐被边缘化与废弃。一些用来模拟 Excel 功能的标签(table、tbody、tr)被人们用来布局,弄得页面难以维护。 在 CSS 标准化时代,又矫枉过正,硬生生地用 DIV 来模拟表格。一些用来实现广告功能的标签,导致会有满屏飘动、不让用户关闭的乱象。在这几个大事故中,许多标签就是被胡乱使用或边缘化。 我个人认为最大原因是 W3C 没能自己开发一个浏览器,一直倚重某一个方,导致造成 HTML 的失控。 HTML 在语法上设计得非常简单易学。 HTML 标签是包在小括号里面,没有人规定标签名是大写还是小写。开标签中,标签名旁边有一些属性,这些属性的属性值没有人规定它是否能引号,引号是单引号还是双引号,没有规定标签是否一定要闭合。 可能当初是有规定的,但无法遵循。浏览器需要最快地将内容呈现给用户,但当时的网速不太可能,于是浏览器大厂允许用户可以不用闭合标签,不用严格括起属性值,也能跑起页面。这种纵容在当时成了优势,被其他浏览器争相模仿。 此外,还有更厉害的传输优化,比如页面源码是这样的: 实际在 IE6~8 的控制台下看到的源码是这样,通过大写化与对布尔属性的特殊处理,一点点地减少传输内容。 在 Google 早期的首页中,html、head、body 标签是刻意省略掉,因为它知道浏览器会支持这样残缺的页面。在自然界中,这是不可想象的,残缺的东西会被淘汰。 对于 HTML 的失控,W3C 决定开发另一种标签语言,于是 XML 诞生了。但 XML 出现得太晚了,无力回天。它一直作为数据的传输载体而存在,而不是描绘界面用。它其实是能描绘界面的,两个明证是 SVG 语言,及安卓里面的 XML 模板。 03 HTML 的版本 HTML 发布以来,迭代过许多版本,现在是小步快跑的第 5 版,但 HTML5 已经不是 W3C 所规范的了,是由一个浏览器大厂们组成的俱乐部 WHATWG 发布的。 下面是一个简单的路线图: 不存在 HTML1.0, 各自为战 HTML2.0,从 1995 年 11 月到 2000 年; HTML3.2, 从 1996 年 1 月到现在; HTML4.0,从 1997 年 12 月到现在; HTML4.01,从 1999 年 12 月到现在; XHTML 1.0,从 2000 年 1 月 20 日到现在; HTML5.0,从 2014 年 10 月 29 日到现在。 可以看出几个断层,HTML1.0 还没有准备好时,大家就争先抢后地开始做,于是当时相当地混乱。 早期的浏览器包括了:Tim Berners 的 WorldWideWeb 浏览器,兼具浏览器和编辑器功能,但只能运行在NeXTStep操作系统上;CERN的一位数学实习生 Nicola Pellow 开发出 Line-mode 浏览器,能运行在 UNIX 和 MS-DOS 上;Erwise 是第一个带图形界面的浏览器,支持搜索网页中的单词,由四名芬兰大学生开发,在 1992 年发布;加州伯克利的 Pei-Yuan Wei 在1992 年 4月发布了 ViolaWWW,这个浏览器受到了 Mac 程序 HyperCard 的启发,但他没有 Mac 只能接触到 UNIX 机器,1992 年夏天,斯坦福线性加速器中心物理学家 Tony Johnson 为斯坦福的物理学家发布了图形浏览器 Midas; 与此同时,CERN 的 Nicola Pellow 和 Robert Cailliau 发布了第一个Mac浏览器 Samba;基于 Viola和 Midas 的 Mosaic 在 1993 年发布;堪萨斯大学发布了 Lynx;康奈尔大学法学院学生 Tom Bruce 发布了 Cello。——节选自《被遗忘的早期浏览器》 HTML3.0时,改了又改,那时五大浏览器的四个玩家已经全场(IE、Netscape、Opera、Safari),要满足四家的喜好非常难。这也是目前还在支持的早期标准。 XHTML 是 W3C 最后一次赌博,想用 XML 的规范来修正 HTML 一直以来松散的编写形式,即要来闭合的地方必须闭合,属性值必须要括起来,废弃的标签不能再使用,还要求对 script 标签的内容使用 CDATA 包裹起来,DOCTYPE 变得很长……它们还专门编写一个网站给大家做校正: https://validator.w3.org/ 下面这段 XHTML 标准模式代码,符合 W3C XHTML 语法,能够执行(保存为 itworks.xhtml 文件,用 Firefox 打开): 俗话说,由俭入奢易,由奢入俭难。用户不习惯,如果写的页面不合格,浏览器不解析,意味着用户会跑去竞争对手中。因此这闹剧草草收场了。浏览器商也看到自己的能量所在,把 HTML 的规范制定收归手中。 04 HTML的模块介绍 在语义化时代,人家过于关注于单个标签所表示的意思,而忽略了组件是分群体的。只不过有的群体是弱联连,可以混杂其他标签,加之浏览器的自动纠错功能导致人们对它们的误解。这些群体我称之为模块。 我稍微归纳一下,当然在 W3C 的 HTML5.2 中它们也有另一套划分。那套划分很奇怪,某一种标签可能归类到多个类别中。 https://www.w3.org/TR/html52/dom.html#content-models 文档模块 文档模块就是、、、这几个标签,我们可以在 document 上访问到它,document.documentElement、document.body、document.head、document.title。它们可以省略不写,浏览器魔术般地补全它们。这些标签只是提供一个框架,告诉人们一些内容性的东西应该放在 body 中,功能性的东西应该放在 head 中。 功能模块 它是用来设置文档整体的功能或一些元信息,涉及的标签有<link>、<meta>、<base>、<script>与<style>。除了后两个,由于页面功能的膨胀,需要多人协作一个页面,于是出现一个页面存在多个<script>与<style>标签,它们可以分散到其他位置。<link>、<meta>、<base> 都集中在head 标签内。我也尝试过将 div 放在 head 中, head标签会自动将它赶回body里面。 <link> 标签有两个作用:1. 定义文档与外部资源的关系;2. 是链接样式表。HTML5 新加的预加载,预渲染等功能就在这标签上添加。 <meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。最有用的就是设置页面的字符集。 下面是简书的 meta 标签使用情况,它可以做许多事情,如百度 SEO、360 SEO、移动端的水滴屏设置、缩放设置,还有外国的一些社交网站的设置,需要有一些专门的知识才能玩得转。 <base>标签为页面上的所有链接规定默认地址或默认目标。 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。在 IE6-8 中这标签有一个可怕的 Bug,会将整个页面装进它的 innerHTML 中,导致你的选择器失灵。 排版模块 这涉及到的都是一些块狀元素,如div、h1-h6、blockquote、有序列表、无序列表、定义列表等,它们是自带样式的一种元素。在 HTML5 时代,会继续加上 article、aside、nav、section 等标签。 装饰模块 这是覆行 SGML 的样式显然功能,于是才出现这类标签,常见的有 s、u、i、b、big、small、sub、sup、center、font、br、nobr、hr。在强调语义化的时代,除了 br、nobr、hr 都完了。此外,还有一些不起眼的标签,被忘了,又赋以特殊含义又活下来,如:code、kbd、samp、cite、tt、var……它们自带样式,通常以另一种字体特别显示。 大片文本的显示模块 我们知道页面在传输过程会被加工,处理掉一些换行符与空白,如果我们想保留这些换行符与空白就需要这里面的三种标签了:pre、plaintext、xmp。其中 plaintext 已经被浏览器废弃掉了,彻底不能用了,不像那些被声明废弃还能苟活着的标签。pre 标签,大家可能熟悉些,它与 code 标签经常组合在一起,用于语法高亮。 xmp 则是在语法高亮没有发明之前,能完整地显示某一段 HTML 片断的结构的唯一标签。 xmp 会把里面的内容当成一个字符串,不会生成对应的 DOM。 这种能原样保持用户HTML的元素是非常有用的,常常用于做模板容器, 其他的如<script type="template"></script>、<noscript></noscript>,都有其优缺点,直到 HTML5 推出了 <template> 标签才解决这问题。 表单模块 表单模块是 HTML 最早支持的标签集,包括我们一直熟悉的 <form>、<input type="text" />、<input type="password" />、<input type="radio" />、<input type="checkbox" />、<input type="button" />、<textarea>、<select>、<optgroup>、<option> 。这些元素都是有一个特点,可以通过 tab 键切换下一个表单元素,可以设置 readony 属性防止用户修改它的值,可以设置 disabled 属性忽略该元素的值。在 HTML5 中,还存在 pattern 与 required,实现对表单的自动验证。 表格模块 表格开始时用来呈现execl类似的数据, 后来被人们用来做布局用了。许多网页制作工具,如上古时代的 Dreamweave 就是它生成页面。这页面能完美还原大家拖拽出来的效果,但是想再次加工就麻烦了。table 家族包括了 <table>、<thead>、<tbody>、<tfoot>、<th>、<td>、<col>、<colgroup>、<th>。 table 模板的标签是具有很强的排他性,只能在 td 与 th 加东西标签与文本,在 tr 或 tbody 之间加东西,它们会漏到外面去。 这就类似于 p 标签放 div 标签,会发生意料不到的解析。 页面组装模块 在网速起来后,页面的功能就会越堆越多,于是需要许多人共同开发一个页面。如果协作开发页面,在 JavaScript 没有模块化技术的情况下,浏览器提供了几个标签实现它:<frameset>、<frame>、<iframe>。它们都是自己独立的作用域,不用考虑全局变量的问题,不也用考虑某人的代码出 Bug 影响到其他人的情况。唯一要注意的是,防止别的网站用 frame 来装载我们的网站来做坏事,当然浏览器也会在这些标签上添加越来越多这样的属性。现在许多政府后台系统还是基于框架结构来构建页面。 广告模块 广告是众多网站最主要的收入来源。浏览器也有相应的标签做这样的事,一个是闪啊闪的 <blink> 标签,一个是飘啊标的 <marquee> 标签。时至今天,它们的际遇完全不一样,前者被干掉,后者被标准化了。 地图模块 地图模块涉及两个特别的标签 <map>、<area> 及一个常见的 <img> 标签。map 标签起来统帅的作用,而 area 标签则起着与其他标签不一样的触发区域。一般的可视标签,都是呈现为矩形。而 area 标签则根据它的 share 属性呈现为各种形状及不规则的多边形。 容灾模块 互联网早期是充满了意外,浏览器各自为战,实现也不同步,因此一些标签或功能并不支持,需要一些容灾处理。于是出现了 <noscript>、<noembed>、<noframes> 这几种标签。当浏览器禁用 JavaScript,或不支持 embed 标签,或不支持框架技术时,就会显示这几种标签里面的提示信息。 多媒体模块 为了让页面不只是单调的文字,浏览器先后支持以下标签来满足我们的官感:<img>、<bgsound>、<embed>、<object>、<applet>。 img 标签就不说了,早期要播放音乐,IE 下可以选择 bgsound,也可以使用万能的 object 标签,object 可以加载 flash 播放器,也可以加载 Windows 下的各种控件,如 Windows Media Player、RealONE Player。在 Firefox 中承担这个角色的是 embed 标签,音频视频都可以播放。Applet 则是 Java 如日中天时加入的标签,可以执行 Java JAR 包,在做银行安全控件或教学显示时非常有用。 05 多种文档的混排 上面走马看灯地回顾了一些标签,我们也了解到不断有标签被废弃,也不断有新的标签涌现出来。这些标签默认具有什么功能,有什么属性,有什么外观,或者如何与其他标签共存,都是规定在 DOCTYPE 中。所谓 HTML 规范其实就是这个文档类型声明。 一个页面加载下来,经过比特到字符到字符串到标签到 DOM 的层层转换,其中标签到 DOM 的解析就需要文档类型声明来处理,当然这里可能存在浏览器私下的非正式的纠错处理。但是文档类型声明作为页面的 DNA 角色是不变的。 在HTML5之前文档类型的声明基本都使用 DTD(document type definition),由于之前的版本基于 SMGL,DTD 规定了标记语言的规则,才能使浏览器正确的解析并呈现需要展示的内容。 下面是几种常见的文档类型声明: HTML 4.01 Frameset HTML 4.01 Strict XHTML 1.0 Frameset XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 这么长的代码不借助于工具或贴粘复制,是很难写的。因此 HTML5 的写法是异常简洁,也屏蔽了里面的 dtd 链接,反正也没有几个人打开它。 加之 HTML5 本来就是遵循小步快跑的规则,不断小版本迭代,因此 dtd 文件会时不时变化,这个就内置到浏览器中就行了。时至今天,所有大厂的网页都用上 HTML5 了。 下面是 HTML5 的 DOCTYPE 写法: 但是 html 上面的文档类型声明只是告诉浏览器如何处理 HTML 标签,在 HTML 文档中可能混杂其他文档。 比如我们要让页面更有说明力,需要出现雷达图、线段图、饼状图等等,就要用到 SVG。我们的页面是为高校制作的,需要用到专业的数字公式,这时需要用 math 标签。事实上,它们都是出自同一渊源,多种文档混排可能在 IE4 时代就存在了。 1998 年,微软发布了 VML 矢量标签语言,对于 XML 的混排则使用一种叫 XML 数据岛的技术实现了。 因此多文档的混排在IE4~8的情况是 HTML+VML+XML, 在其他浏览器则是 HTML+SVG+math,并且 SVG 里有 <foreignObject> 再加载 HTML 文档。在 HTML 规范转交给 WHATWG 的今天,SVG 与 math 继续交由学术性更强更严谨的 W3C 所维护升级。毕竟 HTML5 有许多新功能是玩票性质的,而学术性的东西则不能这样弄。 06 HTML5 的进化 现在我们对 HTML 的关注不如以前了,事实上 WHATWG 对它做了非常宏大的规划,非常多的功能需要逐年来迭代。但 React 这些大型前端框架的出现,掩盖了浏览器的努力。以前 Chrome 每次发版本常常吸引眼球,但 babel 可以让你用上还在讨论中的语言特性!那么让我们略微看一下 HTML5 的新特征吧。 装饰性标签基本废弃,使用带语义的装饰化标签代替 增加大量的表单元素 增加大量的布局标签 多媒体标签进化 语义化标签的崛起 在人们受够了table布局,前端工程师开始关注每个标签在发明时赋以它们的本来意义。 <b>加粗文字(bold) <i>倾斜文字(italic) <u>给文字加下划线(underline) <s>给文字加删除线(strike),其实早期是存在<strike>标签 这些标签能做功能CSS也能做,因此被干掉。HTML5带来了全新的标签,它们富有语义,对SEO或机器学习分析内容有帮助。 <strong>定义重要性强调的文字(strong) <ins>定义插入的文字(inserted) <em>定义强调的文字(enphasized) <del>定义被删除的文字(deleted) 更多表单元素 早期的表单元素,我们可以从收音机里挖到它们的本源。但经过20年来的发展,网页世界也有自己的创新,各式各样的日历、调试器,于是它们成为浏览器的自带控件了。下面是一些新标签:<meter>、<progress>、<outer>、 <datalist>,此外更多功能是复用到 input 标签,各种类型的日历、月历、年历、时间。 更多布局元素 在新布局元素没有出来时,人们对页面也是划分成不同区域。每个区域标识不同的 ID 或类名,以前谷歌做过一次调整,发现大家对这些ID或类名的取名都很相似,比如顶部的区域都叫 header,底部的区域都叫 footer,侧边栏都叫 leftside 或 rightside, 主内容区都叫 main,导航区几乎都叫 nav,还有弹出层,也统一叫 dialog。 下面是 HTML5 没有流行时,人们对页面的一个布局范例。 为了讨好用户,HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分。 <main> 标签规定文档的主要内容。一个页面只能出现一个<main> 标签。并且它不能被其他布局元素所包含。 <header>:描述了文档的头部区域,于定义内容的介绍展示区域。 <nav>:定义导航链接的部分。 <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,section通常包含了一组内容及其标题。 <article>:定义独立的内容。 <aside>:定义页面主区域内容之外的内容(比如侧边栏)。 <figure>:标签规定独立的流内容(图像、图表、照片、代码等等)。 <figcaption>:定义 <figure>元素的标题。 <footer>:述了文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。 在一个网页中,这些新的语义标签元素位置如下图所示: 这些新标签中最特别的是 dialog 标签,它自带全局居中与隐藏显示功能。 多媒体的增强 进入 HTML5 时代,<img> 支持多个图片源,这方面在不同的屏幕下适配不同大小的照片。播音频则交给更语义化的<audio>标签,播视频则交给更语义化的<video>标签,并且支持字幕文件(通过<track>标签挂载)。<canvas>本来是显示矢量图,随着浏览器性能越来越强,对位图也游刃有余,并结合一些 File API 来解析二进制质材, 让我们在浏览器跑起类似 flash 的动画与浏览。这几年,又兴起 WebAssembly, 3D动画与游戏也能跑了。canvas 在VR之风刮起时,又支持 WebGL,成为时下最强大的标签了。 观摩地址:https://gallery.echartsjs.com/editor.html?c=xHku9OE96l DOM的标准化 标签只是一个描述性语言,它们用来描述什么呢?就是描述 DOM。由于浏览器大战的缘故,DOM 一直没有统一,给开发平添了不少麻烦。jQuery 时代,前端开发者发掘了许多浏览器差异问题,除了给出兼容方案外,还提交给到浏览器厂商中,这些举动最终推动了浏览器的同一化。 最开始是自定义属性与固有属性的分离,在 IE6~8 中, 这两种属性是拎不清的,这就导致遍历元素属性时,一下子多出上百个属性,而在火狐中可能只有三个。 其次是标签对应的 DOM 元素的构造器公开化,以前 IE 是不公开这些接口,纯粹是黑盒子。而 Chrome、Firefox 都是根据 W3C 官网上的文档来制定接口。如果公开了这些构造器,我们就可以对它们做一些测试。 HTML5 兴起时,全世界也恰好转入移动互联网时代,浏览器添加了更多与手机相关的事件,如划动、长按、页面隐藏显示、是否离线、屏幕是否发生旋转、是否发动震动。 在 jQuery 的驱动下,选择器引擎官方化,querySelector比 getElementById 更加便利。 自定义标签 自定义标签是 HTML5 添加的最强大的功能。早在 IE5 时代,微软就推出过 HTC 来创建自定义标签。一些前端模板引擎也支持过自定义标签,可见这是一个非常热门的功能。 自定义标签可以让我们制定一个标签的外观,有什么固有属性及对生命周期进行干涉。在创建自定义标签时,我们需要用到一些新的标签如上面提到<template>及让用户传入其他标签的占位标签<slot>, 如果大家用过 vue,一定能快迅上手。 有关自定义标签可以参考以下链接: http://www.ruanyifeng.com/blog/2019/08/web_components.html 各种页面性能优化方案的内置实现 人们对页面性能的优化是永无止境,即便网速已经这么快了,CPU已经这么多核了。于是为了尽快加载资源,我们有DNS, 为了防止<script>堵塞页面渲染,我们把它们放到body的后面……这些奇技淫巧都被浏览器所收吸,做成一个个配置项了。 我们先看<link>标签上的优化方案: preload 对当前页面的要用到资源优化加载,并且不阻塞渲染和 document 的 onload 事件。使用了rel='preload'的 link 标签还可以指定 onload 事件,方便你进行后继处理。 prefetch 它的作用是告诉浏览器加载下一页面可能会用到的资源,注意,是下一页面,而不是当前页面。 prerender 而 prerender 不仅会加载资源,还会解执行页面,进行预渲染,但是这都是根据浏览器自身进行判断。 浏览器可能会分配少量资源对页面进行预渲染,挂起部分请求直至页面可见时可能会放弃预渲染,如果消耗资源过多等等情况。。。 prerender与prefetch都是针对下一个页面。 preconnect 浏览器要建立一个连接,需要经过 DNS 查找,TCP 三次握手和 TLS 协商(Https 需要),这些过程需要相当的耗时。因此 preconnect 能浏览器预先建立一个连接,等真正需要加载资源的时候能直接请求。 dns-prefetch DNS prefetch,即DNS预获取。前端优化中与DNS有关的两点:一个是减少DNS的请求次数,另一个是进行DNS预获取。 DNS 预获取可以加快页面渲染速度,无需用户点击链接就能在后台解析,所以能减少用户的等待时间,提升用户体验。默认情况下,浏览器会对当前页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。 <script>标签上的优化方案 IE 发明了一个 defer 属性,HTML5 规范则又加上另一个async属性。它们都能让<script>不会堵塞当前页面的加载与渲染,现在所有浏览器的script标签都支持这两种属性。它们两者也有稍微的区别。 defer 如果页面有多个设置了defer属性的script标签,它们在执行时,会根据它们在页面的位置从上到下依次执行。 defer属性的script标签的执行时机为,页面结构渲染之后,DOMContentLoaded回调触发之前。 async 如果页面有多个设置了async属性的script标签,它们在执行时是乱序,谁的资源加载完就立即执行,不会等待上面某一个defer属性的script标签执行。 async属性的script标签的执行时机,资源加载好就立即执行,与页面结构渲染无关,与DOMContentLoaded回调无关。 假如我们页面有两个script标签,给它们加上属性或不加属性,在chrome控制台的显示如下: 普通script: defer async 它们的执行时期与文件距离用户的服务器距离或文件大小有关,因此下面两种情况都可能发生。如果设置async的script标签越多,产生的情况就越多,无法预估。 推荐的应用场景 defer 如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。如评论框、代码语法高亮、语言补丁polyfill.js。 async 如果你的脚本并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。如百度统计。 如果不能确定的话,用defer比较稳妥。 07 结语 HTML发展到今天,功能远远超过当初展示页面提交表单的需求了。我的文章还有许多HTML5的新特征没有提到,浏览器不断提高它的外延,相当于把它自己当成一个操作系统了。 虽然现在有了非常好用的框架,让我们暂时忘记这些底层知识,但是我们所有一切的功能都是筑建在HTML之上,这一点万万不能忘记。我们要把自己当成一个建筑师,了解每一个材料的质地,才能打造更好的大厦。</a><div class="kr-flow-bar"><a class="kr-flow-bar-author" href="/user/616230990" target="_blank" rel="noopener noreferrer" sensors_operation_list="page_flow">CSDN</a><span class="kr-flow-bar-time" style="position:absolute;right:0;top:50%;margin-top:-9px"><i class="kr-flow-bar-time-icon"></i>2019-08-26</span></div></div></div></div></div></div><div class="detail-flow-item"><div class="kr-flow-article-item"><div class="kr-shadow-wrapper"><div class="kr-shadow-wrapper-card" style="width:720px;height:173px;top:-15px;left:-10px"></div><div class="kr-shadow-content"><div class="article-item-pic-wrapper"><a class="article-item-pic" href="/p/1722044334081" target="_blank" rel="noopener noreferrer " sensors_operation_list="page_flow"><div class="kr-default-img-no-logo scaleBig"></div></a></div><div class="article-item-info clearfloat" style="width:454px"><p class="title-wrapper ellipsis-2"><a class="article-item-title weight-bold" href="/p/1722044334081" target="_blank" rel="noopener noreferrer" sensors_operation_list="page_flow">从 0 到 1 教你设计业务系统</a></p><a class="article-item-description ellipsis-2" href="/p/1722044334081" target="_blank" rel="noopener noreferrer">本文将以一个案例,向读者逐步揭示一套业务系统从0到1的设计过程。重点讲述架构、模型等业务系统最本质的设计精要。</a><div class="kr-flow-bar"><a class="kr-flow-bar-author" href="/user/19881307" target="_blank" rel="noopener noreferrer" sensors_operation_list="page_flow">杨堃</a><span class="kr-flow-bar-time" style="position:absolute;right:0;top:50%;margin-top:-9px"><i class="kr-flow-bar-time-icon"></i>2017-11-28</span></div></div></div></div></div></div><div class="detail-flow-item"><div class="kr-flow-article-item"><div class="kr-shadow-wrapper"><div class="kr-shadow-wrapper-card" style="width:720px;height:173px;top:-15px;left:-10px"></div><div class="kr-shadow-content"><div class="article-item-pic-wrapper"><a class="article-item-pic" href="/p/1721212813313" target="_blank" rel="noopener noreferrer " sensors_operation_list="page_flow"><div class="kr-default-img-no-logo scaleBig"></div></a></div><div class="article-item-info clearfloat" style="width:454px"><p class="title-wrapper ellipsis-2"><a class="article-item-title weight-bold" href="/p/1721212813313" target="_blank" rel="noopener noreferrer" sensors_operation_list="page_flow">人口质量决胜未来——地产大数据之人口结构篇</a></p><a class="article-item-description ellipsis-2" href="/p/1721212813313" target="_blank" rel="noopener noreferrer">本文专注于人口年龄结构层面,探讨了人口年龄结构对地产、对消费等的影响。</a><div class="kr-flow-bar"><a class="kr-flow-bar-author" href="/user/375349" target="_blank" rel="noopener noreferrer" sensors_operation_list="page_flow">36氪的朋友们</a><span class="kr-flow-bar-time" style="position:absolute;right:0;top:50%;margin-top:-9px"><i class="kr-flow-bar-time-icon"></i>2016-10-14</span></div></div></div></div></div></div></div></div><div class="listDetail-main-right"><div class="right-search"><div class="recom-search"><div class="top-line"></div><div class="recom-search-content"><div class="recom-search-tittle">热门搜索</div><div class="recom-search-list clearfloat"><div class="recom-search-line"></div><div class="recom-search-box"><a class="recom-search-item ellipsis-1" title="英伟达" href="/search-list/186-1" target="_blank" rel="noopener noreferrer">英伟达</a><a class="recom-search-item ellipsis-1" title="华为" href="/search-list/162-1" target="_blank" rel="noopener noreferrer">华为</a><a class="recom-search-item ellipsis-1" title="小米" href="/search-list/75-1" target="_blank" rel="noopener noreferrer">小米</a><a class="recom-search-item ellipsis-1" title="Sora" href="/search-list/115-1" target="_blank" rel="noopener noreferrer">Sora</a><a class="recom-search-item ellipsis-1" title="OpenAI" href="/search-list/193-1" target="_blank" rel="noopener noreferrer">OpenAI</a></div></div></div></div></div></div></div></div></div></div></div><div class="kr-footer "><div class="footer-content"><div class="footer-wrapper"><div class="about36kr-wrapper"><div class="title weight-bold">关于36氪</div><div class="list-wrapper"><li><a href="/station-business" rel="noopener noreferrer nofollow" target="_blank">城市合作</a></li><li><a href="/seek-report" rel="noopener noreferrer nofollow" target="_blank">寻求报道</a></li><li><a>我要入驻</a></li><li><a href="http://ir.36kr.com" rel="noopener noreferrer nofollow" target="_blank">投资者关系</a></li></div><div class="list-wrapper"><li><a rel="noopener noreferrer nofollow">商务合作</a></li><li><a href="/pages/about" target="_blank" rel="noopener noreferrer nofollow">关于我们</a></li><li><a>联系我们</a></li><li><a href="https://zhaopin.36kr.com" rel="noopener noreferrer nofollow" target="_blank">加入我们</a></li></div><div class="list-one-wrapper"><a href="/refute-rumor-notice" rel="noopener noreferrer nofollow" target="_blank">网络谣言信息举报入口</a></div></div><div class="hotRecommend-wrapper"><div class="title weight-bold">热门推荐</div><div class="list-wrapper"><li><a href="/hot-list/catalog" rel="noopener noreferrer" target="_blank">热门资讯</a></li><li><a href="/project" rel="noopener noreferrer" target="_blank">热门产品</a></li><li><a href="/tags" rel="noopener noreferrer" target="_blank">文章标签</a></li><li><a href="/nftags" rel="noopener noreferrer" target="_blank">快讯标签</a></li></div></div><div class="parters-wrapper"><div class="title weight-bold">合作伙伴</div><ul class="footer-partner"><li><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="阿里云" data-src="//static.36krcdn.com/36kr-web/static/aly.e9118f2f.png"/></a></li><li><a href="https://www.volcengine.cn/" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="火山引擎" data-src="//static.36krcdn.com/36kr-web/static/bytey.7484dc04.png"/></a></li><li><a><img src="" alt="高德" data-src="//static.36krcdn.com/36kr-web/static/gaodi.9e9d6741.png"/></a></li><li><a href="https://www.getui.com/cn/index.html" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="个推" data-src="//static.36krcdn.com/36kr-web/static/getui.d2af25d2.png"/></a></li><li><a href="https://www.odaily.com" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="星球日报" data-src="//static.36krcdn.com/36kr-web/static/dailyPlanet.783b0e10.png"/></a></li><li><a href="https://www.jingdata.com" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="鲸准" data-src="//static.36krcdn.com/36kr-web/static/logo_jz@2x.525a51f1.png"/></a></li><li><a href="https://www.krspace.cn" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="氪空间" data-src="//static.36krcdn.com/36kr-web/static/logo_kkj@2x.47737e8d.png"/></a></li><li><a href="https://www.futunn.com/" target="_blank" rel="noopener noreferrer nofollow"><img src="" alt="富途牛牛" data-src="//static.36krcdn.com/36kr-web/static/ftnn.4f5db2d2.png"/></a></li><li><a href="https://www.36dianping.com/pk/" target="_blank" rel="noopener noreferrer"><img src="" alt="企服点评" data-src="//static.36krcdn.com/36kr-web/static/logo_qifudianping@2x.c5635d6a.png"/></a></li><li><a href="http://www.woshipm.com" target="_blank" rel="noopener noreferrer"><img src="" alt="人人都是产品经理" data-src="//static.36krcdn.com/36kr-web/static/renren@2x.f6ecd8fa.png"/></a></li><li><a href="https://www.36linkr.com" target="_blank" rel="noopener noreferrer"><img src="" alt="领氪" data-src="//static.36krcdn.com/36kr-web/static/lingke.34f56307.PNG"/></a></li></ul></div><div class="appDownload-wrapper"><div class="title weight-bold">36氪APP下载</div><img src="//static.36krcdn.com/36kr-web/static/code_production.72d61993.png" alt=""/><div class="info">iOS & Android</div></div><div class="footerInfo-wrapper"><a href="https://36kr.com/" class="footer-logo"><img src="" alt="36氪" data-src="//static.36krcdn.com/36kr-web/static/logoWhite.2a5eceda.png"/></a><div class="footer-center"><div class="footer-center-top">本站由 <span><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer nofollow">阿里云 </a>提供计算与安全服务 违法和不良信息、未成年人保护举报电话:010-89650707 举报邮箱:jubao@36kr.com <a href="https://www.12377.cn" target="_blank" rel="noopener noreferrer nofollow" style="font-weight:normal">网上有害信息举报</a></span></div><div class="footer-center-bottom"><span class="license-wrapper"><div class="license-pic"></div><span class="text">© 2011~<!-- -->2024<!-- --> 北京多氪信息科技有限公司 |<!-- --> </span></span><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP备12031756号-6</a> <!-- -->|<!-- --> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%25E5%258C%2597%25E4%25BA%25AC%25E5%25A4%259A%25E6%25B0%25AA%25E4%25BF%25A1%25E6%2581%25AF%25E7%25A7%2591%25E6%258A%2580%25E6%259C%2589%25E9%2599%2590%25E5%2585%25AC%25E5%258F%25B8&type=xuke" target="_blank">京ICP证150143号</a> <!-- -->|<!-- --> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502036099" target="_blank" rel="noopener noreferrer nofollow"> <!-- -->京公网安备11010502036099号</a></div></div><div class="share"><a href="https://weibo.com/wow36kr" rel="noopener noreferrer nofollow" target="_blank"><span class="iconSinaWeibo"></span></a><a href="/rss-center" target="_blank" rel="noopener noreferrer"><span class="iconRss"></span></a></div></div></div></div></div><div class="assit-wrapper undefined"><a href="https://36kr.com/mform/1755983296602372" rel="noopener noreferrer nofollow" target="_blank" class="feedBack"><div class="feedBack-img"></div><div class="feedText">意见反馈</div></a><div class="phone"><div class="phone-img"></div><div class="phone-content"><img src="//static.36krcdn.com/36kr-web/static/code_production.72d61993.png" alt=""/><div class="content"><span>36氪APP</span><span>让一部分人先看到未来</span></div></div></div><div class="code"><div class="code-img"></div><div class="code-content"><div class="tabs"><div data-index="0" class="bg">36氪</div><div data-index="1">鲸准</div><div data-index="2">氪空间</div></div><div class="tab-content"><div style="display:block"><img src="//static.36krcdn.com/36kr-web/static/kr.ad0c1158.jpg" alt=""/><p>推送和解读前沿、有料的科技创投资讯</p></div><div style="display:none"><img src="//static.36krcdn.com/36kr-web/static/jingzhun.9a251862.jpg" alt=""/><p>一级市场金融信息和系统服务提供商</p></div><div style="display:none"><img src="//static.36krcdn.com/36kr-web/static/krSpace.7efbe7d3.jpg" alt=""/><p>聚焦全球优秀创业者,项目融资率接近97%,领跑行业</p></div></div></div></div><div class="top"><div class="top-img"></div></div></div></div></div> <script>window.initialState={"navigator":{"userAgent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)"},"theme":"default","isSpider":false,"searchListDetail":{"code":0,"data":{"searchListData":{"count":45,"searchName":"百度统计","widgetList":[{"widgeId":1723725053953,"widgetImage":"https://img.36krcdn.com/20200410/v2_80d8a69c314b44658249cd0e20cec663_img_000","widgetTitle":"流量变贵,运营更重要,百度给智能小程序写出了这样一种解法","summary":"打通商业投放,分析不同投放计划带来的有效转化次数。","publishTime":1558583506000,"authorName":"柚子","authorRoute":"detail_author?userId=14123532","route":"detail_article?itemId=1723725053953"},{"widgeId":1721272942593,"widgetImage":"https://img.36krcdn.com/20200409/v2_e16397703da64da5a5d10cf6e1d93e60_img_000","widgetTitle":"帮助企业实现精细化运营,数极客推出数据采集分析工具","summary":"公司此前曾收获500万元天使轮投资。","publishTime":1480987171000,"authorName":"土","authorRoute":"detail_author?userId=241252","route":"detail_article?itemId=1721272942593"},{"widgeId":1722262257665,"widgetImage":"https://img.36krcdn.com/20200409/v2_762f03b6eb4b4a01905acee1f6f6c7b9_img_000","widgetTitle":"中国互联网数据分析行业生态:网站分析工具全解析","summary":"Google Analytics,可谓是最伟大的网站分析工具。","publishTime":1519894846000,"authorName":"iCDO互联网数据官","authorRoute":"detail_author?userId=1710220873","route":"detail_article?itemId=1722262257665"},{"widgeId":1722336460801,"widgetImage":"https://img.36krcdn.com/20200409/v2_5de41eaaa1a14ad2a469f0a13c484a79_img_000","widgetTitle":"36氪首发|获4000万元 A 轮融资,靠挖掘用户深度数据的「商助科技」,能否在营销云这条赛道上占得先机","summary":"相比于免费的 SaaS 服务,商助科技的付费工具能够给企业提供更加深度的用户数据。","publishTime":1520812804000,"authorName":"徐宇","authorRoute":"detail_author?userId=182836939","route":"detail_article?itemId=1722336460801"},{"widgeId":1641755639809,"widgetImage":"https://img.36krcdn.com/20200408/v2_7e999367e9ef4533b05356b4d88c42e0_img_000","widgetTitle":"网站监测工具Kissmetrics B轮融资 700万美元,打造一个以用户为分析主体的监测工具","summary":"企业分析服务公司Kissmetrics 在近期结束的B 轮融资中共获得700万美元融资,由True Ventures 及 Azure Capital Partners 领投,估值未知。自08年成立起,Kissmetrics 累积融资已达1100万美元。KissMetrics 是一款以人为核心的分析工具,你可以通过它查看诸如网站来访用户注册率等参数,从而优化你的网站模块,提高来访用户注册率。","publishTime":1374490696000,"authorName":"果子York","authorRoute":"detail_author?userId=12544","route":"detail_article?itemId=1641755639809"},{"widgeId":1721505923073,"widgetImage":"https://img.36krcdn.com/20200409/v2_99face06a10043e4907dd44120acc124_img_000","widgetTitle":"车内语音直播平台“擎话”完成数百万元天使轮融资,星河互联领投","summary":"已有iOS、安卓版本,车机、智能后视镜版本将会在Q2推出。","publishTime":1493130809000,"authorName":"Nicholas","authorRoute":"detail_author?userId=757","route":"detail_article?itemId=1721505923073"},{"widgeId":1641746268161,"widgetImage":"https://img.36krcdn.com/20200408/v2_bb56f987a5c4491082889d6880cc753c_img_000","widgetTitle":"从云存储到云生态,百度面向开发者推出“百度开放云”","summary":"还记得有期湖南台《天天向上》做了一个百度专场,里面有个百度云布道师,无论主持人说什么,都万能的回复一句“可以存在云里”。昨天的百度云媒体开放日上,布道师除了重复“可以存在云里”外,还多加了一句“云生态”。布道师表示,百度的云生态包括面向个人用户的“百度云”和面向开发者的“百度开放云”。\r\n","publishTime":1372300720000,"authorName":"鏡宇cupl","authorRoute":"detail_author?userId=10496","route":"detail_article?itemId=1641746268161"},{"widgeId":882662173983750,"widgetImage":"https://img.36krcdn.com/20200915/v2_40222b287b974ab4be4b708307b4393a_img_jpeg?x-oss-process=image/resize,m_mfit,w_432,h_288,limit_0/crop,w_432,h_288,g_center","widgetTitle":"百度首发5G云代驾,李彦宏放言5年内一线城市不需要限行","summary":"自动驾驶将在5年后全面商用。","publishTime":1600145363692,"authorName":"36氪Auto","authorRoute":"detail_author?userId=19993168","route":"detail_article?itemId=882662173983750"},{"widgeId":1641991979009,"widgetImage":"https://img.36krcdn.com/20200409/v2_923b4a2fe09a4e8f93e123950a49f84c_img_000","widgetTitle":"用最全面的访客行为分析帮你搞定网站用户体验,ClickTale再获3500万美元融资","summary":"各类网站吸引客流必备神器","publishTime":1422519496000,"authorName":"爱因斯舒","authorRoute":"detail_author?userId=7717","route":"detail_article?itemId=1641991979009"},{"widgeId":1723776237569,"widgetImage":"https://img.36krcdn.com/20200410/v2_b1ea3fd2e94f4880b54fde3c6bbcf272_img_000","widgetTitle":"小程序“留”量为王","summary":"互联网是过去的沃野,“户”联网是当下的良药;流量为王不可取,“留”量为王当立","publishTime":1559269812000,"authorName":"百花","authorRoute":"detail_author?userId=16333766","route":"detail_article?itemId=1723776237569"},{"widgeId":1721378521089,"widgetImage":"https://img.36krcdn.com/20200408/v2_98040c68805344038449608aacbc6a0e_img_000","widgetTitle":"“诸葛IO”悄然拿到A轮,今天又发布了三大场景解决方案","summary":"诸葛IO前半段是广告/渠道投放检测与优化,后半段是运营分析与优化。","publishTime":1496740704000,"authorName":"徐宁","authorRoute":"detail_author?userId=79926","route":"detail_article?itemId=1721378521089"},{"widgeId":1721297911809,"widgetImage":"https://img.36krcdn.com/20200409/v2_5edf54379ab14174864419044a06b3f4_img_000","widgetTitle":"大数据行业图谱之二:前有堵截,后有追兵,通用技术类公司如何突围","summary":"面对传统集成商和BAT互联网巨头的夹击,通用技术领域公司如何突围?","publishTime":1482135344000,"authorName":"爱分析ifenxi","authorRoute":"detail_author?userId=742099006","route":"detail_article?itemId=1721297911809"},{"widgeId":1721286361089,"widgetImage":"https://img.36krcdn.com/20200409/v2_daca77dbb97c4e69a25cd51c12e9b34c_img_000","widgetTitle":"可采集不同渠道700余项指标数据,商助科技营销云能和IBM抢生意?","summary":"公司目前正在进行A轮融资。","publishTime":1481626539000,"authorName":"土","authorRoute":"detail_author?userId=241252","route":"detail_article?itemId=1721286361089"},{"widgeId":1641815752705,"widgetImage":"https://img.36krcdn.com/20200408/v2_506e38f3c26d47ef8b62f7575cbd2577_img_000","widgetTitle":"Ghost,全新 Email 式个人博客平台:和繁杂的后台管理说再见","summary":"Ghost 现在作为一个博客平台,最大的优势就在于写博客变得如此简单方便,没有任何后台管理、没有任何载入后台的等待,更重要的是,不需要用户自己再去操心购买服务器的事了。Ghost 的内容写作及编辑就和 Email 的体验差不多,界面左边是编辑器,右边则是页面预览,添加标签等等细节功能都如此方便。","publishTime":1387241723000,"authorName":"minastinis","authorRoute":"detail_author?userId=1629","route":"detail_article?itemId=1641815752705"},{"widgeId":1720938708993,"widgetImage":"https://file.36krcdn.com/20200409/v2_9b176a984dd94251a10a04386b95c8d5_file_000","widgetTitle":"“神策数据”面向中小企业提供私人定制方案,算是条蹊径么?","summary":"现在做大数据的初创企业,服务于小公司是不错的选择。","publishTime":1443179887000,"authorName":"徐宁","authorRoute":"detail_author?userId=79926","route":"detail_article?itemId=1720938708993"},{"widgeId":1722305069057,"widgetImage":"https://img.36krcdn.com/20200409/v2_34d1ab2b30244e178556658a24e25dd3_img_000","widgetTitle":"百度零售大数据入场:重构人货场的节点是数据及背后模型","summary":"百度的优势在于强有力的计算资源和数据","publishTime":1519776544000,"authorName":"韩旭","authorRoute":"detail_author?userId=927398342","route":"detail_article?itemId=1722305069057"},{"widgeId":1640784429057,"widgetImage":"https://img.36krcdn.com/20200408/v2_307947ba6dc748e790986cfa12c3882e_img_000","widgetTitle":"电商大佬鏖战价格,细分平台聚首共谋电商个性化推荐的未来","summary":"在经过昨天一整天的预热过后,国内电商大佬京东、苏宁、国美今日如期开战。尽管没有出现大家所期待的“你敢1元,我就敢0元”,但电商大佬们的价格战却再次让国内互联网弥漫在硝烟中。对于此次开战的起因或动机,大家都有各自的看法,不过归根结底还是为了抢占市场、卖产品赚钱。\r\n\r\n然而就在大佬们将互联网变成硝烟弥漫的战场时,基于大数据挖掘为电商提供个性化推荐服务的创业公司 -- “百分点”却聚齐一众细分领域的网络零售服务商,共同探讨电子商务个性化推荐的未来。","publishTime":1345038337000,"authorName":"曾子嶒","authorRoute":"detail_author?userId=15068","route":"detail_article?itemId=1640784429057"},{"widgeId":1724839067649,"widgetImage":"https://img.36krcdn.com/20200408/v2_c31a01d3784d47edb9027f398530c948_img_000","widgetTitle":"不依靠第三方,《纽约时报》开发新工具优化内容投放策略","summary":"一起了解《纽约时报》为何放弃跟踪像素?媒体自己独立开发的这款新工具又有何独特之处?","publishTime":1576458735000,"authorName":"全媒派","authorRoute":"detail_author?userId=983273793","route":"detail_article?itemId=1724839067649"},{"widgeId":1722528497665,"widgetImage":"https://img.36krcdn.com/20200409/v2_400eb1d9aa274de393d4792c89081275_img_000","widgetTitle":"电商网站运营技巧:五大方面入手运营电商网站","summary":"论电商如何运营","publishTime":1526737287000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1722528497665"},{"widgeId":1721002639361,"widgetImage":"https://file.36krcdn.com/20200409/v2_b39ff596043946c58dc5c3652240246c_file_000","widgetTitle":"3大要点,4种场景揭秘用户体验如何驱动产品设计","summary":"产品再好,用户不买单,也是没有什么用的。","publishTime":1451439951000,"authorName":"人人都是产品经理","authorRoute":"detail_author?userId=419888","route":"detail_article?itemId=1721002639361"},{"widgeId":1721623232513,"widgetImage":"https://img.36krcdn.com/20200409/v2_6aa73eb2c55c45a6b6af93596820deb6_img_000","widgetTitle":"作为产品经理,你每天会观察哪些数据?","summary":"看数据这种技能也是越练越熟,真有「数据 sense 」这种东西,经常看就会对数据更敏感,更容易发现数据中隐藏的信息。","publishTime":1497363475000,"authorName":"人人都是产品经理","authorRoute":"detail_author?userId=419888","route":"detail_article?itemId=1721623232513"},{"widgeId":1724988391425,"widgetImage":"https://img.36krcdn.com/20200409/v2_13a661d329d5405e972190623f761258_img_000","widgetTitle":"和 Windows 7 告别的第一天,想它,想它,想它","summary":"在缅怀 Windows 7 的同时,也不要忘了走在前面的铺路人 Windows Vista。","publishTime":1578967690000,"authorName":"品玩","authorRoute":"detail_author?userId=17325558","route":"detail_article?itemId=1724988391425"},{"widgeId":1723070267393,"widgetImage":"https://img.36krcdn.com/20200409/v2_6b030fcf97624c89aed411cb7266314e_img_000","widgetTitle":"投资人的2018:当见死不救成为主旋律","summary":"锦上添花易,雪中送炭难","publishTime":1545175889000,"authorName":"熊出墨请注意","authorRoute":"detail_author?userId=423471431","route":"detail_article?itemId=1723070267393"},{"widgeId":1722608844801,"widgetImage":"https://img.36krcdn.com/20200410/v2_047494f7b49345bf959c2a69d6e57279_img_000","widgetTitle":"运营新人没后台权限,如何运用数据思维,做有效的运营工作?","summary":"能否运用数据思维与所谓的“权限”、“许可”没有关系。","publishTime":1529553665000,"authorName":"暖石网","authorRoute":"detail_author?userId=11684742","route":"detail_article?itemId=1722608844801"},{"widgeId":1293270843327105,"widgetImage":"https://img.36krcdn.com/20210702/v2_763ae579d08a43a7a80b6072430e4d95_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center","widgetTitle":"火出圈的主题曲,难撑起蜜雪冰城的“上行梦”","summary":"“神曲营销”可解一时之忧,品牌调性才是蜜雪冰城真正应该发力的方向所在。","publishTime":1625210032328,"authorName":"师天浩","authorRoute":"detail_author?userId=31665","route":"detail_article?itemId=1293270843327105"},{"widgeId":1722084786177,"widgetImage":"https://img.36krcdn.com/20200409/v2_30f849e82b3c4481815c3f7a392cccb0_img_000","widgetTitle":"氪纪 2017 | 企业服务“商业化”的一年,接下来是耐力赛","summary":"虽然企业服务比较慢,但对社会的价值,必定会以一种形式被认可。","publishTime":1514856430000,"authorName":"徐宁","authorRoute":"detail_author?userId=79926","route":"detail_article?itemId=1722084786177"},{"widgeId":1721138216961,"widgetImage":"https://img.36krcdn.com/20200409/v2_b894f14a017c43ecbd653b6a2cd3586a_img_000","widgetTitle":"“埋点”到底要不要?——源自数据采集的痛苦、幻想与失望","summary":"​随着移动互联网时代的兴起和数据量的大规模爆发,越来越多的互联网企业开始重视数据的质量。在我创业的这一年里,接触了 200 多家创业型公司,发现如今的企业对数据的需求已经不仅仅局限于简单的 PV、UV,而是更加重视用户使用行为数据的相关分析。","publishTime":1469280519000,"authorName":"PMCAFF产品社区","authorRoute":"detail_author?userId=401113","route":"detail_article?itemId=1721138216961"},{"widgeId":2605357040352128,"widgetImage":"https://img.36krcdn.com/hsossms/20240115/v2_3ace4e43a9dc4701affcd55073e97801@5888275_oswg861516oswg1053oswg495_img_png?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center","widgetTitle":"AI触发内部赛马,百度重返电商战局","summary":"AI时代的百度,能掀翻现有电商格局的桌子吗?","publishTime":1705292269635,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=2605357040352128"},{"widgeId":1721119768577,"widgetImage":"https://file.36krcdn.com/20200409/v2_f6f82303ddaa48f4908d2b84a70a89fc_file_000","widgetTitle":"创业公司如何构建数据指标体系?","summary":"产品、运营新手,一般会对构建指标体系比较困惑,不知如何下手,第一关键指标法和海盗指标法可以给大家提供一些帮助。","publishTime":1467201909000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1721119768577"},{"widgeId":1721385156609,"widgetImage":"https://img.36krcdn.com/20200408/v2_e957daf5b1f04f8793c7ab4d2ae4d120_img_000","widgetTitle":"PTMind从日本杀来中国,用“运营数据分析+可视化”抢市场","summary":"公司目前已启动下一轮融资。","publishTime":1492783503000,"authorName":"徐宁","authorRoute":"detail_author?userId=79926","route":"detail_article?itemId=1721385156609"},{"widgeId":1721014075393,"widgetTitle":"创业公司中运营人员的\b典型一天是怎么度过的?","summary":"产品不同、产品阶段不同、运营团队的配置不同,运营岗位的差异会导致大家日常的工作会不一样;","publishTime":1452955652000,"authorName":"章鱼怕黑","authorRoute":"detail_author?userId=235568","route":"detail_article?itemId=1721014075393"},{"widgeId":1720934236161,"widgetImage":"https://img.36krcdn.com/20200409/v2_838e41f29ba84336a1ec705a39db5d8a_img_000","widgetTitle":"初创团队的精细化分析和 Growth Hacking","summary":"其实现今为止,大多数公司只关注三件事:流量、用户、收入。","publishTime":1442396803000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1720934236161"},{"widgeId":1722229096449,"widgetImage":"https://img.36krcdn.com/20200409/v2_7386e4614f2b430c89adfe2680b80d55_img_000","widgetTitle":"2017产品经理白皮书:加班、背锅、被黑,全因产品经理是“距CEO最近的职位”","summary":"坚持自己的选择,相信产品的力量,时间会让你我发光。","publishTime":1517203905000,"authorName":"人人都是产品经理","authorRoute":"detail_author?userId=419888","route":"detail_article?itemId=1722229096449"},{"widgeId":1722864844801,"widgetImage":"https://img.36krcdn.com/20200409/v2_d7c7e6f43e8d41bfb4238248ed5695a6_img_000","widgetTitle":"新规出台,互联网医疗公司何以继续他们的故事","summary":"互联网医疗动了谁的“奶酪”","publishTime":1538120836000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1722864844801"},{"widgeId":1722474086401,"widgetImage":"https://img.36krcdn.com/20200409/v2_1d8328686b0d444198759403af40e74d_img_000","widgetTitle":"手把手教你搭建数据化用户运营体系","summary":"数据化用户运营是利用用户运营的思路,结合数据分析的思想,业务指导数据,数据驱动业务,实现对用户的精细化运营,这是数据化用户运营的核心思想。","publishTime":1524804851000,"authorName":"章鱼怕黑","authorRoute":"detail_author?userId=235568","route":"detail_article?itemId=1722474086401"},{"widgeId":1721015664641,"widgetImage":"https://file.36krcdn.com/20200408/v2_51fe67d30635477cb324e88ab64f8e7d_file_000","widgetTitle":"好的产品运营需要具备哪些技能?","summary":"作为创业公司的运营,也许你连60分都没有达到!","publishTime":1453799385000,"authorName":"章鱼怕黑","authorRoute":"detail_author?userId=235568","route":"detail_article?itemId=1721015664641"},{"widgeId":1721378963457,"widgetImage":"https://img.36krcdn.com/20200408/v2_2007e81f8b7c4b619f9388650fad1d60_img_000","widgetTitle":"设计并制作一份运营报告:我踩过的坑和换来的思考","summary":"这篇文章,分享一些我在设计运营报告时的做法和思考,希望能让你变得牛b。","publishTime":1487766685000,"authorName":"人人都是产品经理","authorRoute":"detail_author?userId=419888","route":"detail_article?itemId=1721378963457"},{"widgeId":2446904830730118,"widgetImage":"https://img.36krcdn.com/hsossms/20230925/v2_919e21fef633493a98e9283505ec87d0@000000_oswg62484oswg1280oswg545_img_000?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center","widgetTitle":"2023上半年互联网广告行业观察及未来展望","summary":"任何数据都是对过去的反映,数据具有滞后性","publishTime":1695633298932,"authorName":"走马财经","authorRoute":"detail_author?userId=5438558","route":"detail_article?itemId=2446904830730118"},{"widgeId":1721273335809,"widgetImage":"https://img.36krcdn.com/20200409/v2_2fab611eaf784d7081173a085ba02c93_img_000","widgetTitle":"运营入门,从0到1搭建数据分析知识体系","summary":"套路,都是套路!","publishTime":1480693299000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1721273335809"},{"widgeId":1722383220737,"widgetImage":"https://img.36krcdn.com/20200409/v2_37103209658a4d1ab64344a0973d7632_img_000","widgetTitle":"互联网实战经验分享:10个月,订单量增加了100倍","summary":"差不多10个月左右的时间,订单量从原来的α,增加到了如今的100α。","publishTime":1522134889000,"authorName":"人人都是产品经理","authorRoute":"detail_author?userId=419888","route":"detail_article?itemId=1722383220737"},{"widgeId":1725106520065,"widgetImage":"https://img.36krcdn.com/20200409/v2_9ce2ebf372c34706b10ef34c1d10b565_img_000","widgetTitle":"2020“战疫”:科技&创业公司在行动 ④","summary":"抗疫战场上,企业持续发力。","publishTime":1581649136000,"authorName":"创投小助手","authorRoute":"detail_author?userId=13041157","route":"detail_article?itemId=1725106520065"},{"widgeId":2075192282861831,"widgetImage":"https://img.36krcdn.com/20230105/v2_72e4a43c49804a288237431a14f2eacc_img_000","widgetTitle":"3年时间从0到1,一款运营&数据平台的失败复盘","summary":"一个产品总监的失败故事","publishTime":1673331526132,"authorName":"Kevin","authorRoute":"detail_author?userId=5045707","route":"detail_article?itemId=2075192282861831"},{"widgeId":1724244361217,"widgetImage":"https://img.36krcdn.com/20200410/v2_b2cce75715b54d1d83db673787657dc0_img_000","widgetTitle":"HTML 30 年进化史","summary":"编者按:本文来自微信公众号“CSDN”(ID:CSDNnews),作者司徒正美,编辑伍杏玲,36氪经授权发布。 现在我们谈前端,大多数谈框架,对于前端最基础的 HTML 你了解多少呢?本文作者用近两万字为你详解 HTML 的进化史,涉及前身SGML、到浏览器大战,HTML 模块的详解、HTML5的进化…… 随着近年来,前端框架战争的白热化,战斗溢出到后端、移动端、小程序端等层面……大家似乎不像以前那么关注底层,HTML、JavaScript、CSS 被一些更高级的语言所转译,成为了前端的汇编语言。 或许在许多年后,培训公司将会教授新人:TypeScript 怎么写,Sass 怎么写,JSX 怎么写,这时可能会出现 jQuery 时代的荒诞问题——jQuery 与JavaScript 哪一个更快?这是一种悲哀,也是时代的进步吧。正如我们开心敲着电脑,不用关心底层的芯片是如何运作的。这是文明建立在极度脆弱的生态下的至高产品。 而我们浏览的复杂页面的底层是 HTML+CSS+JavaScript 构建的,其中HTML 是基础中的基础,但它经常被人所忽视。要不想页面文明轻易湮灭,我们需认真封存这部分知识,就像亚述人把他们的知识楔入到泥板中一样。 01 HTML 的前身 SGML 战争驱动文明发展,互联网是美国军队为了快速传送情报而发明的。如果单纯传送文字,当时的电报就可以实现,但显然像地图上的图像信息,电服就不行了。这时候需要一种语言来组织这些文字与影像,最好还能存在交互性。交互虽然不能实时,但总好过没有。于是学者们找到当时最流行的文档描述语言 SGML。 SGML 是国际上定义电子文档和内容描述的标准。它源于 1969 年 IBM 公司开发的文档描述语言 GML,GML 主要用来解决不同系统中文档格式不同的问题。后经过多年发展,1986 年经 ISO 批准为国际标准 ISO8897,并被称为 SGML。 它有许多 HTML 的特征,如内容与样式分离。在 SGML 中,标记分两种:一种用来描述文档显示的样式,称为程序标记;另一种用来描述文档中语句的用途,称为描述标记。一个 SGML 文件通常分三个层次:结构、内容和样式。结构为组织文档的元素提供框架,内容是信息本身,样式控制内容的显示。正因为如此,它的使用范围很广,被许多大型公司用来创建和发布信息。诸如布告、技术手册、章节目录、设计规范、各种信函等,都可以用它来设计描述。 但是 SGML 有致命的缺憾,并且它的优点成为了它的缺点。SGML 设计精良,规范严谨,导致了其复杂性也高,在军情紧急的情况下,需要快速交换情报,不能慢吞吞写好每个标签,因为当时每秒几个比特的网速也是一个问题。 因此它需要裁减,于是有了HTML。 http://info.cern.ch/ 世界第一个网站,非常简洁。 02 浏览器大战对 HTML 的影响 当时大家原本要的是一个精简版的 SGML,但最终他们得到的一个完全不同的东西。 这要从解析网页的浏览器说起,Web 之父 Tim Berners Lee 设计的浏览器WorldWidWeb 过于简单,于是让商业浏览器有可乘之机。 在刚开始时,浏览器商还是按照 W3C 的制定的规则,如 Mosia、Netscape,但微软介入之后就发生改变。微软制定自己的浏览器语法与标准,于是导致了两套标准的出现。 在规划中,HTML 也是一门严谨的语言,是高度有组织性、规范化、模块化。例如,规范化是有一个文档类型声明 DOCTYPE 来指明它怎么解析的。模块化,是说各种标签其实也是有组强性的,几个几个地划分地不同的族群,合起来实现一个功能,最著名的是表单与表格。 但是后来出现了一些意外,一些用来装饰用的标签(s、b、i、u、font)因为 CSS 的出现,被人们诉之败作,渐渐被边缘化与废弃。一些用来模拟 Excel 功能的标签(table、tbody、tr)被人们用来布局,弄得页面难以维护。 在 CSS 标准化时代,又矫枉过正,硬生生地用 DIV 来模拟表格。一些用来实现广告功能的标签,导致会有满屏飘动、不让用户关闭的乱象。在这几个大事故中,许多标签就是被胡乱使用或边缘化。 我个人认为最大原因是 W3C 没能自己开发一个浏览器,一直倚重某一个方,导致造成 HTML 的失控。 HTML 在语法上设计得非常简单易学。 HTML 标签是包在小括号里面,没有人规定标签名是大写还是小写。开标签中,标签名旁边有一些属性,这些属性的属性值没有人规定它是否能引号,引号是单引号还是双引号,没有规定标签是否一定要闭合。 可能当初是有规定的,但无法遵循。浏览器需要最快地将内容呈现给用户,但当时的网速不太可能,于是浏览器大厂允许用户可以不用闭合标签,不用严格括起属性值,也能跑起页面。这种纵容在当时成了优势,被其他浏览器争相模仿。 此外,还有更厉害的传输优化,比如页面源码是这样的: 实际在 IE6~8 的控制台下看到的源码是这样,通过大写化与对布尔属性的特殊处理,一点点地减少传输内容。 在 Google 早期的首页中,html、head、body 标签是刻意省略掉,因为它知道浏览器会支持这样残缺的页面。在自然界中,这是不可想象的,残缺的东西会被淘汰。 对于 HTML 的失控,W3C 决定开发另一种标签语言,于是 XML 诞生了。但 XML 出现得太晚了,无力回天。它一直作为数据的传输载体而存在,而不是描绘界面用。它其实是能描绘界面的,两个明证是 SVG 语言,及安卓里面的 XML 模板。 03 HTML 的版本 HTML 发布以来,迭代过许多版本,现在是小步快跑的第 5 版,但 HTML5 已经不是 W3C 所规范的了,是由一个浏览器大厂们组成的俱乐部 WHATWG 发布的。 下面是一个简单的路线图: 不存在 HTML1.0, 各自为战 HTML2.0,从 1995 年 11 月到 2000 年; HTML3.2, 从 1996 年 1 月到现在; HTML4.0,从 1997 年 12 月到现在; HTML4.01,从 1999 年 12 月到现在; XHTML 1.0,从 2000 年 1 月 20 日到现在; HTML5.0,从 2014 年 10 月 29 日到现在。 可以看出几个断层,HTML1.0 还没有准备好时,大家就争先抢后地开始做,于是当时相当地混乱。 早期的浏览器包括了:Tim Berners 的 WorldWideWeb 浏览器,兼具浏览器和编辑器功能,但只能运行在NeXTStep操作系统上;CERN的一位数学实习生 Nicola Pellow 开发出 Line-mode 浏览器,能运行在 UNIX 和 MS-DOS 上;Erwise 是第一个带图形界面的浏览器,支持搜索网页中的单词,由四名芬兰大学生开发,在 1992 年发布;加州伯克利的 Pei-Yuan Wei 在1992 年 4月发布了 ViolaWWW,这个浏览器受到了 Mac 程序 HyperCard 的启发,但他没有 Mac 只能接触到 UNIX 机器,1992 年夏天,斯坦福线性加速器中心物理学家 Tony Johnson 为斯坦福的物理学家发布了图形浏览器 Midas; 与此同时,CERN 的 Nicola Pellow 和 Robert Cailliau 发布了第一个Mac浏览器 Samba;基于 Viola和 Midas 的 Mosaic 在 1993 年发布;堪萨斯大学发布了 Lynx;康奈尔大学法学院学生 Tom Bruce 发布了 Cello。——节选自《被遗忘的早期浏览器》 HTML3.0时,改了又改,那时五大浏览器的四个玩家已经全场(IE、Netscape、Opera、Safari),要满足四家的喜好非常难。这也是目前还在支持的早期标准。 XHTML 是 W3C 最后一次赌博,想用 XML 的规范来修正 HTML 一直以来松散的编写形式,即要来闭合的地方必须闭合,属性值必须要括起来,废弃的标签不能再使用,还要求对 script 标签的内容使用 CDATA 包裹起来,DOCTYPE 变得很长……它们还专门编写一个网站给大家做校正: https://validator.w3.org/ 下面这段 XHTML 标准模式代码,符合 W3C XHTML 语法,能够执行(保存为 itworks.xhtml 文件,用 Firefox 打开): 俗话说,由俭入奢易,由奢入俭难。用户不习惯,如果写的页面不合格,浏览器不解析,意味着用户会跑去竞争对手中。因此这闹剧草草收场了。浏览器商也看到自己的能量所在,把 HTML 的规范制定收归手中。 04 HTML的模块介绍 在语义化时代,人家过于关注于单个标签所表示的意思,而忽略了组件是分群体的。只不过有的群体是弱联连,可以混杂其他标签,加之浏览器的自动纠错功能导致人们对它们的误解。这些群体我称之为模块。 我稍微归纳一下,当然在 W3C 的 HTML5.2 中它们也有另一套划分。那套划分很奇怪,某一种标签可能归类到多个类别中。 https://www.w3.org/TR/html52/dom.html#content-models 文档模块 文档模块就是<html>、<body>、<head>、<title>这几个标签,我们可以在 document 上访问到它,document.documentElement、document.body、document.head、document.title。它们可以省略不写,浏览器魔术般地补全它们。这些标签只是提供一个框架,告诉人们一些内容性的东西应该放在 body 中,功能性的东西应该放在 head 中。 功能模块 它是用来设置文档整体的功能或一些元信息,涉及的标签有<link>、<meta>、<base>、<script>与<style>。除了后两个,由于页面功能的膨胀,需要多人协作一个页面,于是出现一个页面存在多个<script>与<style>标签,它们可以分散到其他位置。<link>、<meta>、<base> 都集中在head 标签内。我也尝试过将 div 放在 head 中, head标签会自动将它赶回body里面。 <link> 标签有两个作用:1. 定义文档与外部资源的关系;2. 是链接样式表。HTML5 新加的预加载,预渲染等功能就在这标签上添加。 <meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。最有用的就是设置页面的字符集。 下面是简书的 meta 标签使用情况,它可以做许多事情,如百度 SEO、360 SEO、移动端的水滴屏设置、缩放设置,还有外国的一些社交网站的设置,需要有一些专门的知识才能玩得转。 <base>标签为页面上的所有链接规定默认地址或默认目标。 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。在 IE6-8 中这标签有一个可怕的 Bug,会将整个页面装进它的 innerHTML 中,导致你的选择器失灵。 排版模块 这涉及到的都是一些块狀元素,如div、h1-h6、blockquote、有序列表、无序列表、定义列表等,它们是自带样式的一种元素。在 HTML5 时代,会继续加上 article、aside、nav、section 等标签。 装饰模块 这是覆行 SGML 的样式显然功能,于是才出现这类标签,常见的有 s、u、i、b、big、small、sub、sup、center、font、br、nobr、hr。在强调语义化的时代,除了 br、nobr、hr 都完了。此外,还有一些不起眼的标签,被忘了,又赋以特殊含义又活下来,如:code、kbd、samp、cite、tt、var……它们自带样式,通常以另一种字体特别显示。 大片文本的显示模块 我们知道页面在传输过程会被加工,处理掉一些换行符与空白,如果我们想保留这些换行符与空白就需要这里面的三种标签了:pre、plaintext、xmp。其中 plaintext 已经被浏览器废弃掉了,彻底不能用了,不像那些被声明废弃还能苟活着的标签。pre 标签,大家可能熟悉些,它与 code 标签经常组合在一起,用于语法高亮。 xmp 则是在语法高亮没有发明之前,能完整地显示某一段 HTML 片断的结构的唯一标签。 xmp 会把里面的内容当成一个字符串,不会生成对应的 DOM。 这种能原样保持用户HTML的元素是非常有用的,常常用于做模板容器, 其他的如<script type=\"template\"></script>、<noscript></noscript>,都有其优缺点,直到 HTML5 推出了 <template> 标签才解决这问题。 表单模块 表单模块是 HTML 最早支持的标签集,包括我们一直熟悉的 <form>、<input type=\"text\" />、<input type=\"password\" />、<input type=\"radio\" />、<input type=\"checkbox\" />、<input type=\"button\" />、<textarea>、<select>、<optgroup>、<option> 。这些元素都是有一个特点,可以通过 tab 键切换下一个表单元素,可以设置 readony 属性防止用户修改它的值,可以设置 disabled 属性忽略该元素的值。在 HTML5 中,还存在 pattern 与 required,实现对表单的自动验证。 表格模块 表格开始时用来呈现execl类似的数据, 后来被人们用来做布局用了。许多网页制作工具,如上古时代的 Dreamweave 就是它生成页面。这页面能完美还原大家拖拽出来的效果,但是想再次加工就麻烦了。table 家族包括了 <table>、<thead>、<tbody>、<tfoot>、<th>、<td>、<col>、<colgroup>、<th>。 table 模板的标签是具有很强的排他性,只能在 td 与 th 加东西标签与文本,在 tr 或 tbody 之间加东西,它们会漏到外面去。 这就类似于 p 标签放 div 标签,会发生意料不到的解析。 页面组装模块 在网速起来后,页面的功能就会越堆越多,于是需要许多人共同开发一个页面。如果协作开发页面,在 JavaScript 没有模块化技术的情况下,浏览器提供了几个标签实现它:<frameset>、<frame>、<iframe>。它们都是自己独立的作用域,不用考虑全局变量的问题,不也用考虑某人的代码出 Bug 影响到其他人的情况。唯一要注意的是,防止别的网站用 frame 来装载我们的网站来做坏事,当然浏览器也会在这些标签上添加越来越多这样的属性。现在许多政府后台系统还是基于框架结构来构建页面。 广告模块 广告是众多网站最主要的收入来源。浏览器也有相应的标签做这样的事,一个是闪啊闪的 <blink> 标签,一个是飘啊标的 <marquee> 标签。时至今天,它们的际遇完全不一样,前者被干掉,后者被标准化了。 地图模块 地图模块涉及两个特别的标签 <map>、<area> 及一个常见的 <img> 标签。map 标签起来统帅的作用,而 area 标签则起着与其他标签不一样的触发区域。一般的可视标签,都是呈现为矩形。而 area 标签则根据它的 share 属性呈现为各种形状及不规则的多边形。 容灾模块 互联网早期是充满了意外,浏览器各自为战,实现也不同步,因此一些标签或功能并不支持,需要一些容灾处理。于是出现了 <noscript>、<noembed>、<noframes> 这几种标签。当浏览器禁用 JavaScript,或不支持 embed 标签,或不支持框架技术时,就会显示这几种标签里面的提示信息。 多媒体模块 为了让页面不只是单调的文字,浏览器先后支持以下标签来满足我们的官感:<img>、<bgsound>、<embed>、<object>、<applet>。 img 标签就不说了,早期要播放音乐,IE 下可以选择 bgsound,也可以使用万能的 object 标签,object 可以加载 flash 播放器,也可以加载 Windows 下的各种控件,如 Windows Media Player、RealONE Player。在 Firefox 中承担这个角色的是 embed 标签,音频视频都可以播放。Applet 则是 Java 如日中天时加入的标签,可以执行 Java JAR 包,在做银行安全控件或教学显示时非常有用。 05 多种文档的混排 上面走马看灯地回顾了一些标签,我们也了解到不断有标签被废弃,也不断有新的标签涌现出来。这些标签默认具有什么功能,有什么属性,有什么外观,或者如何与其他标签共存,都是规定在 DOCTYPE 中。所谓 HTML 规范其实就是这个文档类型声明。 一个页面加载下来,经过比特到字符到字符串到标签到 DOM 的层层转换,其中标签到 DOM 的解析就需要文档类型声明来处理,当然这里可能存在浏览器私下的非正式的纠错处理。但是文档类型声明作为页面的 DNA 角色是不变的。 在HTML5之前文档类型的声明基本都使用 DTD(document type definition),由于之前的版本基于 SMGL,DTD 规定了标记语言的规则,才能使浏览器正确的解析并呈现需要展示的内容。 下面是几种常见的文档类型声明: HTML 4.01 Frameset HTML 4.01 Strict XHTML 1.0 Frameset XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 这么长的代码不借助于工具或贴粘复制,是很难写的。因此 HTML5 的写法是异常简洁,也屏蔽了里面的 dtd 链接,反正也没有几个人打开它。 加之 HTML5 本来就是遵循小步快跑的规则,不断小版本迭代,因此 dtd 文件会时不时变化,这个就内置到浏览器中就行了。时至今天,所有大厂的网页都用上 HTML5 了。 下面是 HTML5 的 DOCTYPE 写法: 但是 html 上面的文档类型声明只是告诉浏览器如何处理 HTML 标签,在 HTML 文档中可能混杂其他文档。 比如我们要让页面更有说明力,需要出现雷达图、线段图、饼状图等等,就要用到 SVG。我们的页面是为高校制作的,需要用到专业的数字公式,这时需要用 math 标签。事实上,它们都是出自同一渊源,多种文档混排可能在 IE4 时代就存在了。 1998 年,微软发布了 VML 矢量标签语言,对于 XML 的混排则使用一种叫 XML 数据岛的技术实现了。 因此多文档的混排在IE4~8的情况是 HTML+VML+XML, 在其他浏览器则是 HTML+SVG+math,并且 SVG 里有 <foreignObject> 再加载 HTML 文档。在 HTML 规范转交给 WHATWG 的今天,SVG 与 math 继续交由学术性更强更严谨的 W3C 所维护升级。毕竟 HTML5 有许多新功能是玩票性质的,而学术性的东西则不能这样弄。 06 HTML5 的进化 现在我们对 HTML 的关注不如以前了,事实上 WHATWG 对它做了非常宏大的规划,非常多的功能需要逐年来迭代。但 React 这些大型前端框架的出现,掩盖了浏览器的努力。以前 Chrome 每次发版本常常吸引眼球,但 babel 可以让你用上还在讨论中的语言特性!那么让我们略微看一下 HTML5 的新特征吧。 装饰性标签基本废弃,使用带语义的装饰化标签代替 增加大量的表单元素 增加大量的布局标签 多媒体标签进化 语义化标签的崛起 在人们受够了table布局,前端工程师开始关注每个标签在发明时赋以它们的本来意义。 <b>加粗文字(bold) <i>倾斜文字(italic) <u>给文字加下划线(underline) <s>给文字加删除线(strike),其实早期是存在<strike>标签 这些标签能做功能CSS也能做,因此被干掉。HTML5带来了全新的标签,它们富有语义,对SEO或机器学习分析内容有帮助。 <strong>定义重要性强调的文字(strong) <ins>定义插入的文字(inserted) <em>定义强调的文字(enphasized) <del>定义被删除的文字(deleted) 更多表单元素 早期的表单元素,我们可以从收音机里挖到它们的本源。但经过20年来的发展,网页世界也有自己的创新,各式各样的日历、调试器,于是它们成为浏览器的自带控件了。下面是一些新标签:<meter>、<progress>、<outer>、 <datalist>,此外更多功能是复用到 input 标签,各种类型的日历、月历、年历、时间。 更多布局元素 在新布局元素没有出来时,人们对页面也是划分成不同区域。每个区域标识不同的 ID 或类名,以前谷歌做过一次调整,发现大家对这些ID或类名的取名都很相似,比如顶部的区域都叫 header,底部的区域都叫 footer,侧边栏都叫 leftside 或 rightside, 主内容区都叫 main,导航区几乎都叫 nav,还有弹出层,也统一叫 dialog。 下面是 HTML5 没有流行时,人们对页面的一个布局范例。 为了讨好用户,HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分。 <main> 标签规定文档的主要内容。一个页面只能出现一个<main> 标签。并且它不能被其他布局元素所包含。 <header>:描述了文档的头部区域,于定义内容的介绍展示区域。 <nav>:定义导航链接的部分。 <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,section通常包含了一组内容及其标题。 <article>:定义独立的内容。 <aside>:定义页面主区域内容之外的内容(比如侧边栏)。 <figure>:标签规定独立的流内容(图像、图表、照片、代码等等)。 <figcaption>:定义 <figure>元素的标题。 <footer>:述了文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。 在一个网页中,这些新的语义标签元素位置如下图所示: 这些新标签中最特别的是 dialog 标签,它自带全局居中与隐藏显示功能。 多媒体的增强 进入 HTML5 时代,<img> 支持多个图片源,这方面在不同的屏幕下适配不同大小的照片。播音频则交给更语义化的<audio>标签,播视频则交给更语义化的<video>标签,并且支持字幕文件(通过<track>标签挂载)。<canvas>本来是显示矢量图,随着浏览器性能越来越强,对位图也游刃有余,并结合一些 File API 来解析二进制质材, 让我们在浏览器跑起类似 flash 的动画与浏览。这几年,又兴起 WebAssembly, 3D动画与游戏也能跑了。canvas 在VR之风刮起时,又支持 WebGL,成为时下最强大的标签了。 观摩地址:https://gallery.echartsjs.com/editor.html?c=xHku9OE96l DOM的标准化 标签只是一个描述性语言,它们用来描述什么呢?就是描述 DOM。由于浏览器大战的缘故,DOM 一直没有统一,给开发平添了不少麻烦。jQuery 时代,前端开发者发掘了许多浏览器差异问题,除了给出兼容方案外,还提交给到浏览器厂商中,这些举动最终推动了浏览器的同一化。 最开始是自定义属性与固有属性的分离,在 IE6~8 中, 这两种属性是拎不清的,这就导致遍历元素属性时,一下子多出上百个属性,而在火狐中可能只有三个。 其次是标签对应的 DOM 元素的构造器公开化,以前 IE 是不公开这些接口,纯粹是黑盒子。而 Chrome、Firefox 都是根据 W3C 官网上的文档来制定接口。如果公开了这些构造器,我们就可以对它们做一些测试。 HTML5 兴起时,全世界也恰好转入移动互联网时代,浏览器添加了更多与手机相关的事件,如划动、长按、页面隐藏显示、是否离线、屏幕是否发生旋转、是否发动震动。 在 jQuery 的驱动下,选择器引擎官方化,querySelector比 getElementById 更加便利。 自定义标签 自定义标签是 HTML5 添加的最强大的功能。早在 IE5 时代,微软就推出过 HTC 来创建自定义标签。一些前端模板引擎也支持过自定义标签,可见这是一个非常热门的功能。 自定义标签可以让我们制定一个标签的外观,有什么固有属性及对生命周期进行干涉。在创建自定义标签时,我们需要用到一些新的标签如上面提到<template>及让用户传入其他标签的占位标签<slot>, 如果大家用过 vue,一定能快迅上手。 有关自定义标签可以参考以下链接: http://www.ruanyifeng.com/blog/2019/08/web_components.html 各种页面性能优化方案的内置实现 人们对页面性能的优化是永无止境,即便网速已经这么快了,CPU已经这么多核了。于是为了尽快加载资源,我们有DNS, 为了防止<script>堵塞页面渲染,我们把它们放到body的后面……这些奇技淫巧都被浏览器所收吸,做成一个个配置项了。 我们先看<link>标签上的优化方案: preload 对当前页面的要用到资源优化加载,并且不阻塞渲染和 document 的 onload 事件。使用了rel='preload'的 link 标签还可以指定 onload 事件,方便你进行后继处理。 prefetch 它的作用是告诉浏览器加载下一页面可能会用到的资源,注意,是下一页面,而不是当前页面。 prerender 而 prerender 不仅会加载资源,还会解执行页面,进行预渲染,但是这都是根据浏览器自身进行判断。 浏览器可能会分配少量资源对页面进行预渲染,挂起部分请求直至页面可见时可能会放弃预渲染,如果消耗资源过多等等情况。。。 prerender与prefetch都是针对下一个页面。 preconnect 浏览器要建立一个连接,需要经过 DNS 查找,TCP 三次握手和 TLS 协商(Https 需要),这些过程需要相当的耗时。因此 preconnect 能浏览器预先建立一个连接,等真正需要加载资源的时候能直接请求。 dns-prefetch DNS prefetch,即DNS预获取。前端优化中与DNS有关的两点:一个是减少DNS的请求次数,另一个是进行DNS预获取。 DNS 预获取可以加快页面渲染速度,无需用户点击链接就能在后台解析,所以能减少用户的等待时间,提升用户体验。默认情况下,浏览器会对当前页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。 <script>标签上的优化方案 IE 发明了一个 defer 属性,HTML5 规范则又加上另一个async属性。它们都能让<script>不会堵塞当前页面的加载与渲染,现在所有浏览器的script标签都支持这两种属性。它们两者也有稍微的区别。 defer 如果页面有多个设置了defer属性的script标签,它们在执行时,会根据它们在页面的位置从上到下依次执行。 defer属性的script标签的执行时机为,页面结构渲染之后,DOMContentLoaded回调触发之前。 async 如果页面有多个设置了async属性的script标签,它们在执行时是乱序,谁的资源加载完就立即执行,不会等待上面某一个defer属性的script标签执行。 async属性的script标签的执行时机,资源加载好就立即执行,与页面结构渲染无关,与DOMContentLoaded回调无关。 假如我们页面有两个script标签,给它们加上属性或不加属性,在chrome控制台的显示如下: 普通script: defer async 它们的执行时期与文件距离用户的服务器距离或文件大小有关,因此下面两种情况都可能发生。如果设置async的script标签越多,产生的情况就越多,无法预估。 推荐的应用场景 defer 如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。如评论框、代码语法高亮、语言补丁polyfill.js。 async 如果你的脚本并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。如百度统计。 如果不能确定的话,用defer比较稳妥。 07 结语 HTML发展到今天,功能远远超过当初展示页面提交表单的需求了。我的文章还有许多HTML5的新特征没有提到,浏览器不断提高它的外延,相当于把它自己当成一个操作系统了。 虽然现在有了非常好用的框架,让我们暂时忘记这些底层知识,但是我们所有一切的功能都是筑建在HTML之上,这一点万万不能忘记。我们要把自己当成一个建筑师,了解每一个材料的质地,才能打造更好的大厦。","publishTime":1566809308000,"authorName":"CSDN","authorRoute":"detail_author?userId=616230990","route":"detail_article?itemId=1724244361217"},{"widgeId":1722044334081,"widgetImage":"https://img.36krcdn.com/20200409/v2_540093c78885414a9573df3e4e178024_img_000","widgetTitle":"从 0 到 1 教你设计业务系统","summary":"本文将以一个案例,向读者逐步揭示一套业务系统从0到1的设计过程。重点讲述架构、模型等业务系统最本质的设计精要。","publishTime":1511858168000,"authorName":"杨堃","authorRoute":"detail_author?userId=19881307","route":"detail_article?itemId=1722044334081"},{"widgeId":1721212813313,"widgetImage":"https://img.36krcdn.com/20200409/v2_b63dfbca99a5450389227b9d045f9cb7_img_000","widgetTitle":"人口质量决胜未来——地产大数据之人口结构篇","summary":"本文专注于人口年龄结构层面,探讨了人口年龄结构对地产、对消费等的影响。","publishTime":1476424750000,"authorName":"36氪的朋友们","authorRoute":"detail_author?userId=375349","route":"detail_article?itemId=1721212813313"}]},"hotSearchList":[{"hotSearchId":186,"hotSearchName":"英伟达","route":"detail_search_article?searchId=186"},{"hotSearchId":162,"hotSearchName":"华为","route":"detail_search_article?searchId=162"},{"hotSearchId":75,"hotSearchName":"小米","route":"detail_search_article?searchId=75"},{"hotSearchId":115,"hotSearchName":"Sora","route":"detail_search_article?searchId=115"},{"hotSearchId":193,"hotSearchName":"OpenAI","route":"detail_search_article?searchId=193"}]}},"channel":[{"id":0,"key":"web_news","name":"最新","mark":"none","route":"nav_latest?subnavNick=web_news&subnavType=1"},{"id":1,"key":"web_recommend","name":"推荐","mark":"none","route":"nav_general?subnavNick=web_recommend&subnavType=1"},{"id":2,"key":"contact","name":"创投","mark":"none","route":"nav_general?subnavNick=contact&subnavType=1"},{"id":3,"key":"ccs","name":"财经","mark":"none","route":"nav_general?subnavNick=ccs&subnavType=1"},{"id":4,"key":"travel","name":"汽车","mark":"none","route":"nav_general?subnavNick=travel&subnavType=1"},{"id":5,"key":"technology","name":"科技","mark":"none","route":"nav_general?subnavNick=technology&subnavType=1"},{"id":6,"key":"AI","name":"AI","mark":"none","route":"nav_general?subnavNick=AI&subnavType=1"},{"id":7,"key":"enterpriseservice","name":"企服","mark":"none","route":"nav_general?subnavNick=enterpriseservice&subnavType=1"},{"id":8,"key":"innovate","name":"创新","mark":"none","route":"nav_general?subnavNick=innovate&subnavType=1"},{"id":9,"key":"shuzihua","name":"专精特新","mark":"none","route":"nav_general?subnavNick=shuzihua&subnavType=1"},{"id":10,"key":"happy_life","name":"消费","mark":"none","route":"nav_general?subnavNick=happy_life&subnavType=1"},{"id":11,"key":"real_estate","name":"城市","mark":"none","route":"nav_general?subnavNick=real_estate&subnavType=1"},{"id":12,"key":"web_zhichang","name":"职场","mark":"none","route":"nav_general?subnavNick=web_zhichang&subnavType=1"},{"id":13,"key":"qiyehao","name":"企业号","mark":"none","route":"nav_general?subnavNick=qiyehao&subnavType=1"},{"id":14,"key":"sensation","name":"红人","mark":"none","route":"nav_general?subnavNick=sensation&subnavType=1"},{"id":15,"key":"other","name":"其他","mark":"none","route":"nav_general?subnavNick=other&subnavType=1"}],"locationChannel":[{"id":0,"key":"guangdong","name":"广东","route":"nav_station?subnavNick=guangdong&subnavType=2"},{"id":1,"key":"jiangsu","name":"江苏","route":"nav_station?subnavNick=jiangsu&subnavType=2"},{"id":2,"key":"sichuan","name":"四川","route":"nav_station?subnavNick=sichuan&subnavType=2"},{"id":3,"key":"henan","name":"河南","route":"nav_station?subnavNick=henan&subnavType=2"},{"id":4,"key":"hubei","name":"湖北","route":"nav_station?subnavNick=hubei&subnavType=2"},{"id":5,"key":"anhui","name":"安徽","route":"nav_station?subnavNick=anhui&subnavType=2"},{"id":6,"key":"hainan","name":"海南","route":"nav_station?subnavNick=hainan&subnavType=2"},{"id":7,"key":"zhejiang","name":"浙江","route":"nav_station?subnavNick=zhejiang&subnavType=2"},{"id":8,"key":"xian","name":"陕西","route":"nav_station?subnavNick=xian&subnavType=2"},{"id":9,"key":"chongqing","name":"重庆","route":"nav_station?subnavNick=chongqing&subnavType=2"},{"id":10,"key":"qingdao","name":"山东","route":"nav_station?subnavNick=qingdao&subnavType=2"},{"id":11,"key":"hunan","name":"湖南","route":"nav_station?subnavNick=hunan&subnavType=2"},{"id":12,"key":"guizhou","name":"贵州","route":"nav_station?subnavNick=guizhou&subnavType=2"}],"locationStationNav":null,"userInfo":null,"isCheckedUserInfo":false}</script> <script src="//static.36krcdn.com/36kr-web/static/runtime.c88d49af.js" type="text/javascript"></script><script src="//static.36krcdn.com/36kr-web/static/app.dc22b42e.js" type="text/javascript"></script> </body> </html>