script标签的defer和async及服务器渲染

1.script标签的async与defer

① async: 异步加载对应的javascript脚本，不阻塞HTML页面的渲染，当对应的javascript加载完成后，如果此时HTML页面还未加载完成，那么会阻塞页面的渲染，等javascript执行完成后再继续HTML页面的加载。这意味着脚本的执行可能发生在页面解析完毕之前或之后，具体取决于脚本下载的速度。如果多个脚本都有 async 属性，它们的执行顺序将是不确定的。

② defer: 异步加载对应的javascript脚本，不阻塞HTML页面的渲染，当对应的javascript加载完成后，如果此时HTML页面还未加载完成，那么不会阻塞页面的渲染，等HTML页面加载完成后再接着执行加载完成的javascript脚本。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。 因此，在<script>元素中设置 defer属性， 相当于告诉浏览器立即下载，但延迟执行。与 async 不同，多个带有 defer 属性的脚本会按照它们在页面中出现的顺序执行。

async：async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer 不同的是， 标记为async的脚本并不保证按照指定它们的先后顺序执行。

• 会异步加载脚本文件，但不会阻止文档的解析。

• 一旦脚本下载完成，立即执行，不考虑它们在文档中的位置，可能会在文档解析完成前或后执行。

• 多个带有async 属性的脚本的执行顺序是不确定的，取决于它们下载完成的顺序。

• 由于两个 script标签都带有 async属性，这意味着它们会并行加载，不会等待前一个脚本加载完成才开始加载下一个脚本。

• 这可以提高页面加载性能，因为浏览器可以同时下载多个资源，而不必等待一个资源的下载完成。

总结：

当script中有defer属性时，脚本的加载过程和文档加载是异步发生的，等到文档解析完脚本才开始执行。先html后脚本

当script有async属性时，脚本的加载过程和文档加载也是异步发生的。但脚本下载完成后会停止HTML解析，执行脚本，脚本解析完继续HTML解析。

当script同时有async和defer属性时，执行效果和async一致。

使用场景：

• 广告代码：与第三方分析代码类似，广告脚本通常不是页面主要内容的一部分，因此可以使用 加载，以免延迟页面渲染。async

选择使用 async 还是 defer 取决于脚本的执行时机和依赖关系。如果脚本不依赖于页面的其余部分，而且可以独立运行，那么可以考虑使用 async。如果脚本需要在整个文档解析完成后执行，或者依赖于其他脚本，那么可以使用 defer。如果脚本需要立即执行且不依赖于页面的其余内容，可以使用普通的 <script>标签。

2.移动端适配这里，分辨率的适配是怎么做的。有接触过媒体查询吗；物理像素与逻辑像素的关系

移动端适配是为了确保网页在不同设备上以及不同分辨率下都能够良好地显示。在移动端适配中，媒体查询和像素的概念都是非常重要的。
 

1.物理像素（Physical Pixel）： 是屏幕上的实际硬件像素，它们是屏幕上显示的最小单位。不同设备的物理像素密度可能会有差异。
2.逻辑像素（Logical Pixel）： 是在 CSS 和布局计算中使用的虚拟像素，它们是相对长度单位的基础。逻辑像素的概念有助于在不同分辨率的设备上提供一致的显示效果。
3.设备独立像素（Device-Independent Pixel，dp或dip）： 一种与物理设备无关的抽象概念，用于描述屏幕上的一种相对长度单位。Android系统中使用dp，iOS系统中使用pt（点）。

物理像素和逻辑像素之间的关系是通过设备像素比来描述的，公式为：
[ DPR = \frac{{物理像素}}{{逻辑像素}} ]
2. 媒体查询：
媒体查询是一种CSS3的技术，它允许根据设备特性和属性来应用不同的样式。在移动端适配中，媒体查询通常用于根据屏幕宽度、高度、设备方向等条件来应用不同的样式。
/* 基于屏幕宽度的媒体查询 */
@media only screen and (max-width: 600px) {
    /* 在宽度小于等于600px时应用的样式 */
}

