首屏优化如何做

最新推荐文章于 2024-09-24 14:56:59 发布

xiongxinyu10

最新推荐文章于 2024-09-24 14:56:59 发布

阅读量585

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_66706006/article/details/140131012

版权

1. 图片优化

1. 使用适当的图片格式（如JPEG、PNG、WebP）和压缩算法，对图片进行优化，减小图片文件大小，提高加载速度。

2. 使用精灵图

使用雪碧图可以把多个图片整合到一张图片中，减少HTTP请求次数。但是当整合图片比较大时，一次加载会比较慢，加载失败会导致多个位置的图片无法正常显示。

3. 图片懒加载

同时，可以使用懒加载技术，延迟加载非首屏可见区域的图片，减少首屏的加载时间。

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      height: 200px;
      width: 200px;
      overflow: hidden;
      background-color: #eee;
    }
 
    img {
      display: block;
      height: auto;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img data-src="image.jpg" alt="Image" />
  </div>
</body>
<script>
  document.addEventListener("DOMContentLoaded", function() {
  // 首先获取所有带有 data-src 属性的图片元素，并将它们保存在一个数组中
  var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
  // 如果浏览器支持 IntersectionObserver API，
  if ("IntersectionObserver" in window) {
    // 创建一个 IntersectionObserver 对象，并为每个图片元素添加观察器。
    var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        // 当图片元素进入视口时，
        if (entry.isIntersecting) {
          var lazyImage = entry.target;
          // 观察器会将其 data-src 属性值设置为 src 属性值
          lazyImage.src = lazyImage.dataset.src;
          // 并移除 data-src 属性
          lazyImage.removeAttribute("data-src");
          // 最后，观察器会取消对该图片元素的观察
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 如果浏览器不支持 IntersectionObserver API，则会使用一个 lazyLoad 函数，
    var lazyLoad = function() {
      lazyImages.forEach(function(lazyImage) {
        // 在该函数中，会遍历所有带有 data-src 属性的图片元素，并检查它们是否在视口中可见
        // 该函数会在滚动、窗口大小调整或设备方向变化时被触发
        if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImage).display !== "none") {
          // 如果是，则将其 data-src 属性值设置为 src 属性值
          lazyImage.src = lazyImage.dataset.src;
          // 并移除 data-src 属性
          lazyImage.removeAttribute("data-src");
          // 从数组中删除已经加载的图片元素
          lazyImages = lazyImages.filter(function(image) {
            return image !== lazyImage;
          });
          // 并检查数组是否为空。如果为空，则取消事件监听
          if (lazyImages.length === 0) {
            document.removeEventListener("scroll", lazyLoad);
            window.removeEventListener("resize", lazyLoad);
            window.removeEventListener("orientationchange", lazyLoad);
          }
        }
      });
    };
 
    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
  }
});
 
</script>
</html>

2. 开启Gzip压缩（前端配置gzip压缩，并且服务端使用nginx开启gzip）

在index.html文件中，我们引入压缩和合并后的静态资源文件，可以减少网络请求次数和文件大小，提高页面加载速度。

3. 使用路由懒加载

路由懒加载是一种按需要加载的方式，即需要时再加载。优化方案是将直接导入js变成按需要导入js。app.js中的页面拆分成单独的js文件，按需加载，加速app.js文件的下载速度从而减少首页加载时间。

/* 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效 */
//写法1：
{
	path: "/base/user",
	name: "user",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/user/User')), 'User'),
	meta: {
		breadcrumb: ["基本信息", "用户管理"]
	}
},
    
//写法2：
{
    path: "/safety",
    component: Layout,
    redirect: "/safety",
    children: [
      {
        path: "/safety",
        component: (resolve) => require(["@/views/safety/index"], resolve),
        name: "Safety",
        meta: { title: "安全管理", icon: "workplace", affix: true },
      },
    ],
},
    
//写法3：将 import UserDetails from './views/UserDetails.vue' 替换成
const UserDetails = () => import('./views/UserDetails.vue')
const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

4. 静态资源放在CDN上

使用内容分发网络（CDN）来加速静态资源的传输，将资源缓存在离用户较近的服务器上，减少网络延迟。

5. 延迟加载非关键资源

将非关键资源（如广告、推荐内容等）的加载延迟到首屏渲染完成之后，以提高首屏展示速度。

6. 使用服务器端渲染

SSR（服务器端渲染）能够提高首屏渲染的原因有以下几点：

1. 减少客户端渲染时间：在传统的客户端渲染中，浏览器需要下载HTML文件，然后执行JavaScript代码来生成并填充页面内容。而在SSR中，服务器会在响应请求时直接生成完整的HTML页面，并包含所需的数据。这样，浏览器只需要下载已经渲染好的HTML，减少了客户端渲染的时间。

2. 提前获取数据：在客户端渲染中，通常需要通过异步请求获取数据，然后再进行页面渲染。而在SSR中，服务器会在渲染过程中获取所需的数据，并将数据直接注入到HTML中。这样可以避免客户端请求数据的延迟，加快了首屏渲染的速度。

3. 更好的SEO：由于搜索引擎爬虫更容易解析和索引静态HTML页面，使用SSR可以提供更好的SEO效果。因为在SSR中，服务器返回的是已经渲染好的HTML页面，而不是由JavaScript生成的动态内容。这使得搜索引擎可以更好地理解和索引网页内容，提高了网站在搜索结果中的可见性。

4. 更好的用户体验：由于SSR能够更快地呈现出首屏内容，用户可以更快地看到页面的基本结构和内容，减少了等待时间，提升了用户体验。

7. JavaScript优化

将JavaScript代码放在页面底部，以减少对页面渲染的阻塞。另外，可以通过代码压缩、去除不必要的注释和空格等方式来减小JavaScript文件的大小。这样做可以让浏览器在加载完页面主要内容后再加载JavaScript文件，从而减少对页面渲染的阻塞。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript代码放在页面底部示例</title>
</head>
<body>
  <!-- 页面内容 -->
  <script src="script.js"></script>
</body>
</html>