1. 资源合并2. 缓存3. CDN CDN库 4. 使用 SSR 后端渲染5. 懒加载6. 缓存 DOM 查询7. 合并 DOM 插入8. 事件节流9. 尽早操作

1. 资源合并

2. 缓存

3. CDN

使用 CDN 加载常用资源 减轻服务器压力，速度快，并且可以缓存

CDN库

百度静态资源公共库 http://cdn.code.baidu.com/cdnjs https://cdnjs.com/BootCDN https://www.bootcdn.cn <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> window.jQuery || document.write('<script src="js/jquery.js">')

4. 使用 SSR 后端渲染

5. 懒加载

<img id='img' src='min.png' lazy-src='max.png' /> var img = document.getElementById('img'); img.src = img.getAttribute('lazy-src');

6. 缓存 DOM 查询

// 为缓存 DOM 查询 var i; for(i = 0; i < document.getElementsByTagName('p').length; i++) { // code... } // 缓存了 DOM 查询 var pList = document.getElementByTagName('P') var i; for (i = 0; i < pList.length; i++) { // code... }

7. 合并 DOM 插入

var listNode = document.getElementById('list') // 插入 10 个 li 标签 var frag = document.createDocumentFragment(); var x, li; for(x = 0; x < 10; x++) { li = document.createElement('li'); li.innerHTML = 'List item' + x; frag.appendChild(li); } // 一次 DOM 插入 listNode.appendChild(frag)

8. 事件节流

var textarea = document.getElementById('text'); var timeoutId; textarea.addEventListener('keyup', function() { if(timeoutId) { clearTimeout(timeoutId) } timeoutd = setTimeout(function() { // 触发 change 事件 }, 500) })

9. 尽早操作

window.addEventListener('load', function() { // 页面的全部资源加载完成后才会执行，包括图片、视频等... }) document.addEventListener('DOMContentLoaded', function() { // DOM 渲染完即可执行，此时图片、视频还可能没有加载完 })