✊不积跬步，无以至千里；不积小流，无以成江海。

从URL输入到页面展现

从 URL 输入到页面展现的过程可以分为以下几个步骤：

解析 URL：获取用户输入的 URL 字符串，并使用 JavaScript 中的 URL 对象进行解析。URL 对象提供了许多属性和方法来访问解析后的 URL 组件，如协议、主机、路径等。

ini 复制代码

const url = new URL("https://www.example.com/path?param1=value1&param2=value2");
const protocol = url.protocol; // "https:"
const host = url.host; // "www.example.com"
const path = url.pathname; // "/path"
const searchParams = url.searchParams; // 获取查询参数对象

发送网络请求：使用解析后的 URL 组件构建一个网络请求，例如使用 Fetch API 或 XMLHttpRequest 发送 GET 请求。

ini 复制代码

fetch(url)
  .then(response => response.text())
  .then(data => {
    // 请求成功，获取到响应数据
    console.log(data);
    // 进行页面展现的操作
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error);
  });

处理响应数据：在网络请求成功后，获取到响应数据，并根据数据的格式进行处理。可以是 HTML、JSON、XML 等。

如果响应数据是 HTML，可以将其直接插入到页面中的某个元素中：

ini 复制代码

fetch(url)
  .then(response => response.text())
  .then(html => {
    const targetElement = document.getElementById("target");
    targetElement.innerHTML = html;
  })
  .catch(error => {
    console.error(error);
  });

如果响应数据是 JSON，可以将其解析为 JavaScript 对象，并根据需要进行展现和操作：

ini 复制代码

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 处理 JSON 数据
    console.log(data);
    // 进行页面展现的操作
  })
  .catch(error => {
    console.error(error);
  });

更新页面内容：根据获取到的数据，更新页面的内容和样式。

重绘和回流

重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的两个关键概念。

重绘是指当页面中的元素样式发生改变，但不影响其在文档流中的位置时，浏览器会重新绘制这些元素的外观。例如，修改元素的颜色、背景等属性就会触发重绘。

回流是指当页面中的元素发生尺寸、位置或布局等改变时，浏览器需要重新计算元素的几何属性，并重新构建页面的布局。例如，修改元素的宽度、高度、位置等属性，或者添加、删除元素，都会触发回流。

重绘和回流都会消耗一定的计算资源，因此频繁触发重绘和回流操作可能会导致页面性能下降。为了优化页面性能，可以采取一些措施，如：

使用 CSS3 的 transform 和 opacity 属性来实现动画效果，它们可以通过 GPU 加速，减少重绘和回流的开销。
将需要多次修改的样式，先通过修改元素的 class 来一次性应用，而不是逐个修改样式。
避免频繁访问会触发回流的属性，如 offsetTop、offsetLeft、offsetWidth、offsetHeight 等。
使用文档片段（DocumentFragment）来批量操作 DOM，减少回流次数。
对于需要多次修改样式的操作，可以使用 requestAnimationFrame() 方法在下一次重绘前执行，以合并操作并优化性能。

需要注意的是，重绘和回流是浏览器内部的渲染过程，对于开发者而言，并不直接操作和控制这些过程。但了解重绘和回流的概念，以及相关的优化技巧，有助于编写高性能的前端代码。

JavaScript的加载

JavaScript 的加载是指将 JavaScript 代码从外部文件加载到网页中并执行的过程。JavaScript 可以通过以下几种方式进行加载：

<script> 标签：最常见的加载 JavaScript 的方式是使用 <script> 标签。可以在 HTML 文件的 <head> 或 <body> 部分添加 <script> 标签，并通过 src 属性指定外部 JavaScript 文件的路径。例如：

xml 复制代码

<script src="script.js"></script>

这会将位于 script.js 文件中的 JavaScript 代码加载到页面中。可以将 <script> 标签放置在 HTML 文件中的任何位置，但通常建议将其放置在 <body> 结束标签之前，以避免阻塞页面的渲染。

内联脚本：除了外部 JavaScript 文件，还可以使用内联脚本将 JavaScript 代码直接嵌入到 HTML 文件中。可以在 <script> 标签中使用 type="text/javascript" 属性，并在标签内部编写 JavaScript 代码。例如：

xml 复制代码

