前端笔记01---html 的加载

Sapphire～

于 2024-03-01 14:35:05 发布

阅读量1.1k

点赞数 24

分类专栏：前端文章标签：前端笔记 html javascript

本文链接：https://blog.csdn.net/z583706/article/details/136390613

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

html head <meta>
<meta> 元素在 HTML 中用于提供关于文档的元数据，例如描述、关键词、作者和其他信息。这些元数据可以帮助搜索引擎更好地理解和索引网页内容。
另外，元素还可以包含指示浏览器如何处理页面内容的信息，比如字符集设定、视口设置等。

（元数据指的是描述数据的数据，或者说是关于数据的数据。在网页开发中，元数据可以提供有关网页内容的信息，如标题、关键词、描述、作者、最后修改日期等。这些信息可以帮助搜索引擎和浏览器理解和处理网页内容，并且对于 SEO（搜索引擎优化）和用户体验非常重要。）

src: 指定外部 JavaScript 文件的 URL。
type: 规定脚本的 MIME 类型。通常是 “text/javascript” 或 “module”。
async: 表示立即下载脚本，但不阻止页面解析和其他操作。
defer: 表示脚本可以延迟到文档完全被解析和显示后再执行。
charset: 指定使用的字符集。

这些属性可以帮助控制脚本的加载和执行行为，以及指定外部脚本文件的位置和类型。

MIME

MIME（）类型是一种标准，用于表示文档的性质和格式。在HTML中，type属性用于指定脚本的MIME类型。对于JavaScript脚本来说，常用的MIME类型是 text/javascript。另外，对于ES6模块，可以使用 module 类型。这些类型信息有助于浏览器正确解释脚本内容。

在 JavaScript 中，“module” 模块指的是 ECMAScript 6 引入的模块系统。使用 “module” 类型可以告诉浏览器，该脚本是一个 ES6 模块，并且应该按照 ECMAScript 6 的模块规范来解析。这允许开发者使用更现代的模块化方式来组织和导入/导出 JavaScript 代码。 ES6 模块提供了更好的封装性、依赖管理和可重用性，使得大型应用程序的开发变得更加模块化和结构化。

async 是用于 <script> 元素的属性之一。当设置为 async 时，脚本的下载和执行是异步进行的，这意味着它会在其他页面内容加载的同时开始下载，并且在下载完成后立即执行，不会阻止页面解析和渲染。如果有多个带有 async 属性的脚本，它们的执行顺序可能是不确定的。这样的行为对于不影响页面加载以及彼此之间没有依赖关系的脚本非常有用。

  name: 用于指定元数据的名称，比如描述、关键词等。
  content: 指定与 name 属性相关联的元数据的值。
  charset: 设置字符集，规定文档使用的字符编码。
  http-equiv: 用于模拟 HTTP 头部中的响应字段，比如设置缓存控制、刷新等。
  viewport: 用于控制移动设备上的视口属性，如宽度、缩放等。

这些属性可以帮助网页开发者提供有关文档和视口的元数据信息，以及控制浏览器和搜索引擎的行为。

例如：当使用<meta>元素时，以下是一些常见的用法：

描述网页内容：<meta name="description" content="这是网页的描述">

设置关键词：<meta name="keywords" content="关键词1, 关键词2, 关键词3">

指定字符集：<meta charset="UTF-8">

控制视口属性（移动设备上常用）：<meta name="viewport" content="width=device-width,
initial-scale=1.0">

刷新和重定向： <meta http-equiv="refresh" content="5;url=https://www.example.com">

这些示例展示了如何使用元素来提供关于文档的元数据以及控制浏览器行为。

CSS

我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。

HTML 与 DOM 有什么不同

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言，它定义了网页的各种元素和其属性。而 DOM（Document Object Model）是一种编程接口，它表示文档的逻辑结构并允许程序和脚本语言（如 JavaScript）动态地访问和修改文档的内容、结构和样式。

MDN

简而言之，HTML 是一种标记语言，用于描述网页的静态结构和内容，而 DOM 则是由浏览器创建的文档对象模型，可以通过编程方式来操作和修改页面的内容和结构。 HTML 可以看作是网页的静态描述，而 DOM 可以看作是对网页内容进行动态处理和交互的接口。

MDN 指的是 Mozilla 开发者网络（Mozilla Developer Network），它是一个提供 Web 技术文档、教程和资源的开放平台。MDN 上包含了关于 HTML、CSS、JavaScript 和其他 Web 技术的详尽文档，以及各种示例代码和教程。开发者可以在 MDN 上找到关于 Web 标准、浏览器兼容性、API 参考等方面的权威信息。

