一 网络加载类
- 减少 HTTP 资源请求次数，建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。
- 将 CSS 或 JavaScript 放到外部文件中，避免使用<style>或 <script>标签直接引入，外部资源可以有效利用浏览器的静态资源缓存。
- 避免页面中空的 href 和 src，当 <link>标签的 href 属性为空，或 <script><img> <iframe>标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。
- 为 HTML 内容设置 Cache-Control 或 Expires 可以将 HTML 内容缓存起来，避免频繁向服务器端发送请求
例：
<meta http-equiv=“Cache-Control” content=“max-age=7200”>
<meta http-equiv=“Expires” content=“Mon,20Jul201623:00:00GMT”> - 页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要 200 毫秒不等的时间开销（无缓存），为了保证用户尽快看到页面内容，要尽量避免页面重定向。
- 使用静态资源分域存放来增加下载并行数，浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以利用多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数，缩短页面资源加载的时间。通常根据多个域名来分别存储 JavaScript、CSS 和图片文件。
- 使用静态资源 CDN 来存储文件，如果条件允许，可以利用 CDN 网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间。
- 使用可缓存的 AJAX，对于返回内容相同的请求，没必要每次都直接从服务端拉取，合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。
二页面渲染类
- 把 CSS 资源引用放到 HTML 文件顶部,一般推荐将所有 CSS 资源尽早指定在 HTML 文档 中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
- JavaScript 资源引用放到 HTML 文件底部，JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
- 尽量预先设定图片等大小,在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排。
- 不要在 HTML 中直接缩放图片，在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
- 减少 DOM 元素数量和深度。