<script type="text/javascript">
  // JavaScript 代码
</script>

内联脚本的优点是可以直接在 HTML 文件中编写和管理 JavaScript 代码，但当代码较多时，会导致 HTML 文件变得冗长和难以维护。

动态加载：有时需要在特定条件下动态加载 JavaScript 代码，可以使用 JavaScript 提供的动态加载机制。常见的方法是通过创建 <script> 元素并将其添加到页面中，或使用 AJAX 请求获取 JavaScript 代码并通过 eval() 函数执行。例如：

ini 复制代码

// 动态创建 <script> 元素并设置 src 属性
var script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);

或者使用 AJAX 请求获取 JavaScript 代码：

ini 复制代码

// 使用 AJAX 请求获取 JavaScript 代码
var xhr = new XMLHttpRequest();
xhr.open('GET', 'script.js', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    eval(xhr.responseText); // 执行获取到的 JavaScript 代码
  }
};
xhr.send();

动态加载可以根据需要在运行时加载 JavaScript 代码，从而实现更灵活的脚本加载方式。

无论使用哪种加载方式，都需要注意加载 JavaScript 的顺序和依赖关系，确保代码在正确的时机加载和执行，避免出现错误或依赖问题。

CSS的加载

CSS 的加载过程涉及将 CSS 文件应用于网页以渲染样式。以下是 CSS 的加载方式：

外部样式表：最常见的方式是使用外部 CSS 文件。可以通过在 HTML 文件的 <head> 部分使用 <link> 标签来引用外部 CSS 文件。例如：

ini 复制代码

<link rel="stylesheet" href="styles.css">

这将会将位于 styles.css 文件中的 CSS 样式应用到页面中。外部样式表可以在多个页面之间共享，并且使 HTML 文件保持简洁和易于维护。

内联样式：除了外部样式表，可以在 HTML 元素中使用 style 属性直接定义内联样式。例如：

css 复制代码

<div style="color: red; font-size: 16px;">This is a red text</div>

内联样式适用于单个元素的特定样式需求，但当样式较多时，会导致 HTML 文件变得冗长和难以维护。

<style> 标签：可以在 HTML 文件的 <head> 部分使用 <style> 标签来定义页面的样式。例如：

xml 复制代码

<style>
  body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
  }
</style>

<style> 标签允许直接在 HTML 文件中编写 CSS 代码，但当样式较多时，仍然会导致 HTML 文件变得冗长和难以维护。

CSS 文件的加载顺序非常重要。通常，应该将 <link> 标签放置在 HTML 文件的 <head> 部分，以确保在渲染页面内容之前加载 CSS 文件。这样可以避免页面在加载时出现无样式内容（FOUC）或样式闪烁的问题。

此外，还可以使用 CSS 预处理器（如 Sass、Less）或 CSS 模块化工具（如 CSS Modules、BEM）来管理和组织 CSS 代码，以提高样式的可维护性和复用性。

总结来说，CSS 的加载可以通过外部样式表、内联样式或 <style> 标签来实现，根据具体的需求和项目情况选择合适的加载方式。

白屏与FOUC

白屏（White Screen）和 FOUC（Flash of Unstyled Content）是在网页加载过程中可能出现的两种问题。

白屏（White Screen）：白屏是指在网页加载过程中，页面内容完全空白一片的现象。用户看到的是一个空白的页面，直到页面中的内容完全加载完成才会显示出来。白屏通常是由于页面资源加载较慢或阻塞导致的，例如大量的 JavaScript 或 CSS 文件、图片等资源加载时间过长。这可能会给用户带来不好的体验，因为他们无法立即看到页面的内容。

为了避免白屏问题，可以考虑以下优化策略：

将 CSS 文件放置在 <head> 标签中，确保样式优先加载，以避免页面在加载过程中没有样式。
将 JavaScript 文件放置在页面底部，以确保页面内容优先加载，避免 JavaScript 的加载和执行阻塞页面渲染。

FOUC（Flash of Unstyled Content）：FOUC 是指在页面加载过程中，由于样式表的加载延迟或阻塞，导致页面在渲染时短暂地显示出未样式化的内容，然后在样式表加载完成后再次显示出样式化的内容。这种现象可能会导致页面在加载过程中出现短暂的样式闪烁，给用户带来不好的体验。

