css阻塞

\n```\n\n这样，Webpack会根据配置自动处理雪碧图，并生成对应的雪碧图和CSS样式表。CSS中的`background`属性会引用生成的雪碧图，并通过`background-position`来指定显示的小图标在雪碧图中的位置。\n\n确保在CSS中指定了每个小图标在雪碧图中的位置和大小，以便正确显示。\n\n使用Webpack自动处理雪碧图可以简化开发流程，并且可以根据需要自定义配置。`webpack-spritesmith`是一个常用的Webpack插件，可以帮助自动处理雪碧图。\n\n### 4. 图标类型资源推荐使用 iconfont\n\n如果你有很多图标类型的图片资源，并且想使用`iconfont`来处理这些资源，可以按照以下步骤进行处理：\n\n- 获取图标资源：首先，你需要获取你想要的图标资源。你可以从`iconfont`网站或其他图标库中选择和下载符合需求的图标。这个没有啥好说的，直接推荐: https://www.iconfont.cn/\n\n- 生成字体文件：接下来，你需要将这些图标转换成字体文件。你可以使用`iconfont`提供的在线转换工具，将图标文件上传并生成字体文件（包括`.ttf`、`.eot`、`.woff`和`.svg`格式）。\n\n- 引入字体文件：将生成的字体文件下载到本地，并在你的项目中引入。通常，你需要在CSS文件中通过`@font-face`规则引入字体文件，并为字体定义一个唯一的名称。\n\n- 使用图标：一旦字体文件引入成功，你可以在CSS中通过设置`content`属性来使用图标。每个图标都会有一个对应的Unicode代码，你可以在`iconfont`提供的网站或字体文件中找到对应图标的Unicode代码，并通过设置`content`属性的值为该Unicode代码来使用图标。\n\n以下是一个简单的示例，以帮助你更好地理解：\n\n```css\n@font-face {\n font-family: 'iconfont';\n src: url('path/to/iconfont.eot'); /* 引入字体文件 */\n /* 其他格式的字体文件 */\n}\n\n.icon {\n font-family: 'iconfont'; /* 使用定义的字体名称 */\n font-size: 16px; /* 图标大小 */\n line-height: 1; /* 图标行高 */\n}\n\n.icon-facebook::before {\n content: '\\e001'; /* 使用Unicode代码表示想要显示的图标 */\n}\n\n.icon-twitter::before {\n content: '\\e002'; /* 使用Unicode代码表示想要显示的图标 */\n}\n\n.icon-instagram::before {\n content: '\\e003'; /* 使用Unicode代码表示想要显示的图标 */\n}\n```\n\n在上述示例中，我们首先通过`@font-face`引入了字体文件，并为字体定义了一个名称`iconfont`。然后，我们使用该名称作为`font-family`属性的值，以便在`.icon`类中使用该字体。最后，我们通过在`::before`伪元素中设置`content`属性为图标的Unicode代码，来显示相应的图标。\n\n在HTML中，你可以像下面这样使用对应的CSS类来显示相应的图标：\n\n```html\n\n\n\n```\n\n通过上述步骤，你可以使用`iconfont`来处理你的图标资源，并在项目中方便地使用它们。确保在CSS中设置了图标的字体大小和行高，以便正确显示图标。\n\n\n### 5. 使用 base64 格式\n\n**实际开发过程中，为何会考虑 base64 ？**\n\n使用Base64图片的优势有以下几点：\n\n- **减少HTTP请求数量**：通常情况下，每个网页都需要加载多张图片，因此会发送多个HTTP请求来获取这些图片文件。使用Base64图片可以将图片数据嵌入到CSS或HTML文件中，减少了对服务器的请求次数，从而提高网页加载速度。\n\n- **减少图片文件的大小**：Base64是一种编码方式，可以将二进制数据转换成文本字符串。通过使用Base64，可以将图片文件转换成文本字符串，并将其嵌入到CSS或HTML文件中。相比于直接引用图片文件，Base64编码的字符串通常会更小，因此可以减少图片文件的大小，从而减少了网页的总体积，加快了网页加载速度。\n\n- **简化部署和维护**：将图片数据嵌入到CSS或HTML文件中，可以减少文件的数量和复杂性，使得部署和维护变得更加简单和方便。此外，也不需要处理图片文件的路径和引用相关的问题。\n\n- **实现一些特殊效果**：通过Base64图片，可以实现一些特殊的效果，例如页面背景渐变、图标的使用等。这样可以避免使用额外的图片文件，简化了开发过程。\n\n上面虽然说饿了挺多有点，但是劣势也是很明显：\n\n- **增加了文本文件的体积**：因为Base64编码将二进制数据转换成文本字符串，所以会增加CSS或HTML文件的体积。在图片较大或数量较多时，这可能会导致文件变得庞大，从而导致网页加载速度变慢。\n\n- **缓存问题**：由于Base64图片被嵌入到了CSS或HTML文件中，如果图片内容有更新，那么整个文件都需要重新加载，而无法使用缓存。相比于独立的图片文件，Base64图片对缓存的利用效率较低。\n\n使用Base64图片在一些特定的场景下可以提供一些优势，但也需要权衡其带来的一些缺点。在实际开发中，可以根据具体的需求和情况，选择是否使用Base64图片。所以**建议复用性很强, 变更率较低，且小于 10KB 的图片文件，可以考虑 base64**\n\n**如何使用**？有要介绍一下 webpack 插件了： `url-loader` 或 `file-loader`\n\n**要使用Webpack将图片自动转换为Base64编码，您需要执行以下步骤**：\n\n1. 安装依赖：首先，确保您已经安装了`url-loader`或`file-loader`，它们是Webpack的两个常用的加载器。\n\n```bash\nnpm install url-loader --save-dev\n```\n\n2. 配置Webpack：在Webpack的配置文件中，添加对图片文件的处理规则。您可以在`module.rules`数组中添加一个新的规则，以匹配图片文件的后缀。\n\n```javascript\nmodule.exports = {\n // ...\n module: {\n rules: [\n // ...\n {\n test: /\\.(png|jpe?g|gif)$/i,\n use: [\n {\n loader: 'url-loader',\n options: {\n limit: 8192, // 设置图片大小的阈值，小于该值的图片会被转为Base64\n outputPath: 'images', // 输出路径\n publicPath: 'images', // 资源路径\n },\n },\n ],\n },\n ],\n },\n // ...\n};\n```\n\n 在上面的示例中，配置了一个处理`png`、`jpeg`、`jpg`和`gif`格式图片的规则。使用`url-loader`加载器，并设置了一些选项，例如`limit`限制了图片大小的阈值，小于该值的图片将会被转换为Base64编码。\n\n3. 在代码中引用图片：在您的代码中，可以像引用普通图片一样引用图片文件，Webpack会根据配置自动将其转换为Base64编码。\n\n```javascript\nimport imgSrc from './path/to/image.png';\n\nconst imgElement = document.createElement('img');\nimgElement.src = imgSrc;\ndocument.body.appendChild(imgElement);\n```\n\n4. 构建项目：最后，使用Webpack构建项目，它会根据配置自动将符合规则的图片文件转换为Base64编码，并将其嵌入到生成的输出文件中。\n\n```bash\nnpx webpack\n```\n\n这样，Webpack就会自动将图片转换为Base64编码，并将其嵌入到生成的输出文件中。请注意，在使用Base64图片时，需要权衡文件大小和性能，适度使用Base64编码，避免过大的文件导致网页加载变慢。\n\n\n### 6. 使用 CDN 加载图片\n\nCND 加载图片优势非常明显：\n\n- 加速网页加载速度：CDN通过将图片资源分布在全球的多个节点上，使用户能从离自己最近的节点获取资源，从而大大减少了网络延迟和加载时间。这可以提高网页的加载速度和用户体验。\n\n- 减轻服务器负载：CDN充当了一个缓冲层，当用户请求图片资源时，CDN会将图片资源从源服务器获取并缓存在节点中，下次再有用户请求同一资源时，CDN会直接从节点返回，减少了对源服务器的请求，分担了服务器的负载。\n\n- 提高并发性能：CDN节点分布在不同地区，用户请求图片资源时可以从离他们最近的节点获取，这可以减少网络拥塞和并发请求，提高了并发性能。\n\n- 节省带宽成本：CDN的节点之间会自动选择最优路径，有效利用了带宽资源，减少了数据传输的成本，尤其在大量图片资源请求时，能够带来显著的成本节省。\n\n- 提供高可用性：CDN通过分布式存储和负载均衡技术，提供了高可用性和容错能力。即使某个节点或源服务器发生故障，CDN会自动切换到其他可用节点，确保用户能够正常访问图片资源。\n\n总之，使用CDN加载图片可以提高网页加载速度、降低服务器负载、提高并发性能、节省带宽成本，并提供高可用性，从而改善用户体验和网站性能。\n\n\n### 7. 图片懒加载\n\n图片懒加载是一种在网站或应用中延迟加载图片的技术。它的主要目的是减少页面的初始加载时间，并提高用户的浏览体验。\n\n- 原理：图片懒加载的原理是只在用户需要时加载图片，而不是在页面初始加载时全部加载。这通常通过将图片的真实地址存储在自定义属性（例如`data-src`）中，而不是在`src`属性中。然后，在图片进入浏览器视图时，通过JavaScript动态将`data-src`的值赋给`src`属性，触发图片的加载。\n\n- 优势：图片懒加载可以显著减少初始页面的加载时间，特别是当页面中有大量图片时。它使页面加载变得更快，提高了用户的浏览体验。此外，懒加载还可以节省带宽和减轻服务器负载，因为只有当图片进入视图时才会加载。\n\n- 实现方法：图片懒加载可以通过纯JavaScript实现，也可以使用现成的JavaScript库，如`LazyLoad.js、Intersection Observer API等`。这些库提供了方便的API和配置选项，可以自定义懒加载的行为和效果。\n\n- 最佳实践：在使用图片懒加载时，可以考虑一些最佳实践。例如，设置一个占位符或加载中的动画，以提供更好的用户体验。另外，确保在不支持JavaScript的情况下仍然可用，并为可访问性提供替代文本（alt属性）。此外，对于移动设备，可以考虑使用响应式图片来适应不同的屏幕分辨率。\n\n**实现举例**：\n\n图片懒加载可以延迟图片的加载，只有当图片即将进入视口范围时才进行加载。这可以大大减轻页面的加载时间，并降低带宽消耗，提高了用户的体验。以下是一些常见的实现方法：\n\n1. Intersection Observer API\n\n`Intersection Observer API` 是一种用于异步检查文档中元素与视口叠加程度的API。可以将其用于检测图片是否已经进入视口，并根据需要进行相应的处理。\n\n```js\nlet observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n const lazyImage = entry.target;\n lazyImage.src = lazyImage.dataset.src;\n observer.unobserve(lazyImage);\n }\n });\n});\n\nconst lazyImages = [...document.querySelectorAll(\".lazy\")];\nlazyImages.forEach(function (image) {\n observer.observe(image);\n});\n```\n\n2. 自定义监听器\n\n或者，可以通过自定义监听器来实现懒加载。其中，应该避免在滚动事件处理程序中频繁进行图片加载，因为这可能会影响性能。相反，使用自定义监听器只会在滚动停止时进行图片加载。\n\n```js\nfunction lazyLoad() {\n const images = document.querySelectorAll(\".lazy\");\n const scrollTop = window.pageYOffset;\n images.forEach((img) => {\n if (img.offsetTop < window.innerHeight + scrollTop) {\n img.src = img.dataset.src;\n img.classList.remove(\"lazy\");\n }\n });\n}\n\nlet lazyLoadThrottleTimeout;\ndocument.addEventListener(\"scroll\", function () {\n if (lazyLoadThrottleTimeout) {\n clearTimeout(lazyLoadThrottleTimeout);\n }\n lazyLoadThrottleTimeout = setTimeout(lazyLoad, 20);\n});\n```\n\n在这个例子中，我们使用了 `setTimeout()` 函数来延迟图片的加载，以避免在滚动事件的频繁触发中对性能的影响。\n\n无论使用哪种方法，都需要为需要懒加载的图片设置占位符，并将未加载的图片路径保存在 `data` 属性中，以便在需要时进行加载。这些占位符可以是简单的 div 或样式类，用于预留图片的空间，避免页面布局的混乱。\n\n```html\n\n

\n\n\n $\"预览图\"$ \n```\n\n### 8. 图片预加载\n\n图片预加载是一种在网站或应用中提前加载图片资源的技术。它的主要目的是在用户实际需要加载图片之前，将其提前下载到浏览器缓存中。\n\n图片预加载通常是在页面加载过程中或在特定事件触发前异步加载图片资源。通过使用 `JavaScript`，可以在网页DOM元素中创建一个新的`Image`对象，并将要预加载的图片的URL赋值给该对象的`src`属性。浏览器在加载过程中会提前下载这些图片，并将其缓存起来，以备将来使用。\n\n图片预加载可以使用原生JavaScript实现，也可以使用现成的JavaScript库，如`Preload.js、LazyLoad.js`等。这些库提供了方便的API和配置选项，可以灵活地控制预加载的行为和效果。\n\n实现图片预加载可以使用原生JavaScript或使用专门的JavaScript库。**下面分别介绍两种方式的实现方法**：\n\n1. 使用原生JavaScript实现图片预加载：\n\n```javascript\nfunction preloadImage(url) {\n return new Promise(function(resolve, reject) {\n var img = new Image();\n img.onload = resolve;\n img.onerror = reject;\n img.src = url;\n });\n}\n\n// 调用预加载函数\npreloadImage('image.jpg')\n .then(function() {\n console.log('图片加载成功');\n // 在此处可以执行加载成功后的操作，例如显示图片等\n })\n .catch(function() {\n console.error('图片加载失败');\n // 在此处可以执行加载失败后的操作，例如显示错误信息等\n });\n```\n\n在上述代码中，我们定义了一个`preloadImage`函数，它使用`Image`对象来加载图片资源。通过`onload`事件和`onerror`事件来监听图片加载完成和加载错误的情况，并使用Promise对象进行异步处理。\n\n2. 使用JavaScript库实现图片预加载：\n\n使用JavaScript库可以更简便地实现图片预加载，并提供更多的配置选项和功能。以下以Preload.js库为例进行说明：\n\n首先，在HTML文件中引入Preload.js库：\n\n```html\n\n```\n\n然后，在JavaScript代码中使用Preload.js库来进行图片预加载：\n\n```javascript\nvar preload = new createjs.LoadQueue();\npreload.on(\"complete\", handleComplete);\npreload.on(\"error\", handleError);\npreload.loadFile('image.jpg');\n\nfunction handleComplete() {\n console.log('图片加载成功');\n // 在此处可以执行加载成功后的操作，例如显示图片等\n}\n\nfunction handleError() {\n console.error('图片加载失败');\n // 在此处可以执行加载失败后的操作，例如显示错误信息等\n}\n```\n\n在上述代码中，我们首先创建一个`LoadQueue`对象，并使用`on`方法来监听加载完成和加载错误的事件。然后使用`loadFile`方法来指定要预加载的图片资源的URL。\n\n当图片加载完成时，`handleComplete`函数会被调用，我们可以在此处执行加载成功后的操作。当图片加载错误时，`handleError`函数会被调用，我们可以在此处执行加载失败后的操作。\n\n以上是两种常用的实现图片预加载的方法，根据具体需求和项目情况选择合适的方式来实现图片预加载。\n\n### 9. 响应式加载图片\n要在不同分辨率的设备上显示不同尺寸的图片，你可以使用`

这是红色的

这是红色的

Something went wrong.