【每日前端面试题-04】

在前端开发中，如何优化页面的加载性能？请列举一些常见的优化方法。

• 资源加载优化
  1. 压缩与合并文件

     • CSS 和 JavaScript：使用工具（如 UglifyJS、cssnano 等）对 CSS 和 JavaScript 文件进行压缩，去除不必要的空格、注释等，减小文件体积。同时，将多个小的 CSS 和 JavaScript 文件合并成一个文件，减少浏览器请求次数。例如，在构建工具（如 Webpack）中配置相关插件实现自动压缩和合并。

     • 图片：对图片进行压缩，根据图片用途选择合适的图片格式（如 JPEG 适合色彩丰富的照片，PNG 适合有透明背景的图片，WebP 格式在现代浏览器中有较好的兼容性且压缩比高）。还可以采用图片懒加载，当图片进入浏览器可视区域时再加载，减轻页面初始加载负担。

  2. 缓存策略
     • 设置缓存头：在服务器端为静态资源设置合适的缓存头（如 Cache - Control、Expires 等），告诉浏览器资源的缓存策略。对于不常变化的静态资源（如样式表、脚本、图片等），设置较长的缓存时间，这样浏览器再次请求相同资源时可以直接从本地缓存中获取，减少网络请求。
     • Service Worker：它是一种在后台运行的脚本，能够拦截网络请求，实现离线缓存和按需缓存。可以使用 Service Worker 缓存页面所需的资源，使得在离线状态下或重复访问时能快速加载页面。
  3. 异步加载脚本
     • defer 和 async 属性：在 HTML 的 <script> 标签中，使用 defer 属性可使脚本在文档解析完成后按顺序执行，async 属性则让脚本在下载完成后立即执行（不保证顺序）。对于一些不影响页面渲染的脚本（如统计脚本），使用这些属性可以避免阻塞页面渲染。
     • 动态脚本加载：在 JavaScript 中通过 document.createElement(‘script’) 动态创建脚本元素并添加到文档中，在需要的时候加载脚本，而不是在页面一开始就加载所有脚本。
• 页面渲染优化
  1. 优化 CSS 加载顺序
     • 关键 CSS：将关键的 CSS（用于渲染页面首屏样式的 CSS）放在 标签内加载，确保页面能尽快呈现出样式。避免将重要样式放在外部文件中延迟加载，导致页面出现 “样式闪烁” 的现象。
     • 媒体查询与加载时机：对于一些针对不同屏幕尺寸的 CSS 样式，合理使用媒体查询，并根据实际情况延迟加载非关键的样式表。例如，对于大屏幕设备的特定样式，可以在页面渲染完成后再异步加载。
  2. 减少重排与重绘
     • 批量修改样式：尽量避免频繁地单独修改元素的样式属性，而是通过一次性修改元素的 className 来改变多个样式。因为每次单独修改样式属性可能会导致浏览器重新计算布局（重排）和重新绘制元素（重绘），增加性能开销。
     • 避免隐藏和显示元素：频繁地显示和隐藏元素（如通过 display: none 和 display: block 切换）会引起重排和重绘。如果需要隐藏元素，可以考虑使用 visibility: hidden，这样只会引起重绘，不会触发重排。但要注意 visibility: hidden 元素仍占据空间，与 display: none 效果不同。
  3. 优化 DOM 操作
     • 文档片段（DocumentFragment）：当需要大量添加或删除 DOM 元素时，先将操作应用于文档片段，完成后再将文档片段添加到 DOM 树中。这样可以减少对 DOM 树的直接操作次数，从而减少重排和重绘。
     • 事件委托：利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是为每个子元素都绑定事件。这样不仅可以减少事件处理程序的数量，还能在动态添加或删除子元素时，无需重新绑定事件，提高性能。
