前端性能基础测试研究

最新推荐文章于 2025-04-06 16:08:17 发布

知青先生

最新推荐文章于 2025-04-06 16:08:17 发布

阅读量1.2k

点赞数 18

分类专栏：前端文章标签：前端

浩明

本文链接：https://blog.youkuaiyun.com/YHM_MM/article/details/118691695

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用在线工具测试和优化网页加载速度，包括资源加载效率、页面渲染速度的评估，以及前端性能优化技巧，如懒加载、预加载、缓存策略（包括HTTP缓存、协商缓存、ServiceWorker缓存和IndexedDB）的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

站长之家：
爱资料在线工具，应用网站在线测试

网页加载速度测试

可以使用在线工具，如 Google PageSpeed Insights、Pingdom、WebPageTest 等，来测试网页的加载速度，并给出优化建议。此外，还可以使用浏览器开发者工具（如 Chrome DevTools）来查看页面加载过程中的详细信息，如请求和响应头、DNS解析时间、TCP连接时间、内容加载时间等。

资源加载效率测试

可以使用 Chrome DevTools 中的Audits面板进行资源加载效率测试。该面板可以分析页面加载时的资源请求和响应情况，以及资源加载对页面性能的影响。此外，还可以使用 Lighthouse 等自动化测试工具来对资源加载效率进行评估和优化建议。

页面渲染速度测试

可以使用 Chrome DevTools 中的Timeline面板来记录页面渲染过程中的事件和性能指标，如重绘、重排、JavaScript执行时间等。此外，还可以使用Perfume.js等性能监控库来收集和报告页面渲染速度等指标。

前端性能优化

基于测试结果和分析，可以采取一些优化措施来提升前端性能

减少HTTP请求和响应的大小，压缩图片、CSS和JavaScript文件等。
使用CDN加速资源加载。
优化JavaScript代码，减少不必要的DOM操作和计算。
使用懒加载和预加载技术，按需加载资源。
使用缓存策略，如强缓存和协商缓存等。
使用Web Workers进行后台计算，减轻主线程的负担等。

懒加载

懒加载也称为延迟加载，是指只有当用户滚动到某个元素可见区域时，才开始加载该元素所依赖的资源。这主要应用于长页面中的图片或其他媒体内容，以减少首次加载网页所需的带宽和时间，提高用户体验.
原理：通过监听滚动事件或视口大小变化事件，判断资源是否位于可视范围内，如果是，则触发资源的加载请求

 window.addEventListener('scroll', function() {
    var images = document.querySelectorAll('.lazy'); // 找到需要懒加载的图片
    for (var i = 0; i < images.length; i++) {
      if (isInViewport(images[i])) { // 自定义函数检查图片是否进入可视区
        images[i].src = images[i].dataset.src; // 设置实际图片地址
      }
    }
  });

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

预加载

预加载则是在页面初始化阶段或用户浏览过程中，提前加载预期用户可能需要访问的资源，确保当用户真正请求这些资源时，它们已经存在于浏览器缓存中，可以立即渲染出来.
原理：通常通过创建新的Image对象或使用HTML 标签来发起预加载请求，而不立即插入DOM中

 // 使用Image对象进行预加载
  var img = new Image();
  img.src = 'path/to/large-image.jpg'; // 预加载大图

  // 或者使用HTML链接标签预加载CSS、字体或JavaScript文件
  // 在<head>部分添加以下代码
  <link rel="preload" as="image" href="path/to/large-image.jpg">
  <link rel="preload" as="style" href="styles.css">
  <link rel="preload" as="script" href="scripts.js">

延迟加载

现代浏览器支持原生的模块系统（ES6 Modules），可以利用import语句异步加载模块

// 当需要时动态导入模块
async function importMyModule() {
    const myModule = await import('./myModule.js');
    // 使用加载后的模块
    myModule.default.someFunction();
}

// 调用函数以触发模块加载
importMyModule().catch(error => console.error(error));

动态加载

最基础的按需加载方式是动态创建并插入

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    if (typeof callback !== 'undefined') {
        // 确保兼容性，为script添加onload事件监听器
        if (script.readyState) {  // IE
            script.onreadystatechange = function () {
                if (script.readyState === 'loaded' || script.readyState === 'complete') {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  // 其它浏览器
            script.onload = function() {
                callback();
            };
        }
    }
    document.head.appendChild(script);
}

// 使用示例：
loadScript('path/to/script.js', function() {
    console.log('Script loaded successfully.');
});

缓存策略

主要用于提升应用性能，减少不必要的网络请求，并且通常在浏览器环境中使用

HTTP 缓存策略

强缓存（Cache-Control & Expires):服务器通过响应头告知浏览器资源的有效期，浏览器在有效期内直接从本地缓存中获取资源，不发起网络请求。
1、Cache-Control 字段可以设置 max-age、no-cache、no-store 等指令控制缓存行为。
2、Expires 是一个绝对时间戳，表示资源过期时间。