此外，MDN 还提供了许多社区驱动的内容，使得开发者能够共享知识、经验和最佳实践。总之，MDN 是 Web 开发者们不可或缺的学习和参考资源之一。

Mozilla

Mozilla 是一家致力于开放式互联网的非营利组织，也是全球最大的独立的开源软件公司之一。该组织以 Firefox 等项目为人所知。Mozilla 开发者网络（MDN）是该组织旗下的一个平台，提供了丰富的 Web 技术文档和资源，致力于推广开放式 Web 标准和技术。

除了浏览器之外，Mozilla 还致力于开发其他开源项目，如 Thunderbird 邮件客户端、Firefox OS 移动操作系统等。此外，Mozilla 通过其开源理念和技术社区的支持，积极参与和推动开放标准和网络隐私保护，以促进互联网的健康发展。

脏检查

脏检查（Dirty Checking）是一种用于实现双向数据绑定的技术。它通常用于一些 JavaScript 框架和库中，比如 AngularJS。在脏检查机制中，框架会持续监视数据模型的变化，并且在每次 UI 更新时检查这些变化。如果检测到数据模型发生了变化，框架会更新相关的 UI 组件。

脏检查的实现方式一般是通过周期性地比较数据模型的先前状态和当前状态来执行的。这种方法的缺点是，即使数据没有变化，也会频繁地进行检查，可能导致性能问题。

随着现代的前端框架和库的发展，许多新的技术和方法（比如虚拟 DOM）已经取代了脏检查机制，并且更高效地实现了双向数据绑定。

依赖注入

依赖注入（DI）是一种设计模式，用于管理组件或对象之间的依赖关系。在应用程序中使用依赖注入有助于提高灵活性、可测试性和可维护性。依赖注入的管理通常包括以下几个方面：

容器管理：通常会有一个依赖注入容器，它负责创建、存储和提供依赖项的实例。容器会跟踪依赖项之间的关系，并在需要时进行实例化。

配置：将依赖项与其所需的实例进行配对。这可以通过配置文件、元数据注解、代码注册等方式来完成。

生命周期管理：管理依赖项的生命周期，包括单例、瞬态、作用域等。这确保了依赖项在整个应用程序中的合适使用和销毁。

解析和注入：容器负责根据配置和需要，在运行时解析依赖项的实例并注入到相应的位置。这需要考虑循环依赖、依赖关系的复杂性等因素。

不同的框架和库对依赖注入的管理有不同的实现方式，比如 Angular 的注入器、Spring Framework 的应用上下文等。这些工具提供了一套机制来帮助开发者更轻松地管理应用程序中的依赖关系。

虚拟 DOM

虚拟 DOM（Virtual DOM）是一种用于提升 Web 应用性能的技术。它是一个轻量级的、存在于内存中的对真实 DOM 的映射，通过对其修改和比较，减少了对实际 DOM 的操作次数。

当数据发生变化时，前端框架会先对虚拟 DOM 进行更新，然后将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，找出差异，最后仅仅对实际需要修改的部分进行 DOM 操作，以提高渲染效率。

使用虚拟 DOM 技术有助于减少对实际 DOM 的访问次数，从而提升页面性能。这种技术在诸如 React 和 Vue.js 等现代前端框架中被广泛采用。

虚拟DOM性能开销

在使用虚拟 DOM 技术时，会有一些性能开销，包括以下几个方面：

内存消耗：虚拟 DOM 需要占用一定的内存空间来存储对真实 DOM 的映射关系以及更新前后的状态信息。

初始化时间：虚拟 DOM 需要在页面初始加载时进行初始化，这可能会增加应用程序启动时间。

比较与差异计算：为了找出虚拟 DOM 中的差异，需要对新旧虚拟 DOM 进行比较和计算。这些操作可能会引起一定的计算性能开销。

更新成本：当数据发生变化时，需要更新虚拟 DOM，并计算出需要修改的部分。这也会导致一定的性能开销。

尽管虚拟 DOM 存在一些性能开销，但通常情况下，其优点（如最小化对实际 DOM 的操作次数）远大于缺点。而且由于现代浏览器对 JavaScript 引擎和 DOM 操作进行了优化，虚拟 DOM 技术往往仍然能够提升整体的页面渲染性能。

性能

性能开销包括哪些方面

性能开销可能涉及多个方面，具体取决于应用程序的架构、运行环境和实际使用的技术。一般而言，以下是一些常见的性能开销方面：

