web性能优化概述 #9
Description
性能优化，是一个很笼统的概念，抛开具体的时代背景和应用场景谈性能优化，都是耍流氓。
什么时候需要性能优化
理论上来说，我们指定的技术方案，编写的代码都应该是质量完备、性能良好，运行的又快又好的，但是有时候因为人员的素质问题，项目的紧急问题等原因导致没有时间和人力等各种条件做一个完美的方案，而且过早的优化是万恶之源。但是一旦有时间和人力，就应该时刻准备着进行优化。
性能优化的指导方针
性能优化不能是眉毛胡子一把抓，而应该是逐步有序的进行，先抓主要的问题，再处理次要的问题，才能快速见效，因此性能优化之前首先要找到性能的瓶颈在哪里，然后有针对的进行优化。
同时性能优化需要具体问题具体分析，要针对具体的应用场景和上下文来进行优化。随着硬件和网速以及设备的升级，10年前的优化方法有可能现在已经不再适用；针对pc端有效的优化措施，拿到移动端有的也不再适用；别的大厂的优化方法和措施拿到自己的公司也不一定能贯彻和执行的起来，因此一切的优化措施都要因地制宜，有针对的进行实施。
虽然过去总结的很多优化措施现在有可能是不适合的，但是把web加载过程的各个环节进行分析，审视每一个步骤和环节的时间和资源成本，通过各种方法降低web加载过程每一个环节需要的时间，这些方法就是性能优化的方法，雅虎的前端优化的14条军规就是这些优化方法的子集而已。因此性能优化不是背背别人总结的要点，性能优化的方法也不是古老的神秘秘诀，是每一个人都可以总结和发现的。
分析web页面的加载过程
请求页面内容过程
-
本地缓存查找
- 如果本地缓存中存在该url的内容
- 不过期时，返回本地缓存的内容
- 过期时，条件查询请求url的内容
- 直接请求url的内容
- 如果本地缓存中存在该url的内容
-
向服务器发出请求url
- DNS查询，如果本地DNS缓存有，直接得到ip，否则通过DNS查询获取服务器ip
- 建立连接(http/https)
- 向服务器发出http请求
-
数据在网络上转发
-
服务器端处理请求并返回结果
- 路由转发
- 获取数据(缓存/file/db/...)
- format数据（或渲染模版，输出数据）
- 输出内容
-
浏览器接收内容
浏览器解析和渲染过程
- 解析HTML/SVG/XHTML，构建文档对象模型(DOM树) 参考
- 解析CSS，构建 CSS对象模型(CSSOM树) 参考
- 将DOM树和CSSOM树合并为渲染树 参考
- layout/reflow，计算每个节点的几何外观，计算每个Element的位置，布局阶段的输出结果称为 “盒模型”（box model）。盒模型精确表达了窗口中每个元素的位置和大小，而且所有的相对的度量单位都被转化成了屏幕上的绝对像素位置。
- paint或格栅化”（rasterizing），将渲染树中的每个节点绘制到屏幕中，通过调用操作系统Native GUI的API绘制，将渲染树转化为屏幕上的每个像素点
用户交互过程
页面加载之后，用户通过鼠标，键盘，手touch等操作与浏览器发生交互，交互过程浏览器可能会重新进行布局和重绘，同时交互过程可能会涉及到js的执行。
对页面加载每一个环节进行优化
页面内容请求过程优化
页面请求过程优化主要是减少请求和响应的时间，主要通过几个方面：
- 减少(或避免)请求数
- 减少请求和响应的数据量
- 缩短传输的路径和中间延迟
- 增加传输带宽
页面解析和渲染过程优化
- 优化页面的关键路径
- 减少(或避免)首屏渲染需要的html/css/js
- 优化html/css/js的代码，加快浏览器解析html、css的时间，提高js的执行效率
- 适当的触发浏览器硬件加载
用户交互过程优化
交互过程优化的核心点是通过各种方法，减少交互过程的卡顿，让用户感觉起来流畅;
- 通过预加载和本地缓存等手段缩短请求资源的可感知时间
- 通过优化手段使帧率接近60fps，减少感知上的卡顿
- 通过加载的动画，等待动画都手段减轻等待加载资源的焦虑
- ...