协商缓存（Last-Modified / If-Modified-Since 与 ETag / If-None-Match）
当强缓存失效时，浏览器会向服务器发送一个条件请求，包含上次获取资源时服务器返回的相关头部信息（如 Last-Modified 或 ETag），服务器根据这些信息判断资源是否已更新。如果没有更新，则返回 304 Not Modified，浏览器使用本地缓存；如果资源已更新，则返回新内容和新的头部信息。

浏览器存储 API 缓存

localStorage：用于长期存储客户端数据，即使页面关闭或浏览器重启后，数据仍然存在，直到手动清除或者达到存储限制。

  localStorage.setItem('key', 'value');
     var value = localStorage.getItem('key');

sessionStorage：类似于 localStorage，但仅限于当前会话，当浏览器窗口或标签页关闭时，存储的数据将被清除。

  sessionStorage.setItem('key', 'value');
     var value = sessionStorage.getItem('key');

IndexedDB客户端数据库

一个更复杂但功能强大的客户端数据库，允许存储结构化数据，适合大量数据持久化存储。

打开数据库（Open a Database）
let request = indexedDB.open("myDatabase", 1); // 第一个参数是数据库名称，第二个参数是版本号

request.onerror = function(event) {
    console.error("Error opening IndexedDB database:", event.target.error);
};

request.onsuccess = function(event) {
    let db = event.target.result; // 成功打开后，可以通过event.target.result访问数据库对象
    console.log("IndexedDB database opened successfully.");
    
    // 可以在此处执行数据库操作
};

request.onupgradeneeded = function(event) { // 当需要升级数据库时触发
    let db = event.target.result;
    if (!db.objectStoreNames.contains("myObjectStore")) { // 如果不存在某个object store，则创建它
        let objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" }); // 设置主键路径
        // 可以添加索引（index）：
        objectStore.createIndex("nameIndex", "name", { unique: false });
    }
};

插入数据（Add Data）
let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");

let newItem = {
    id: 1,
    name: "John Doe",
    email: "john.doe@example.com"
};

let addRequest = objectStore.add(newItem);

addRequest.onsuccess = function(event) {
    console.log("Data added to the object store:", event.target.result);
};

addRequest.onerror = function(event) {
    console.error("Error adding data:", event.target.error);
};

查询数据（Read Data）
let transaction = db.transaction(["myObjectStore"], "readonly");
let objectStore = transaction.objectStore("myObjectStore");

let getRequest = objectStore.get(1); // 根据ID获取记录

getRequest.onsuccess = function(event) {
    let result = event.target.result;
    if (result !== undefined) {
        console.log("Retrieved data:", result);
    } else {
        console.log("No data found for the given ID.");
    }
};

getRequest.onerror = function(event) {
    console.error("Error reading data:", event.target.error);
};
更新数据（Update Data）

let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");

// 获取要更新的数据项
let getAndUpdateRequest = objectStore.get(1);

getAndUpdateRequest.onsuccess = function(event) {
    let recordToUpdate = event.target.result;

    if (recordToUpdate) {
        recordToUpdate.email = "new.email@example.com";

        let updateRequest = objectStore.put(recordToUpdate);

        updateRequest.onsuccess = function() {
            console.log("Data updated successfully.");
        };

        updateRequest.onerror = function(event) {
            console.error("Error updating data:", event.target.error);
        };
    }
};

 删除数据（Delete Data）
let transaction = db.transaction(["myObjectStore"], "readwrite");
let objectStore = transaction.objectStore("myObjectStore");

let deleteRequest = objectStore.delete(1); // 根据ID删除记录

deleteRequest.onsuccess = function() {
    console.log("Record deleted successfully.");
};

deleteRequest.onerror = function(event) {
    console.error("Error deleting data:", event.target.error);
};

Service Worker 缓存

     // 注册 Service Worker
     navigator.serviceWorker.register('sw.js');

     // 在 Service Worker 中使用 Cache API 缓存资源
     self.addEventListener('install', (event) => {
       event.waitUntil(
         caches.open('my-cache-v1').then((cache) => {
           return cache.addAll([
             '/index.html',
             '/styles.css',
             '/script.js',
             // 其他需要缓存的资源路径
           ]);
         })
       );
     });

     // 拦截并处理网络请求
     self.addEventListener('fetch', (event) => {
       event.respondWith(
         caches.match(event.request).then((response) => {
           return response || fetch(event.request);
         })
       );
     });