/* 基于屏幕DPR的媒体查询 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* 在高DPR设备上应用的样式，比如Retina屏幕 */
}

通过媒体查询，你可以为不同的设备或不同的屏幕特性提供不同的样式，以实现移动端适配。
在实际的移动端适配中，通常会结合使用相对单位（如百分比、em、rem）以及媒体查询来确保在不同屏幕大小和分辨率下都能够提供一致的用户体验。

3.浏览器渲染的过程，就是CSS与HTML是怎么结合的

浏览器渲染过程涉及HTML和CSS的结合，它是一个多步骤的过程。下面是一个简化的浏览器渲染流程：

1.构建DOM树： 浏览器首先解析HTML文档，将其转换为一棵DOM（文档对象模型）树。DOM树表示HTML文档的结构，每个HTML元素都被表示为树上的一个节点。
2.构建CSSOM树： 浏览器解析CSS文件，构建CSS对象模型（CSSOM）树。CSSOM树表示样式表的结构，每个CSS规则被表示为树上的一个节点。
3.合并DOM和CSSOM： 将DOM树和CSSOM树合并，创建一个称为"渲染树"（Render Tree）的结构。渲染树包含了需要在屏幕上渲染的所有可见元素，但它并不包括不可见的元素，比如&lt;head&gt;中的元素。
4.计算布局： 浏览器根据渲染树计算每个元素在屏幕上的准确位置和大小。这个阶段叫做布局或回流。
5.绘制： 浏览器使用计算得到的位置和大小信息，将渲染树的每个节点绘制到屏幕上。这个阶段叫做绘制。
6.合并图层： 浏览器可能会使用硬件加速，将页面分成多个图层，这有助于提高性能。在这一步，这些图层可能会被合并以减少绘制的开销。
7.显示： 渲染的内容显示在屏幕上。

在整个过程中，HTML提供了文档的结构，而CSS则提供了样式和布局信息。这两者结合在一起，通过渲染树的形式最终呈现在用户的浏览器中。如果有任何样式更改或者用户交互，浏览器可能需要重新执行这个流程来更新页面的呈现。

4.服务器渲染有接触过吗

服务器渲染SSR是一种在服务器上生成页面内容并将其发送到浏览器的技术。与客户端渲染（Client-Side Rendering，简称CSR）相对，服务器渲染在服务器端处理页面的生成，然后再将其发送到客户端进行显示。

以下是一些关于服务器渲染的基本概念：

1. 性能优势： 服务器渲染通常能够提供更快的首次加载性能，因为用户在收到内容之前不需要等待 JavaScript 文件的下载和执行。

2. SEO友好： 由于搜索引擎爬虫能够直接获取服务器渲染的内容，相对于一些单页面应用的客户端渲染，服务器渲染更有利于搜索引擎优化（SEO）。

3. 首屏渲染： 服务器渲染通常能够更迅速地呈现首屏内容，这对提高用户体验至关重要。

4. 复杂性： 服务器渲染的实现可能会增加项目的复杂性，因为你需要处理在服务器和客户端之间共享状态，而且服务器端的渲染逻辑可能涉及到模板引擎等技术。

5. 框架支持： 许多现代前端框架，如Next.js（React框架的一部分）和Nuxt.js（Vue框架的一部分），提供了便捷的服务器渲染解决方案。

区别

服务器渲染（Server-Side Rendering，SSR）和浏览器渲染（Client-Side Rendering，CSR）是两种不同的前端渲染方式，它们有一些关键区别：
1. 渲染位置：

服务器渲染 (SSR): 页面的 HTML 是在服务器上生成的，服务器将完整的 HTML 页面发送到客户端。客户端接收到的是已经包含了数据和结构的完整 HTML 页面。
浏览器渲染 (CSR): 页面的 HTML 是由浏览器下载一个包含 JavaScript 的空白 HTML 页面，然后在浏览器中使用 JavaScript 动态生成并渲染内容。

