我工作中用到的性能优化全面指南（2）-阿里云开发者社区

使用WebGL进行3D渲染

WebGL是一种用于进行3D渲染的Web标准，它提供了底层的图形API，并且能够利用GPU进行加速，非常适合于进行复杂的3D渲染。

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
// 设置清空颜色缓冲区的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);

使用Service Workers进行资源缓存

Service Workers可以让你控制网页的缓存策略，进一步减少HTTP请求，提升网页的加载速度。例如，你可以将一些不常变化的资源文件预先缓存起来。

// 注册一个service worker
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
  console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(error) {
  console.log('ServiceWorker registration failed: ', error);
});
// service-worker.js
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/style.css',
        '/script.js',
        // 更多资源...
      ]);
    })
  );
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

使用内容分发网络（CDN）

你可以将静态资源（如JavaScript、CSS、图片等）上传到CDN，这样用户可以从离他们最近的服务器下载资源，从而提高下载速度。

<!-- 从CDN加载jQuery库 -->
<script src="https://cdn.example.com/jquery.min.js"></script>

使用HTTP/2进行资源加载

HTTP/2支持头部压缩和多路复用，可以更高效地加载资源。如果你的服务器和用户的浏览器都支持HTTP/2，那么你可以使用它来提高性能。

// 假设我们有一个HTTP/2库
var client = new Http2Client('https://example.com');
client.get('/resource1');
client.get('/resource2');

使用Web Socket进行数据通信

如果你需要频繁地与服务器进行数据交换，可以使用Web Socket，它比HTTP有更低的开销。

var socket = new WebSocket('ws://example.com/socket');
socket.addEventListener('open', function() {
  socket.send('Hello, server');
});
socket.addEventListener('message', function(event) {
  console.log('Received message from server: ' + event.data);
});

使用Progressive Web Apps（PWA）技术

PWA可以让你的网站在离线时仍然可用，并且可以被添加到用户的主屏幕，提供类似于原生应用的体验。PWA需要使用Service Workers和Manifest等技术。

// 注册Service Worker
navigator.serviceWorker.register('/service-worker.js');
// 检测是否支持Manifest
if ('manifest' in document.createElement('link')) {
  var link = document.createElement('link');
  link.rel = 'manifest';
  link.href = '/manifest.json';
  document.head.appendChild(link);
}

使用WebRTC进行实时通信

WebRTC是一种提供实时通信（RTC）能力的技术，允许数据直接在浏览器之间传输，对于需要实时交互的应用，如视频聊天、实时游戏等，可以使用WebRTC来提高性能。

var pc = new RTCPeerConnection();
// 发送offer
pc.createOffer().then(function(offer) {
  return pc.setLocalDescription(offer);
}).then(function() {
  // 发送offer给其他浏览器...
});
// 收到answer
pc.setRemoteDescription(answer);

使用IndexedDB存储大量数据

如果你需要在客户端存储大量数据，可以使用IndexedDB。与localStorage相比，IndexedDB可以存储更大量的数据，并且支持事务和索引。

var db;
var request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  db = event.target.result;
  var store = db.createObjectStore('myStore', { keyPath: 'id' });
  store.createIndex('nameIndex', 'name');
};
request.onsuccess = function(event) {
  db = event.target.result;
};
request.onerror = function(event) {
  // 错误处理...
};

使用Web Push进行后台消息推送

Web Push允许服务器在后台向浏览器推送消息，即使网页已经关闭。这需要在Service Worker中使用Push API和Notification API。

// 请求推送通知的权限
Notification.requestPermission().then(function(permission) {
  if (permission === 'granted') {
    console.log('Push notification permission granted');
  }
});
// 订阅推送服务
navigator.serviceWorker.ready.then(function(registration) {
  registration.pushManager.subscribe({ userVisibleOnly: true }).then(function(subscription) {
    console.log('Push subscription: ', subscription);
  });
});
// 在Service Worker中接收和显示推送通知
self.addEventListener('push', function(event) {
  var data = event.data.json();
  self.registration.showNotification(data.title, data);
});

通过服务器端渲染（SSR）改善首次页面加载性能

服务器端渲染意味着在服务器上生成HTML，然后将其发送到客户端。这可以加快首次页面加载速度，因为用户可以直接看到渲染好的页面，而不必等待JavaScript下载并执行。这对于性能要求很高的应用来说，是一种有效的优化手段。

// 服务器端
app.get('/', function(req, res) {
  const html = ReactDOMServer.renderToString(<MyApp />);
  res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});

