高性能HTML5笔记(一)

第一部分 引言

  1. 本书中讨论三种性能

    1. 客户端(即浏览器)性能
    2. 服务器端和网络性能
    3. 开发效率

第一章 概述

  1. HTML5 概念:不仅仅是指最新版本的 HTML 标记语言,还包含了很多被现代浏览器所支持的新技术,例如 CSS3、嵌入式音频/视频、Canvas、WebSocket、应用程序缓存、本地存储、索引数据库、文件API、地理位置等。
  2. 什么是高性能

    1. 页面加载时间
    2. 浏览器性能
    3. 网络性能
    4. 开发效率

第二部分 性能基础

第二章 开发原则

  1. 浏览器工作原理

    1. HTML 解析为一颗 DOM 树。
    2. DOM 树和 CSS 样式表结合起来构成渲染树(Firefox 中渲染树被称作框架树)。
    3. 根据渲染树,浏览器开始绘制。
  2. 改进性能

    1. 减少 HTML 中元素的数量
    2. 减少重绘(效果更明显)
  3. 动态改动 DOM 和 CSS 样式时有两点需要考虑

    1. 改动的元素在 DOM 树的深度,越深则改动就越独立,对其他节点影响越少,所以能改多深就改多深。
    2. 对 DOM 有多次操作,尽量合并到一次做完而不是分成一次一次地去做。
  4. CSS 放到 head 标签内(避免白屏),script 放到 body 标签的尾部(避免延迟页面元素的渲染)

  5. 使用特性检测,而不是浏览器版本号检测

第三章 性能准则

  1. 影响页面加载时间的因素(按强弱排序)

    • 减少 HTTP 请求
    • 使用 CDN 加速
    • 避免空的 src 或 href 属性值
    • 增加过期头
    • 启 GZIP 压缩
    • 把 CSS 放在头部
    • 把 JavaScript 放到尾部
    • 避免使用 CSS 表达式
    • 删除不使用的 CSS 语句
    • 对 JavaScript、CSS 进行代码压缩
    • 减少重绘
  2. 减少 HTTP 请求

    1. 理解并行连接

      HTTP1.1 协议很明确限制了单个用户不能在同一时间保持2个以上的连接。大部分浏览器突破了这个限制。充分利用浏览器并发,将资源文件散列到不同的域名。但 DNS 查询耗时。

    2. 合并资源文件
    3. 使用图片精灵
  3. 减少重绘

    1. 规定图片的宽和高
    2. 不要用表格布局
    3. 定义字符集
    4. 不要重组 DOM
Table of Contents