当前位置：首页 > news >正文

前端性能基础测试研究

news 来源：原创 2024/5/20 14:52:26

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

网页加载速度测试

可以使用在线工具，如 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) {  // IEscript.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 Workernavigator.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);}));});