• 其他优化
  1. 服务器端优化
     • 内容分发网络（CDN）：将静态资源分发到离用户更近的服务器节点，加快资源的下载速度。CDN 会根据用户的地理位置，智能选择最优的服务器提供资源，减少数据传输的距离和时间。
     • 优化服务器响应时间：优化服务器端代码，减少数据库查询时间、提高脚本执行效率等，确保服务器能快速响应客户端请求。例如，对数据库查询进行缓存，避免重复查询相同数据。
  2. 优化代码结构
     • 代码拆分：将大的 JavaScript 模块拆分成多个小的模块，按需加载。在 React 或 Vue 项目中，可以使用动态导入（如 import()）实现代码的按需加载，只在需要时加载相关模块，减小初始加载包的大小。
     • 避免内联脚本和样式：尽量将脚本和样式放在独立的文件中，便于浏览器缓存和代码的复用与维护。过多的内联代码会增加 HTML 文件的体积，影响页面的加载和解析速度。
       记忆口诀：“资源加载要优化，压缩合并加缓存，异步脚本别阻塞。页面渲染有技巧，样式加载分先后，重排重绘减次数，DOM 操作要巧妙。其他优化也重要，服务器端配 CDN，代码结构巧拆分。”

请说明 CSS 中 display 属性的常见取值及其作用。

CSS 中 display 属性用于规定元素应该生成的框的类型，常见取值及其作用如下：

1. block：
   • 作用：将元素显示为块级元素。块级元素会独占一行，其宽度默认填满父容器的宽度，高度由内容决定，并且可以设置宽度、高度、外边距（margin）和内边距（padding）等属性。常见的块级元素有 <div>、<p>、<h1> - <h6>、<ul>、<ol> 等。例如，通过 div { display: block; width: 50%; height: 200px; margin: 10px; padding: 5px; } 可以设置一个宽度为父容器 50%，高度为 200 像素，外边距为 10 像素，内边距为 5 像素的块级 <div> 元素。
2. inline：
   • 作用：使元素显示为内联元素。内联元素不会独占一行，多个内联元素会在同一行显示，其宽度和高度由内容决定，并且只能设置水平方向的外边距（margin - left、margin - right）和内边距（padding - left、padding - right），垂直方向的外边距和内边距不会影响布局。常见的内联元素有 <a>、<span>、<img>、<strong>、<em> 等。比如<span { display: inline; color: red; }>会让 <span> 元素以内联方式显示，并设置文字颜色为红色。
3. inline - block：
   • 作用：将元素呈现为内联块级元素。它结合了内联元素和块级元素的部分特性，既可以在同一行显示，又能像块级元素一样设置宽度、高度、外边距和内边距等属性。常用于创建一行内多个可设置尺寸和间距的元素，例如制作水平导航栏时，每个导航项可以设置为 display: inline - block。
4. none：
   - 作用：使元素不显示，并且该元素在文档流中所占的空间也会消失，就好像该元素不存在一样。这常用于根据某些条件（如 JavaScript 控制）隐藏页面中的元素。例如，通过 #myElement { display: none; } 可以隐藏 id 为 myElement 的元素，该元素及其子元素都不会在页面上显示，也不会占据页面空间。
5. flex：
   • 作用：将元素设置为弹性容器，容器内的子元素会成为弹性项目。通过弹性布局，可以方便地实现各种灵活的页面布局，如水平或垂直居中、自动排列、自适应大小等。例如，display: flex; justify - content: center; align - items: center; 可以使弹性容器内的子元素在水平和垂直方向都居中显示。弹性布局是 CSS3 中强大的布局方式，常用于响应式设计和复杂页面布局。
6. grid：
   - 作用：将元素定义为网格容器，利用网格布局模型创建二维网格布局。它可以精确地控制元素在行列中的位置和大小，通过设置 grid - template - rows、grid - template - columns 等属性来定义网格结构，grid - column - start、grid - row - start 等属性来定位元素。适用于创建复杂的网页布局，如多列布局、瀑布流布局等，能更高效地控制页面元素的排列和分布。
7. table：
   • 作用：使元素以类似 HTML 表格的方式显示，将元素看作一个 <table> 元素，其直系子元素会按照表格行（<tr>）和单元格（<td>）的方式进行布局。这种方式模拟了传统 HTML 表格的布局行为，但在现代网页布局中，由于其可维护性和灵活性较差，一般较少使用，更多地被 flex 和 grid 布局取代。不过在某些特定场景，如需要展示复杂表格数据且对兼容性要求较高时，仍可能会用到。
     记忆口诀：“display 值有多样，block 独占一行强，inline 同行内容装，inline - block 两者长，none 隐身不登场，flex 弹性布局棒，grid 二维网格亮，table 模拟表格样。”