整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
对于前端来说，HTML 都是最基础的内容。
今天，我们来了解一下 HTML 和网页有什么关系，以及与 DOM 有什么不同。通过本讲内容，你将掌握浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。
不知你是否有过这样的体验：当打开某个浏览器的时候，发现一直在转圈，或者等了好长时间才打开页面……
此时的你，会选择关掉页面还是耐心等待呢？
这一现象，除了网络不稳定、网速过慢等原因，大多数都是由于页面设计不合理导致加载时间过长导致的。
我们都知道，页面是用 HTML/CSS/JavaScript 来编写的。
HTML由一系列的元素组成，通常称为HTML元素。HTML 元素通常被用来定义一个网页结构，基本上所有网页都是这样的 HTML 结构：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特别多，其中还包括可用于 Web Components 的自定义元素。
前面我们提到页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在<script>和<style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。
因此，如果想要提升页面的加载速度，就需要了解浏览器页面的加载过程是怎样的，从根本上来解决问题。
浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程（更详细的浏览器加载和渲染机制将在第 7 讲中介绍）。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。
由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。
以网易云课堂官网为例，我们来看看网页加载流程。
（1）当我们打开官网的时候，浏览器会从服务器中获取到 HTML 内容。
（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。
（3）<head>元素内容会先被解析，此时浏览器还没开始渲染页面。
我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源。
（4）当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。
（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。
（6）此时<body>元素内容开始被解析，浏览器开始渲染页面。
在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。
到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。
因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序。
百度首页
对于百度这样的搜索引擎来说，必须要在最短的时间内提供到可用的服务给用户，其中就包括搜索框的显示及可交互，除此之外的内容优先级会相对较低。
浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。
我们知道<p>是 HTML 元素，但又常常将<p>这样一个元素称为 DOM 节点，那么 HTML 和 DOM 到底有什么不一样呢？
根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。
也就是说，DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。
在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。
我们常见的 HTML 元素，在浏览器中会被解析成节点。比如下面这样的 HTML 内容：
<html>
<head>
<title>标题</title>
</head>
<body>
<a href='xx.com'>我的超链接</a>
<h1>页面第一标题</h1>
</body>
</html>打开控制台 Elements 面板，可以看到这样的 HTML 结构，如下图所示：
在浏览器中，上面的 HTML 会被解析成这样的 DOM 树，如下图所示：
我们都知道，对于树状结构来说，常常使用parent/child/sibling等方式来描述各个节点之间的关系，对于 DOM 树也不例外。
举个例子，我们常常会对页面功能进行抽象，并封装成组件。但不管怎么进行整理，页面最终依然是基于 DOM 的树状结构，因此组件也是呈树状结构，组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时，现在大多数应用程序同样以root为根节点展开，我们进行状态管理、数据管理也常常会呈现出树状结构。
我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。
如果我们在每个元素上都进行监听的话，则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通过将事件添加到它们的父节点，而将事件委托给父节点来触发处理函数：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 获取被点击的元素
const eventTarget = event.target;
// 检查源元素`event.target`是否符合预期
// 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);这样能解决什么问题呢？
常见的使用方式主要是上述这种列表结构，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素，不管我们新增、删除、更新选项，都不需要手动去绑定和移除事件。
如果在列表数量内容较大的时候，对成千上万节点进行事件监听，也是不小的性能消耗。使用事件委托的方式，我们可以大量减少浏览器对元素的监听，也是在前端性能优化中比较简单和基础的一个做法。
注意:
我们了解了 HTML 的作用，以及它是如何影响浏览器中页面的加载过程的，同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。
口文档是一个项目开发中必需的说明文档，但时接口文档编写起来比较费事费力。本文为大家推荐一款特别好用的接口文档生成工具--apipost
apipost是一款国产的接口测试和接口文档生成的工具。其中它接口文档生成的功能特别强大。
打开apipost编写一个登录的接口请求
它这里有两个功能，成功响应示例及文档和错误响应示例及文档
成功响应示例文档，我们点击从现有响应结果导入和导出字段，获得如图效果
分享文档查看
还可以添加错误响应示例文档
分享查看，成功和失败的响应示例都会出现
它还支持html、markdown和word格式的接口文档
看一下word格式的接口文档效果（word只生成成功响应示例文档）
这就是apipost生成接口文档的具体流程了
工具下载地址：https://www.apipost.cn
每当我们接管其他人开发的模块或项目时，我们总是会疯狂地看着那些没有注释的代码。程序员经常希望其他人写技术文档，而不希望自己写技术文档。因为编写技术文档需要花费大量时间来处理格式和布局，所以编写该文档的人必须考虑各种非技术细节，例如在新建的Word文档中应放入哪个目录，各种文档由不同的人分散地保存在一个团队中。然后通过IM或电子邮件从其他人那里接收文件。这种通信还不错，但是效率不高。ShowDoc是非常适合IT团队在线共享文档的工具。它可以提高团队成员之间的沟通效率。
https://github.com/star7th/showdoc
随着移动互联网的发展，BaaS（后端即服务）越来越流行。服务端提供API，APP端或者网页前端便可方便调用数据。用ShowDoc可以非常方便快速地编写出美观的API文档。
一份好的数据字典可以很方便地向别人说明你的数据库结构，如各个字段的释义等。
你完全可以使用showdoc来编写一些工具的说明书,也可以编写一些技术规范说明文档以供团队查阅
响应式网页设计，可将项目文档分享到电脑或移动设备查看。同时也可以将项目导出成word文件，以便离线浏览。
ShowDoc上的项目有公开项目和私密项目两种。公开项目可供任何登录与非登录的用户访问，而私密项目则需要输入密码验证访问。密码由项目创建者设置。
2、项目转让
项目创建者可以自由地把项目转让给网站的其他用户。
3、项目成员
你可以很方便地为ShowDoc的项目添加、删除项目成员。项目成员可以对项目进行编辑，但不可转让或删除项目（只有项目创建者才有权限）
4、团队管理
利用showdoc的团队功能你可以更好地进行团队协作
1、markdown编辑
ShowDoc采用markdown编辑器，无论是编辑还是阅读体验都极佳很棒。如果你不了解Markdown，请在搜索引擎搜索”认识与入门 Markdown”
2、模板插入
在ShowDoc的编辑页面，点击编辑器上方的按钮可方便地插入API接口模板和数据字典模板。插入模板后，剩下的就是改动数据了，省去了很多编辑的力气。
3、历史版本
ShowDoc为页面提供历史版本功能，你可以方便地把页面恢复到之前的版本。
你可以选择使用在线版本或者部署到自己的服务器两种方式可供选择，在线版本长期支持维护，或者参考部署手册部署到自己的服务器：
官方提供了详细的部署安装文档，还包括二次开发的一些说明
文档管理有很多方式，ShowDoc的主要目的就是解决团队之间的这种文档之间的协作，而且管理起来非常方便，方便互相分享和使用！既可以使用在线版本也可以选择在自己本地部署非常方便！
PS:Javascript和Python的经典书籍，有哪位仁兄可以推荐一二，在此感谢！
*请认真填写需求信息，我们会在24小时内与您取得联系。
