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