利用HTTP3/QUIC协议进行资源传输

HTTP3/QUIC协议是HTTP/2的后续版本，采用了全新的底层传输协议（即QUIC），以解决HTTP/2中存在的队头阻塞（Head-of-line Blocking）问题，从而进一步提高传输性能。如果你的服务器和用户的浏览器都支持HTTP3/QUIC，那么可以考虑使用它进行资源传输。

使用Service Worker与Background Sync实现离线体验

通过Service Worker，我们可以将网络请求与页面渲染解耦，从而实现离线体验。并且，结合Background Sync，我们可以在用户离线时提交表单或同步数据，并在用户重新联网时自动重试。

// 注册Service Worker
navigator.serviceWorker.register('/sw.js');
// 提交表单
fetch('/api/submit', {
  method: 'POST',
  body: new FormData(form)
}).catch(() => {
  // 如果请求失败，使用Background Sync重试
  navigator.serviceWorker.ready.then(reg => {
    return reg.sync.register('sync-submit');
  });
});
// 在Service Worker中监听sync事件
self.addEventListener('sync', event => {
  if (event.tag === 'sync-submit') {
    event.waitUntil(submitForm());
  }
});

使用PostMessage进行跨文档通信

如果你的应用涉及到多个窗口或者iframe，你可能需要在他们之间进行通信。使用postMessage方法可以进行跨文档通信，而不用担心同源策略的问题。

// 父窗口向子iframe发送消息
iframeElement.contentWindow.postMessage('Hello, child', 'https://child.example.com');
// 子iframe接收消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://parent.example.com') return;
  console.log('Received message: ' + event.data);
});

使用Intersection Observer进行懒加载

Intersection Observer API可以让你知道一个元素何时进入或离开视口，这对于实现图片或者其他资源的懒加载来说非常有用。

var images = document.querySelectorAll('img.lazy');
var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      var img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
images.forEach(img => {
  observer.observe(img);
});

利用OffscreenCanvas进行后台渲染

OffscreenCanvas API使得开发者可以在Web Worker线程中进行Canvas渲染，这可以提高渲染性能，尤其是在进行大量或者复杂的Canvas操作时。

var offscreen = new OffscreenCanvas(256, 256);
var ctx = offscreen.getContext('2d');
// 在后台线程中进行渲染...

利用Broadcast Channel进行跨标签页通信

Broadcast Channel API提供了一种在同源的不同浏览器上下文之间进行通信的方法，这对于需要在多个标签页之间同步数据的应用来说非常有用。

javascript

复制代码

var channel = new BroadcastChannel('my_channel');
// 发送消息
channel.postMessage('Hello, other tabs');
// 接收消息
channel.onmessage = function(event) {
  console.log('Received message: ' + event.data);
};

使用Web Cryptography API进行安全操作

Web Cryptography API 提供了一组底层的加密API，使得开发者可以在Web环境中进行安全的密码学操作，例如哈希、签名、加密、解密等。

window.crypto.subtle.digest('SHA-256', new TextEncoder().encode('Hello, world')).then(function(hash) {
  console.log(new Uint8Array(hash));
});

使用Blob对象进行大型数据操作

Blob对象代表了一段二进制数据，可以用来处理大量的数据，比如文件。它们可以直接从服务端获取，或者由客户端生成，这对于处理大型数据或者二进制数据很有用。

javascript

复制代码

var fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    var contents = event.target.result;
    processContents(contents);
  };
  reader.readAsArrayBuffer(file);
});

使用Page Visibility API进行页面可见性调整

Page Visibility API提供了一种方式来判断页面是否对用户可见。利用这个API，你可以在页面不可见时停止或减慢某些操作，例如动画或视频，从而节省CPU和电池使用。

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    pauseAnimation();
  } else {
    resumeAnimation();
  }
});

使用WeakMap和WeakSet进行高效的内存管理

在处理大量数据时，如果不小心可能会产生内存泄漏。WeakMap和WeakSet可以用来保存对对象的引用，而不会阻止这些对象被垃圾回收。这在一些特定的应用场景中，例如缓存、记录对象状态等，可能非常有用。

let cache = new WeakMap();
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* 对obj进行一些复杂的处理... */
    cache.set(obj, result);
  }
  return cache.get(obj);
}

使用requestAnimationFrame进行动画处理

requestAnimationFrame能够让浏览器在下一次重绘之前调用指定的函数进行更新动画，这样可以保证动画的流畅性，并且减少CPU的使用。

