首页 > > 笔记大全

笔记大全

页面性能优化的方法总结

更新时间：2023-12-06

一、什么是页面性能优化？页面性能优化就是通过减少页面加载时间、提高页面响应速度、提高用户访问体验等方面的优化来提升用户的满意度和提高站点的SEO权重，从而提升站点的竞争力。

一般来说，页面性能优化主要从以下三个方面进行：

1. 减少网络请求量

通过减少资源量、文件大小来降低页面加载时间，比如合并CSS,JS文件、制作CSS Sprite等方法，这样就能有效地减轻服务器压力和提高网站性能。

2. 加快资源加载速度

比如通过优化图片、使用CDN等方案来提高资源加载速度。可以使用图片压缩工具将图片的文件大小降低，从而加快图片的加载速度。同时，如果网站需要加载大量的静态资源文件，则可以考虑使用CDN进行静态资源的分布式加载。

3. 缩减代码体积并提高代码编写效率

  
    // ES6
    const arr = [1, 2, 3, 4]
    const sum = arr.reduce((pre, cur) => pre+=cur, 0)   // 多个数字之间的求和

    // ES5
    var arr = [1, 2, 3, 4]
    var sum = arr.reduce(function(pre, cur) {
        return pre += cur
    }, 0)

缩减代码体积可以通过压缩JS、CSS文件、去除空格等方式来降低代码大小，达到快速优化页面加载时间的目的。同时，提升代码编写效率可以通过使用高效的编码工具、遵守代码规范等方式来提高开发效率。

二、如何优化页面性能？

1. 压缩页面资源

  
   // HTML (需安装插件)
   <!doctype html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>test</title>
           <script src="test.js"></script>
           <style>
               body {
                   font-size: 14px;
               }
           </style>
           <link rel="stylesheet" href="test.css">
       </head>
       <body>
           hello world
       </body>
   </html>

   // CSS (需安装插件)
   body {
      width: 1000px;
      height: 1000px;
      background-color: #ddd;
   }

   // JS (需安装插件)
   function fn() {
      console.log('test')
   }

压缩资源可以使用 webpack、gulp等构建工具进行优化，优化的方式有压缩HTML、CSS、JS文件、图片优化、SVG优化、字体优化、雪碧图等。使用压缩工具进行压缩资源可以使得页面资源减少，从而提高页面加载时间。

2. CSS优化

  
    .box-1 {
      width: 50px;
      height: 50px;
      margin: 10px 20px;
      background: #ddd;
    }

    .box-2 {
      width: 50px;
      height: 50px;
      margin: 10px 20px;
      background: #eee;
    }

    .box-3 {
      width: 50px;
      height: 50px;
      margin: 10px 20px;
      background: #fff;
    }

通过避免在CSS中使用表达式、继承或者复杂的CSS选择器，可以提高CSS文件解析速度，从而提升页面性能。同时，为CSS指定ID和类选择器，可以提高CSS选择器的优先级，避免使用全局选择器等，也可以提高CSS性能。

3. JavaScript代码优化

  
    // 慢代码
    for (var i = 0; i < 1000000; i++) {
        document.getElementById('box').innerHTML += i;
    }

    // 快代码
    var tempStr = '';
    for (var i = 0; i < 1000000; i++) {
        tempStr += i;
    }
    document.getElementById('box').innerHTML = tempStr;

JavaScript代码优化可以通过避免调用eval()方法、避免在代码中使用with、for循环等来提升JS代码性能。同时，避免使用过多的全局变量等编程方式，可以提高JS代码性能。当需要频繁操作DOM时，可以使用innerHTML等方式来操作，从而避免使用频繁重绘DOM节点的方式。

4. 图片优化

  
   // 图片压缩
   

   // 使用WebP格式
   
       
       
   

   // 使用不同尺寸的图片

图片优化可以通过使用图片压缩技术、使用WebP格式图片、使用不同尺寸的图片等方式来优化页面性能。通过图片压缩技术可以有效降低图片的文件大小，从而提高图片加载速度。使用WebP格式图片能够减少图片大小并且提升图片显示效果。同时，制作一些不同尺寸的图片，能够在不同设备上适配更好的图片，优化用户体验。

总之，页面性能优化是一个需要不断优化的过程，需要逐步完善和提高，针对不同的页面和项目需求，还需要更加灵活多变的优化方案。只有持续关注和深入理解页面性能优化方案，才能提高明显的用户访问体验。

c语言编程笔录