FOUC 通常发生在以下情况下：

将样式表放置在 HTML 文档底部，或者使用 JavaScript 动态加载样式表。
使用外部样式表，但由于网络延迟或其他原因导致样式表加载较慢。

为了避免 FOUC 问题，可以采取以下措施：

将样式表放置在 <head> 标签中，确保样式表在页面渲染前加载完成。
尽量减少外部样式表的数量和大小，以加快加载速度。
使用内联样式或内联样式表定义关键样式，以确保页面在加载过程中有基本样式。

综上所述，白屏和 FOUC 都是在页面加载过程中可能出现的问题，但可以通过优化资源加载顺序、减少资源大小和数量等方式来避免这些问题，提供更好的用户体验。

异步加载async与defer的区别

async 和 defer 是用于异步加载 <script> 标签中的 JavaScript 文件的属性。它们的区别如下：

async 属性：当浏览器遇到带有 async 属性的 <script> 标签时，它将立即开始下载 JavaScript 文件，并在下载完成后立即执行脚本，而不会阻塞 HTML 页面的解析和渲染过程。多个带有 async 属性的脚本文件的加载和执行顺序是不确定的，因此，它们之间可能存在依赖问题。脚本将在下载完成后尽快执行，这意味着它可能会在整个页面加载完成之前执行，甚至在 DOMContentLoaded 事件触发之前执行。

xml 复制代码

<script src="script.js" async></script>

defer 属性：当浏览器遇到带有 defer 属性的 <script> 标签时，它也会异步下载 JavaScript 文件，但它会推迟脚本的执行，直到 HTML 文档解析完成之后才执行。这意味着脚本的执行将在 DOMContentLoaded 事件之前发生，确保脚本在文档完全解析后再执行。如果有多个带有 defer 属性的脚本文件，则它们会按照在文档中出现的顺序依次执行。

xml 复制代码

<script src="script.js" defer></script>

总结

async 和 defer 都可以实现异步加载 JavaScript 文件，以提高页面加载性能。它们的主要区别在于脚本的执行时机。async 属性会立即下载并执行脚本，而 defer 属性会推迟脚本的执行，直到文档解析完成。

域名、DNS、服务器的关系

域名、DNS（Domain Name System）和服务器之间存在密切的关系，它们相互配合以使网站在互联网上可访问。

域名：域名是用于标识和访问网站的人类可读的字符串。它是将网站的 IP 地址映射到易于记忆的名称的方式。域名通常由多个部分组成，例如：[www.example.com]。域名的注册和管理是由域名注册商进行的。当用户在浏览器中输入域名时，浏览器会将其发送到 DNS 服务器以获取与域名相关联的 IP 地址。
DNS：DNS 是一个分布式的命名系统，用于将域名转换为相应的 IP 地址。当用户在浏览器中输入域名时，浏览器会向本地 DNS 服务器发送查询请求。本地 DNS 服务器通常由用户的互联网服务提供商（ISP）提供。如果本地 DNS 服务器缓存了与域名相关的 IP 地址，则它会返回缓存的 IP 地址。否则，本地 DNS 服务器将会向其他 DNS 服务器发送查询请求，逐级向上查找，直到找到与域名对应的 IP 地址。一旦本地 DNS 服务器获取到 IP 地址，它将返回给用户的浏览器，使浏览器能够建立与服务器的连接。
服务器：服务器是存储网站文件和数据的计算机。当用户在浏览器中输入域名并获得与之相关的 IP 地址后，浏览器会与该 IP 地址对应的服务器建立连接。服务器接收来自浏览器的请求，并返回网站的相关文件和数据，使其在用户的浏览器中呈现出来。服务器通常是由网站所有者或托管提供商管理和维护的。

综上所述，域名充当了人类可读的标识符，DNS 则将域名映射到相应的 IP 地址，最终使用户的浏览器能够与服务器建立连接并获取网站的内容。域名、DNS 和服务器之间的协作使得用户可以通过友好的域名访问网站，而无需直接使用 IP 地址。

Javascript基础-浏览器加载机制

从URL输入到页面展现

重绘和回流

JavaScript的加载

CSS的加载

白屏与FOUC

异步加载async与defer的区别

域名、DNS、服务器的关系