Web性能优化指南

跳票

对,不写了,就那点东西,没什么要写的,浪费时间

废话

就是整理一下,不想太乱。

我尽量以一个偏全栈能力的角度去完整地整理 Web 性能优化相关的知识,而不是局限于 web 客户端的形式化优化。

也许不是每个类别都很详细,事实上几乎每个细节都能够拿出来长篇大论。

正文

我把 Web 的优化点分为下面几个类别:

  • 程序

    • 算法
    • 设计模式
    • 程序设计
      • 事件代理
      • ...
  • 资源

    • 资源的类型及应用场景
    • 资源的压缩及编译处理
    • 资源的最优化产出形态
  • 网络

    • 数据交互
      • 强缓存
      • 弱缓存
      • HTTP2
      • HTTPS
      • 跨域
    • 数据传输
      • 数据压缩
      • 数据缓存
    • 网路节点
      • 负载均衡(域名、请求、程序)
      • DNS
      • 数据库连接池
      • CDN
      • ...

好,从头开始。

因为我们做优化的本质是让客户端程序 ( js-app ) 以条件内最优的状态到达客户端,并最优地执行,所以客户端程序本身才是真正的核心。

而一个丰富的 Web 客户端会包含各种视频、音频、图片、文字、字体...等多种资源,资源的协调者便是 Js 脚本 (或 html ),所以其实从优化来说,各占一半的重要性,OK,先说程序。

程序

程序(算法、设计模式的优化,还有类似事件代理这样的特定平台优化...)

算法

数据结构、算法,与语言无关,是程序真正的“原力”,所以 Web 开发者(特别是只专注于 web site 那种)不要刻意去忽略,甚至应该加以重视。

我们假设几个例子:

我们假设有一个 User-List 用以存储...

[ 待更 ]

设计模式

一般除却游戏开发和框架等基建开发,很少用到设计模式,就先不说了。

每一种设计模式都是现实生活中的思想在程序中的映射,理解便好。

[ 待更 ]

程序设计

  • 避免使用 JS

如果你只是想创建一个例如下拉菜单这样的功能,那么尽量用 CSS 代替 JavaScript,CSS 在客户端本身上进行高度优化,并有浏览器的本地预编译的支持。 如果使用这些预定义函数,不仅可以节省编译 JavaScript 的时间,还可以减少代码体积。至少客户端 API 针对 CSS 平台进行了优化,并且可能会使用 GPU 和其他一些无法用 JavaScript 控制的底层优化。

  • 基本原则

evalwithtry catch...等语句在非必要时候尽量避免使用,js 脚本运行时依赖宿主环境的预读优化生成中间码并执行,这些语句块内的代码都无法被优化,速度可能相差几十倍,不过调试确实很有用。

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
try { eval(code) } catch (e) { if (e instanceof SyntaxError) { alert(e.message) } else { throw(e) } }
  • 变量的就近维护

  • ...

[ 待更 ]

Dom相关

  • 事件代理
              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<ul id="ul"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul>
              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
// bad code const Li = Ul.getElementsByTagName('li') Li.forEach(li => { li.onclick = event => { alert(li.innerText) } }) // 事件代理 const Ul = document.getElementById("ul") Ul.onclick = event => { event = event || window.event var target = event.target || event.srcElement if (target.nodeName.toLowerCase() === 'li') { alert(target.innerHTML) } }
  • Dom 操作优化(createDocumentFragment)

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

  • ...

[ 待更 ]

资源

简单说,资源优化的目的是:保证首屏 HTTP 请求数量和资源体积之间取得最佳平衡

当然,绝大多数时候,资源都是通过首屏加载完毕的,所以首屏这个节点至关重要。

资源的类型及应用场景:

图片

图片是最常见的富文本资源形式,常用格式有:jpg、png(8/24)、gif、webp、svg...

如果效果真的需要图片来表现,那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等,首先要知道各种图片格式的特点:

图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色,动画
PNG 无损压缩 支持 不支持 所有 需要高品质全透明
APNG 无损压缩 支持 支持 Firefox Safari iOS Safari 需要半透明效果的动画
WebP 有损压缩 支持 支持 Chrome、Opera、Android Chrome、Android Browser 复杂颜色及形状、浏览器平台可预知
SVG 无损压缩 支持 支持 IE8+ 简单图形,需要良好的放缩体验/需要动态控制图片特效

其中APNGWebP格式出现的较晚,尚未被Web标准所采纳,只有在特定平台或浏览器环境可以预知的情况下加以采用,虽然均可以在不支持的环境中较好的功能降级,但这里暂不讨论这两种格式。图片格式选择过程如下:

https://static.surmon.me/17-8-22/19505876.jpg

资源(图片格式的使用及base64,css的分包或不分包处理、脚本的模块化处理、字体媒体等其他资源的压缩和生成)...

[ 待更 ]

网络

  • 微观网络

web server(包含gzip这类东西)、cdn、http强弱缓存、http2、跨域预请求的优化)...

[ 待更 ]

  • 宏观网络

负载均衡、智能dns、webserver分发,数据库连接池分发)...

[ 待更 ]

数据交互

[ 待更 ]

数据传输

[ 待更 ]

网络节点

[ 待更 ]

部分内容来自:

https://segmentfault.com/q/1010000002433991

[ 待更 ]

本文于 2017/8/9 上午 发布在 Think 分类下,当前已被围观 686 次

相关标签:网络Web开发网络安全

永久地址:https://surmon.me/article/68

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN