知识点

cv使我快乐
100 阅读12分钟

有哪些方法可以优化图片的加载

  1. 压缩图片：使用图片压缩工具将图片文件压缩到更小的尺寸。这可以通过减少图片质量、压缩算法等方式来实现。
  2. 使用适当的图片格式：对于不同类型的图片，应该使用不同的格式来进行优化。比如说，JPEG 格式适合用于图片、PNG 格式适合用于图标或者简单的图形。
  3. 图片懒加载：将页面中的图片延迟加载，即当用户滚动到某个位置时，再加载该位置的图片，以减少页面首次加载时间。
  4. 基于浏览器的缓存：使用浏览器缓存来提高页面加载速度。浏览器会将页面中的图片、脚本等文件缓存起来，下次访问时不需要重新下载，从而加快页面加载速度。
  5. 使用 CDN 加速：将图片等静态资源上传至 CDN（内容分发网络）上，使用户可以从最近的节点获取这些资源，从而减少延迟时间，提高页面加载速度。
  6. 使用 WebP 图片格式：WebP 是一种现代的图片格式，与 JPEG 和 PNG 相比可以提供更小的文件尺寸和更好的质量，同时也支持透明度和动画等特性。
  7. 去除图片元数据：图片文件中可能包含一些元数据，比如拍摄日期、摄影师、地点等信息，这些信息对于网页显示来说是无用的，可以通过工具去除它们，从而减小图片文件尺寸。
  8. 使用 CSS Sprites：CSS Sprites 是一种将多个图片合并成一张图片，并通过 CSS 属性来控制显示的技术。这可以减少 HTTP 请求次数，从而提高页面加载速度。
  9. 缩小图片尺寸：将大图片缩小到实际需要的尺寸，以减少文件尺寸和加载时间。
  10. 使用响应式图片：使用 HTML5 中的 picture 标签和 source 标签来根据不同设备屏幕大小加载不同大小的图片，从而提高页面加载速度。

描述一下cookie、sessionStorage、localStorage区别

这三个都是在Web浏览器中用于存储数据的客户端存储技术，但它们有一些关键的区别：

  1. Cookie

    1. 存储大小：每个cookie最大可存储4KB的数据。
    2. 生命周期：cookie有过期时间，在过期时间之前有效，也可以设置为浏览器会话级别，即浏览器关闭时cookie失效。
    3. 存储位置：cookie存储在浏览器中，对于相同域名下的请求，浏览器会自动将cookie发送到服务器端，因此可以在服务器端访问到cookie。
    4. 安全性：cookie的内容可以被客户端和服务器端访问和修改，因此不适合存储敏感数据，如密码等。
    5. 用途：常用于记录用户登录状态、购物车等。

  2. sessionStorage

    1. 存储大小：sessionStorage每个域名存储上限为5~10MB。
    2. 生命周期：sessionStorage存储在浏览器的内存中，只在当前会话中有效，浏览器关闭时数据被清除。
    3. 存储位置：数据仅存储在浏览器中，不会被发送到服务器端。
    4. 安全性：sessionStorage的内容只能被同源页面访问和修改，因此相对于cookie更加安全，但仍然不适合存储敏感数据。
    5. 用途：常用于存储临时数据、页面间数据传递等。

  3. localStorage

    1. 存储大小：localStorage每个域名存储上限为5~10MB。
    2. 生命周期：localStorage存储在浏览器中，除非被主动清除，否则数据一直存在，即使浏览器关闭。
    3. 存储位置：数据仅存储在浏览器中，不会被发送到服务器端。
    4. 安全性：localStorage的内容只能被同源页面访问和修改，因此相对于cookie更加安全，但仍然不适合存储敏感数据。
    5. 用途：常用于存储持久化数据，如用户个人设置、主题等。

什么是CSS hack？ie6、ie7的hack分别是什么？

CSS hack 是指在 CSS 中使用特殊的语法和规则，以便在不同的浏览器和版本之间产生不同的效果。这种技术通常被称为浏览器兼容性问题解决方案。

在过去，由于不同浏览器对CSS标准的支持程度不同，开发者需要使用CSS hack来解决一些问题，尤其是在早期的IE版本中，因为它们并没有完全遵守标准。

下面是一些针对 IE6 和 IE7 的常见 CSS hack：

对于 IE6：

  1. _ 前缀：在某些 CSS 属性前添加 _ 前缀可以使它们只在 IE6 中生效。

例如：

*background-color: red; /* Applies only to IE6 and below */
  1. * 前缀：在某些 CSS 属性前添加 * 前缀可以使它们只在 IE6 中生效。

例如：

*padding-left: 10px; /* Applies only to IE6 and below */

对于 IE7：

  1. *+html 选择器：可以用 *+html 选择器来针对 IE7 进行特殊样式处理。

例如：

*+html .my-class { background-color: red; } /* Applies only to IE7 */

flex布局常用属性有哪些？

Flex布局是一种用于设计网页布局的CSS3属性，其目的是更加简单、灵活地实现各种不同的布局需求。以下是Flex布局中常用的一些属性：

  1. display：设置容器的显示属性为flex。
  2. flex-direction：设置主轴方向。有4个值可选：row（默认值）、row-reverse、column、column-reverse。
  3. justify-content：设置主轴上的对齐方式。有5个值可选：flex-start（默认值）、flex-end、center、space-between、space-around。
  4. align-items：设置交叉轴上的对齐方式。有5个值可选：flex-start、flex-end、center、baseline、stretch（默认值）。
  5. flex-wrap：设置是否允许换行。有3个值可选：nowrap（默认值）、wrap、wrap-reverse。
  6. align-content：设置多根轴线的对齐方式（当有多行时）。有6个值可选：flex-start、flex-end、center、space-between、space-around、stretch（默认值）。
  7. flex-grow：设置项目的放大比例。默认值为0，即不放大。
  8. flex-shrink：设置项目的缩小比例。默认值为1，即空间不足时自动缩小。
  9. flex-basis：设置项目的初始大小。默认值为auto，即由内容决定。
  10. flex：设置项目的缩放比例、缩小比例和初始大小。该属性是flex-grow、flex-shrink和flex-basis的简写形式。

以上是Flex布局中常用的一些属性，它们可以帮助我们轻松地实现各种不同的布局需求。

Regenerate response

强制缓存和协商缓存有什么区别？

强制缓存和协商缓存是浏览器缓存策略中的两种主要方式。

强制缓存 是指浏览器在第一次请求资源时，将资源的响应头中的 Cache-Control 或 Expires 字段设置为一定时间内不需要再次请求该资源，而是直接从本地缓存中读取并使用该资源。在缓存时间内，无论资源是否已经发生了变化，浏览器都会从本地缓存中读取该资源。因此，如果资源发生了变化但缓存时间还未过期，用户仍然会使用旧版本的资源。

协商缓存 则是指浏览器在第一次请求资源时，会先与服务器确认该资源是否有更新，如果没有更新，则使用本地缓存，否则请求新的资源。协商缓存需要借助服务器的验证机制（例如 Last-Modified 和 ETag 等）来判断资源是否有更新。如果资源的验证信息与服务器上保存的信息相同，则表示该资源没有更新，浏览器直接使用本地缓存；否则，浏览器会请求新的资源。

相比于强制缓存，协商缓存可以更加精确地控制缓存的更新，减少网络传输和服务器负担。但是，在使用协商缓存时，每次请求都需要与服务器进行通信，增加了请求时间。因此，对于需要频繁更新的资源，应该使用较短的缓存时间，而对于不经常更新的资源，则可以使用较长的缓存时间。

如何实现图片的懒加载？

懒加载（Lazy Loading）是一种优化网站性能的技术，它可以使网站的加载速度更快。懒加载指的是延迟加载图片或其他资源，只有当用户滚动到页面中需要显示它们的位置时，才开始加载它们。

以下是一个基本的图片懒加载实现的示例代码：

HTML：

<img class="lazy" data-src="image.jpg" alt="Image" width="600" height="400">

CSS：

.lazy {
  opacity: 0; /* 初始时图片不可见 */
  transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
  opacity: 1; /* 图片加载后可见 */
}

JavaScript：

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');

        img.setAttribute('src', src);
        img.classList.add('loaded');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

解释：

  1. 首先，我们使用 querySelectorAll 方法获取到所有的懒加载图片。
  2. 然后，我们定义了一个 lazyLoad 函数，它接收一个目标元素作为参数，并创建了一个 IntersectionObserver 对象。IntersectionObserver 可以监听元素的可见性，当目标元素进入视口时，就会触发回调函数。
  3. 在回调函数中，我们检查目标元素是否可见，如果可见，就获取 data-src 属性中的图片地址，并将它设置为 src 属性的值，然后给图片添加一个 loaded 类，最后调用 disconnect 方法断开观察器的连接。
  4. 最后，我们对每个懒加载图片都调用 lazyLoad 函数进行处理。