计算开销：指在执行过程中产生的计算成本，包括对数据结构的操作、算法复杂度等。这可能导致 CPU 使用率增加以及响应时间延长。

内存消耗：应用程序占用的内存资源，包括变量、对象、函数调用堆栈等。大量内存消耗可能导致系统的内存压力，甚至触发垃圾回收。

网络开销：指应用程序与外部服务通信时产生的开销，包括网络延迟、带宽消耗、请求响应时间等。网络开销可能导致页面加载缓慢或接口响应不及时。

I/O 操作：指应用程序对磁盘、文件系统、数据库等进行读写操作所产生的开销。频繁的 I/O 操作可能成为性能瓶颈。

并发和同步开销：应用程序中多线程/进程之间的并发控制和同步操作可能引起上下文切换和锁竞争，从而导致性能开销。

渲染性能开销：针对前端应用程序，包括布局（layout）、绘制（paint）和合成（composite）等阶段的渲染性能开销。

减少性能开销通常需要综合考虑多个因素，采用合适的优化策略和技术手段，如缓存、异步处理、懒加载、代码优化等。

性能瓶颈

性能瓶颈是指在应用程序中导致整体性能受限的特定部分或因素。它可能是影响应用程序响应速度、吞吐量或资源利用率的主要原因。

一些常见的性能瓶颈包括：

CPU 瓶颈：当应用程序的处理器使用达到极限时，可能会出现 CPU 瓶颈。这可能是由于计算密集型任务、大规模并发等造成的。

内存瓶颈：如果应用程序消耗了过多的内存或者存在内存泄漏，就可能会面临内存瓶颈。这可能导致系统性能下降、页面交换或者甚至崩溃。

网络瓶颈：当网络带宽受限或者延迟过高时，可能会出现网络瓶颈，导致请求响应时间延长或者页面加载缓慢。

I/O 瓶颈：磁盘 I/O、数据库访问等大量的输入输出操作可能成为性能瓶颈，尤其是在高并发或大规模数据处理情况下。

渲染瓶颈：对于前端应用程序，渲染性能不佳可能成为性能瓶颈，包括布局计算、绘制和合成等阶段。

并发瓶颈：在多线程或多进程应用程序中，竞争条件、锁竞争、上下文切换等问题可能导致并发瓶颈。

识别和解决性能瓶颈通常需要进行系统性能分析和性能优化，采用合适的工具和技术来监控、诊断和改进应用程序的性能表现。

性能？

性能通常指系统、应用程序或设备在特定条件下执行任务的效率和速度。对于计算机和软件来说，性能可以从多个角度进行评估：

响应时间：指系统对请求作出响应的时间，例如用户点击按钮后，系统产生相应动作所需的时间。

吞吐量：指系统在单位时间内处理的工作量，比如每秒处理的请求数、数据传输速率等。

资源利用率：包括 CPU 使用率、内存消耗、网络带宽利用率等，描述系统各种资源的使用情况。

稳定性：系统在长时间运行时的表现，包括内存泄漏、崩溃率、错误率等。

渲染性能：对于前端应用程序，渲染速度、交互流畅性以及页面加载时间等指标也是性能的重要方面。

优化性能通常涉及多个层面和技术，包括代码优化、算法改进、资源合理分配、并发控制、缓存策略、网络优化等。对于 Web 应用程序，还可以采用前端优化技术、CDN 加速、服务器负载均衡等手段来提升性能。

总之，良好的性能意味着系统能够高效地执行任务、快速响应用户的操作，并且有效地利用资源。

事件

事件委托

事件委托（Event delegation）是一种常见的前端开发技术，用于管理和处理大量相似元素的事件。通过事件委托，可以将事件处理程序附加到它们的共同祖先，而不是每个单独的元素上。

例如，在一个列表中有多个项目，如果每个项目都需要相同的点击事件处理程序，那么可以将点击事件处理程序添加到整个列表的父级元素上，并利用事件冒泡机制来处理具体的点击事件。

事件委托的好处包括：

减少内存消耗：不需要为每个元素单独绑定事件处理程序，从而减少了内存消耗。

简化代码：只需在一个父级元素上添加事件处理程序，而不是遍历每个元素并分别绑定事件处理程序。

动态元素：对于后续添加到页面的元素，无需额外操作，它们会自动继承父级元素的事件处理程序。

事件委托通常基于事件冒泡机制实现，当事件在 DOM 树上传播时，可以在父级元素上捕获到事件并进行相应处理。这使得事件委托成为处理大型动态 UI 的有效方法。

