三、页面性能优化

《指尖上行——移动前端开发进阶之路》学习笔记

第三章：介绍页面性能的优化原理，如如何进行资源优化、加载优化及脚本优化，这可以保证较快的访问速度，可以更好地增加用户体验，减少用户流失。

3.1 优化原理

3.1.1 为什么优化

降低用户浏览门槛和制作成本，为用户提供更好的用户体验。

3.1.2 优化思路

• 全局观优化
• 四两拨千斤
• 主次分明
• 重用

3.1.3 资源优化

3.2.1 图像

• 减少使用图像
• 图像格式的选择
• 图像压缩及合并

3.2.2 音频

• 移动端音频格式解析
  推荐MP3格式
• 音频工具
• 音频参数及压缩
• 音频雪碧图
  P162-P166

3.2.3 视频

• 移动端视频格式解析
• 视频工具
• 视频参数及压缩
• 视频加载
  P166-P167

3.2.4 代码

• 控制HTML的DOM层级
• 处理空格
• 简化命名
• 把样式表放在头部
• 把脚本放在最后，必要时延迟加载
• 合理使用CSS选择器

3.3 加载优化

3.3.1 加载原理

• HTTP协议
  <1>事务
  <2>报文
  请求报文和响应报文，
  HTTP报文包含：起始行，首部字段，主体。
  对于Web前端开发人员来说，服务器策略会极大影响开发者和用户的部分主要有以下几点： 1. 服务器缓存策略。2. 响应报文主体编码格式。3. 客户端与服务器连接方式。
  <3>连接

• 加载资源类型
  HTTP协议给每种需要传输的对象都打上数据格式标签，名为MIME类型。
  它是一种文本标记，表示一种对象类型和一个特定的子类型，中间由一条斜杠来分割，如：Content-type:image/jpeg
  <1>HTML文档
  <2>样式表
  <3>JavaScript文档
  <4>图片
  <5>其他资源

3.3.2 浏览器分析

• 解析及加载原理
  <1>浏览器解析并完成请求的完整过程
  等待加载、阻塞、代理服务器谈判、请求发送、等待服务器响应、内容下载耗时、初始化连接、SLL
  <2>浏览器HTML解析与资源加载顺序

3.3.3 加载优化实战

• 请求分类原则
  第1种：需要在第一次访问时必须加载的请求
  第2种：在用户触发某些交互行为时加载的请求
  第3种：用户无需知晓，只需在第一类请求全部加载完成后，静默进行加载的请求
• 优化实现原理

3.4 脚本优化

3.4.1 执行效率

• 本地变量
  尽量减少使用全局变量，因为全局变量需要搜索更长的作用域链，存在生命周期长，不利于内存释放、过多容易混淆及增加错误可能性等。

• 对象
  我们可以通过delete来删除键值，从而消除引用。也可以通过将值设为null来消除引用，这种方式不会改变对象结构。

• 函数
  <1>匿名函数
  我们可以在匿名函数中声明变量，这样就不会造成全局变量污染。
  (function(){函数体})()
  <2>闭包函数

• 运算、判断
  二进制操作优于Math
  慎用 || ： 大量运行 if( x == null ){ x={} } 优于 x = x || {}
  switch：多个 if...else if 使用 switch， 性能优于多个 if..else if..

• 循环

• 严格模式
  严格模式是一种将更好的错误检查引入代码中的方法。在使用严格模式的时候，无法使用：隐式声明的变量、将值赋给只读属性或将属性添加到不可扩展的对象等。
  具体内容参考：P186-P188

3.4.2 Web Worker

在HTML5中的多线程是这样一种机制，它允许在Web程序中并发执行多个脚本，成为一个线程，相互独立，并且由浏览器中的JavaScript引擎负责管理。

• 创建线程

var worker = new Worker("worker.js");
var worker = new Worker(blob);

• 线程通信

我们可以用以下两种写法来接收数据

Worker.onmessage = function (event) {};
Worker.addEventListener("message", target);

同时可以通过以下两种写法来发送数据

Worker.postmessage(message, taransferList);
Worker.postMessage({
    operation: "list",
    // ArrayBuffer object
    input: buffer,
    threshold: 0.8,
},[buffer]);

• Worker基本使用

创建新的Worker
var worker = new Worker("worker.js");

传递参数
worker.postMessage("test");

接收消息
worker.onmessage = function (e) {
    var message = e.data;
}

异常处理
worker.onerror = function (e) {
    console.log("Error at" + e.filename + ":" + e.lineno + e.message);
}

结束Worker
worker.terminate();

载入类和工具函数
importScripts("utils/base64.js", "utils/Map.js"...)
需要注意的是，importScripts是同步的方法，一旦importScripts方法返回就可以开始使用载入的脚本，而不需要回调函数。

• Worker作用域
  当创建一个新的Worker时，该代码会运行在一个全新的JavaScript运行环境中，完全与创建Worker的脚本隔离。

• 共享线程
  共享线程避免了线程的重复创建和销毁过程，降低了系统性能的消耗，可以同时有多个页面的线程连接。

创建新的Worker
var worker = new SharedWorker("sharedworker.js");

传递参数
worker.port.postMessage("message");

接收消息
worker.port.onmessage = function (e) {
    var message = e.data;
}

可以参考一下：HTML5 Web Worker的使用