注意：以上代码仅为示例，实际情况可能需要进行适当的修改。

IntersectionObserver 对象是什么？

IntersectionObserver 是一种现代浏览器提供的 JavaScript API，用于监测一个目标元素与其祖先元素或视口之间的交叉状态。它可以实现很多有用的功能，比如实现图片懒加载、实现滚动时元素动画效果、实现响应式布局等等。

IntersectionObserver 对象可以通过 new 关键字创建，它接受一个回调函数作为参数。每当目标元素进入或离开视口，或者与祖先元素的交叉状态发生变化时，回调函数都会被调用。回调函数会接收一个 IntersectionObserverEntry 对象的数组作为参数，每个 IntersectionObserverEntry 对象都代表一个目标元素与视口或祖先元素的交叉状态。

IntersectionObserver 对象还可以配置一些选项，比如 threshold（交叉比例阈值）、root（根元素）、rootMargin（根元素的边距），这些选项可以用来调整观察器的行为。

相对于传统的事件监听方式，IntersectionObserver 更加高效和灵活。它可以减少回调函数的调用次数，避免了大量的重复计算，从而提高了网站的性能。同时，它也可以处理动态生成的元素，以及在任何时候都可以监听元素的可见性，无需重新计算位置。

Regenerate response

css实现一行文字超出边界，显示省略号

您可以使用CSS中的 text-overflow 属性来实现这个效果。

具体步骤如下：

  1. 首先，将需要省略的文本放入一个容器元素中。例如，您可以使用一个 div 元素。
  2. 接下来，设置该元素的宽度，以限制文本在容器中的宽度。
  3. 然后，将 white-space 属性设置为 nowrap，这将强制文本不换行。
  4. 最后，设置 text-overflow 属性为 ellipsis，它将在文本溢出容器时显示省略号。

以下是一个示例代码：

.container {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出容器宽度的内容隐藏 */
  text-overflow: ellipsis; /* 超出容器宽度的内容用省略号表示 */
}

如何将 JS、CSS、图片等缓存到本地浏览器？

将静态资源缓存在本地浏览器可以提高网站的性能和加载速度，因为在后续的访问中可以避免重新下载这些资源。以下是几种将静态资源缓存到本地浏览器的方法：

  1. HTTP缓存：可以通过在响应头中设置Cache-Control和Expires字段来控制浏览器缓存静态资源的时间和方式。例如，设置Cache-Control: max-age=3600表示浏览器可以在3600秒内缓存该资源。
  2. Service Worker：Service Worker是一种在浏览器后台运行的脚本，可以拦截网络请求并返回缓存的响应。使用Service Worker可以更加灵活地控制缓存策略，并可以离线缓存网页内容。
  3. localStorage：可以使用浏览器提供的localStorage来存储一些较小的静态资源，例如图标和小图片。localStorage是浏览器提供的一种简单的键值对存储方式，可以在浏览器关闭后依然保持。
  4. IndexedDB：IndexedDB是一种浏览器提供的高级客户端存储技术，可以用来存储较大的静态资源，例如音频、视频等。IndexedDB提供了一种类似于关系型数据库的API，可以进行查询和事务控制。

以上方法可以根据具体的场景和需求进行选择和组合使用。需要注意的是，缓存静态资源可能会导致用户在访问过期的资源时看到旧的内容，因此需要谨慎处理缓存策略。

如何何设置Cache-Control和Expires字段

在Node.js中设置HTTP响应头中的Cache-Control和Expires字段，可以使用Node.js内置的HTTP模块。

下面是一个示例代码，演示如何在Node.js中设置Cache-Control和Expires字段：

const http = require('http');
const server = http.createServer((req, res) => {
  const html = '<html><body><h1>Hello World!</h1></body></html>';
  
  // 设置Cache-Control和Expires响应头
  res.setHeader('Cache-Control', 'max-age=3600');
  res.setHeader('Expires', new Date(Date.now() + 3600 * 1000).toUTCString());

  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(html);
});

server.listen(3000, () => {
  console.log('Server listening on http://localhost:3000');
});
avatar
文章
阅读
粉丝