事件冒泡

事件冒泡（event bubbling）是指当一个特定的事件发生在 DOM 元素上时，这个事件将会向该元素的祖先元素一直传播。换句话说，如果某个元素触发了特定事件，比如点击事件，那么这个事件将依次传播到该元素的父级元素、更高级的祖先元素，直至文档树的根节点。

事件冒泡机制使得可以在更高层次的元素上统一捕获和处理事件，而不需要为每个子元素单独绑定事件处理程序。这对于实现事件委托非常有用，同时也提供了一种方便的方式来处理多个相关元素的事件。

对于事件冒泡，可以使用 JavaScript 的 addEventListener方法来在父级元素上注册事件监听器，然后在事件处理程序中使用事件对象的属性来确定事件最初发生的具体目标元素。

document.getElementById('parentElement').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // 处理 LI 元素的点击事件
  }
});

通过事件冒泡和事件委托，可以更高效地管理和处理大量相似元素的事件，减少代码复杂度，并且能够自动适应动态添加的元素。

事件委托（Event delegation）和事件冒泡（Event bubbling）是两个相关但不同的概念：

事件委托：
    事件委托是一种利用事件冒泡机制来管理和处理事件的技术。
    通过将事件处理程序附加到共同祖先元素上，以代理管理其子元素的事件处理。
    可以减少内存消耗、简化代码结构，并且对于动态添加的元素具有适应性。

事件冒泡：
    事件冒泡是指事件在 DOM 树中向上传播的过程。
    当特定事件在某个元素上触发时，这个事件将会依次传播给该元素的父级元素、更高级的祖先元素，直至根节点。
    事件冒泡使得可以在更高层次的元素上捕获和处理事件，而无需为每个子元素单独绑定事件处理程序。

因此，事件委托是基于事件冒泡机制的一种技术，它利用了事件冒泡的特性来实现更高效的事件管理和处理。事件冒泡是 JavaScript 事件模型的一部分，而事件委托则是利用了这一特性来达到优化代码结构和性能的目的。

passive: true

在 Web 开发中，passive: true 是一个用于改进页面滚动性能的选项。当你给 addEventListener 方法添加滚动事件监听时，可以使用这个选项来指示浏览器该监听器不会调用 preventDefault 来阻止默认的滚动行为。

通常，滚动事件监听器可能会调用 event.preventDefault() 来阻止默认的滚动行为，比如在某些特定条件下阻止页面的滚动。然而，当滚动事件监听器使用 preventDefault 时，浏览器必须等待事件处理完成后才能继续进行滚动，这可能会导致性能问题。

通过将 passive: true选项传递给 addEventListener，开发者告诉浏览器该监听器永远不会调用 preventDefault，从而使浏览器可以更好地优化滚动性能。这对于提高页面的响应速度和流畅度非常有帮助，尤其是在移动设备上。

以下是使用 passive: true的示例：

// 添加滚动事件监听器，并指定 passive 选项为 true
window.addEventListener('scroll', handleScroll, { passive: true });

// 滚动事件处理函数
function handleScroll(event) {
  // 在这里处理滚动事件，但不调用 event.preventDefault()
}

需要注意的是，并非所有浏览器都支持 passive 选项。因此，在使用时需要确保浏览器支持该特性或提供替代方案。

合成器线程

合成器线程（Compositor Thread）是在浏览器中负责处理页面渲染的一种特殊线程。它主要负责将 Web 页面的图层合成为屏幕上的最终像素，以实现流畅的页面滚动、动画效果和用户交互。

在现代的 GPU 加速浏览器中，页面通常被分割成多个图层（Layers），这些图层可以由 HTML 元素、CSS 样式、Canvas 或视频等元素组成。合成器线程利用硬件加速来对这些图层进行复合（Compositing），并将它们合成为最终的页面显示。

合成器线程具有以下特点和作用：

硬件加速：利用 GPU 进行页面图层的合成和渲染，以提高页面渲染性能。

独立线程：合成器线程通常是一个独立于主线程和其他页面渲染进程的线程，它专门负责图层合成和渲染工作。

优化页面渲染：通过异步进行图层的合成和渲染，可以减轻主线程的压力，提高页面的响应速度和流畅度。

支持动画与滚动：合成器线程的存在使得浏览器能够更好地支持页面中的动画效果、滚动操作以及 CSS 3D 变换等功能。

总之，合成器线程在现代浏览器中扮演着重要的角色，它通过硬件加速和异步渲染等策略，帮助实现了流畅的页面渲染和用户交互体验。