function animate() {
 // 更新动画...
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

使用CSS3动画替代JavaScript动画

CSS3动画不仅可以提供更好的性能，还可以在主线程之外运行，从而避免阻塞UI。因此，我们应该尽可能地使用CSS3动画替代JavaScript动画。

css

复制代码

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.myDiv {
  animation: fadeIn 2s ease
-in-out;
}

避免回流和重绘

回流和重绘是浏览器渲染过程中的两个步骤，它们对性能影响很大。优化的关键在于尽可能减少触发回流和重绘的操作，例如一次性修改样式，避免布局抖动等。

javascript

复制代码

var el = document.getElementById('my-el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
// 尽量避免上面的写法，以下为优化后的写法
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

使用CSS3硬件加速提高渲染性能

使用 CSS3 的 transform 属性做动画效果，可以触发硬件加速，从而提高渲染性能。

javascript

复制代码

element.style.transform = 'translate3d(0, 0, 0)';

避免使用同步布局

同步布局（或强制布局）是指浏览器强制在 DOM 修改和计算样式之后，立即进行布局。这会中断浏览器的优化过程，导致性能下降。一般出现在连续的样式修改和读取操作之间。

let div = document.querySelector('div');
// 写样式
div.style.width = '100px';
// 读样式，导致同步布局
let width = div.offsetWidth;
// 再写样式
div.style.height = width + 'px';  // 强制布局

为避免这个问题，可以将读操作移到所有写操作之后：

let div = document.querySelector('div');
// 写样式
div.style.width = '100px';
// 写样式
div.style.height = '100px';
// 读样式
let width = div.offsetWidth;

使用ArrayBuffer处理二进制数据

ArrayBuffer 提供了一种处理二进制数据的高效方式，例如图像，声音等。

var buffer = new ArrayBuffer(16);
var int32View = new Int32Array(buffer);
for (var i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

利用ImageBitmap提高图像处理性能

ImageBitmap对象提供了一种在图像处理中避免内存拷贝的方法，可以提高图像处理的性能。

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  createImageBitmap(img).then(function(imageBitmap) {
    // 在这里使用 imageBitmap
  });
};

标签：

JavaScript

我工作中用到的性能优化全面指南（2）

使用WebGL进行3D渲染

使用Service Workers进行资源缓存

使用内容分发网络（CDN）

使用HTTP/2进行资源加载

使用Web Socket进行数据通信

使用Progressive Web Apps（PWA）技术

使用WebRTC进行实时通信

使用IndexedDB存储大量数据

使用Web Push进行后台消息推送

通过服务器端渲染（SSR）改善首次页面加载性能

利用HTTP3/QUIC协议进行资源传输

使用Service Worker与Background Sync实现离线体验

使用PostMessage进行跨文档通信

使用Intersection Observer进行懒加载

利用OffscreenCanvas进行后台渲染

利用Broadcast Channel进行跨标签页通信

使用Web Cryptography API进行安全操作

使用Blob对象进行大型数据操作

使用Page Visibility API进行页面可见性调整

使用WeakMap和WeakSet进行高效的内存管理

使用requestAnimationFrame进行动画处理

使用CSS3动画替代JavaScript动画

避免回流和重绘

使用CSS3硬件加速提高渲染性能

避免使用同步布局

使用ArrayBuffer处理二进制数据

利用ImageBitmap提高图像处理性能

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

我工作中用到的性能优化全面指南（2）

使用WebGL进行3D渲染

使用Service Workers进行资源缓存

使用内容分发网络（CDN）

使用HTTP/2进行资源加载

使用Web Socket进行数据通信

使用Progressive Web Apps（PWA）技术

使用WebRTC进行实时通信

使用IndexedDB存储大量数据

使用Web Push进行后台消息推送

通过服务器端渲染（SSR）改善首次页面加载性能

利用HTTP3/QUIC协议进行资源传输

使用Service Worker与Background Sync实现离线体验

使用PostMessage进行跨文档通信

使用Intersection Observer进行懒加载

利用OffscreenCanvas进行后台渲染

利用Broadcast Channel进行跨标签页通信

使用Web Cryptography API进行安全操作

使用Blob对象进行大型数据操作

使用Page Visibility API进行页面可见性调整

使用WeakMap和WeakSet进行高效的内存管理

使用requestAnimationFrame进行动画处理

使用CSS3动画替代JavaScript动画

避免回流和重绘

使用CSS3硬件加速提高渲染性能

避免使用同步布局

使用ArrayBuffer处理二进制数据

利用ImageBitmap提高图像处理性能

热门文章

最新文章

相关课程

相关电子书

相关实验场景