2. 初始加载时间：

SSR: 提供了更快的初始加载时间，因为服务器在发送 HTML 页面时已经包含了初始的数据，客户端只需解析和渲染。
CSR: 需要等待 JavaScript 下载、解析和执行，然后才能开始渲染页面。这可能导致初始加载时间较长，尤其是在网络条件不佳的情况下。

3. SEO（搜索引擎优化）：

SSR: 对搜索引擎更友好，因为搜索引擎可以直接抓取和索引服务器渲染的 HTML 内容。
CSR: 搜索引擎需要等待 JavaScript 执行完成后，才能获取和索引页面内容，这可能影响 SEO。

4. 用户体验：

SSR: 提供了更快的初始加载时间，使用户更快地看到页面内容。但在后续的页面交互中，可能会有一些延迟，因为每次用户与应用交互时都需要从服务器获取新的 HTML。

CSR: 初始加载可能较慢，但在用户与应用交互时可以更快地加载更新的内容，因为只需要获取和渲染数据，而无需重新获取整个 HTML 页面。

5. 开发复杂性：

SSR: 通常需要更多的服务器端配置和处理，开发上可能相对复杂。
CSR: 更注重前端逻辑，开发上可能更灵活，但需要处理更多的客户端逻辑。

总结：
选择使用服务器渲染还是浏览器渲染通常取决于项目的具体需求，包括页面加载性能、SEO 要求、开发复杂性等。有时候，项目中也会采用混合的方式，称为“同构应用”（Isomorphic App），结合了服务器渲染和客户端渲染的优势。

场景：

选择使用服务器渲染（SSR）或浏览器渲染（CSR）通常取决于项目的具体需求和优缺点。以下是一些一般的指导原则：
使用服务器渲染（SSR）的情况：

1.SEO 要求高： 如果项目对搜索引擎优化（SEO）非常敏感，服务器渲染是更好的选择，因为搜索引擎可以直接抓取和索引服务器渲染的 HTML。
2.初始加载性能要求高： 如果你关注网页的初始加载性能，特别是对于首屏渲染时间的优化，SSR 通常能提供更快的初始加载体验。
3.对于内容频繁变化： 如果项目中的内容需要频繁变化，但用户对于初始加载速度的要求较高，可以考虑使用 SSR，以保证页面的初始内容是即时可见的。
4.有复杂的后端逻辑： 当项目有复杂的后端逻辑或需要与服务器进行密切的交互时，使用 SSR 可能更方便。
5.团队对服务器端开发经验丰富： 如果开发团队在服务器端开发方面有更多的经验，SSR 可能更容易被实施和维护。

使用浏览器渲染（CSR）的情况：

6.对初始加载性能要求不高： 如果对于初始加载性能要求较低，而更注重后续页面交互时的性能，可以考虑使用 CSR。
7.前端交互频繁： 如果应用有很多交互和动态更新，CSR 提供了更流畅的用户体验，因为页面不需要重新加载。
8.独立性强： 如果项目中的前端与后端更为独立，前端逻辑复杂，而且有现代 JavaScript 框架支持，使用 CSR 可能更合适。
9.SPA（单页面应用）需求： 如果项目是一个单页面应用（SPA），其中所有页面内容都在客户端动态生成，那么 CSR 是自然的选择。
10.开发团队对前端框架经验丰富： 如果开发团队对于现代前端框架（如React、Vue、Angular等）有更多的经验，CSR 可能更容易实施。

在实际项目中，有时候也会选择使用混合的方式，即同构应用（Isomorphic App），结合了服务器渲染和客户端渲染的优势，以满足项目的多样化需求。选择合适的渲染方式需要综合考虑项目的特点、性能需求、开发团队技能等因素。