七步学会前端首页性能优化(一)

导引:
近十年前端新技术层出不穷,令人目不暇接.道德经曰:万变不离其宗,极致用户体验一直是前端孜孜追求的目标,其中页面性能是一个和用户体验直接相关的因素,直接影响着公司的收入,因此做好页面的性能优化非常重要.但是另一方面,性能优化涉及面广,优化手段繁杂.从dns预加载到浏览器缓存优化,从组件异步和http管道复用,这么多方案多的让前端开发者无所适从,如何从这些令人眼花缭乱的方向中挑选出来适合自己项目使用的方案,颇费一番功夫.本篇文章试着从基本的浏览器渲染原理开始,找出项目性能瓶颈,找到合适优化方案,最终优化之.本文重点在如何找到性能问题,以及相关的优化思路,希望本篇文章能给有性能优化的Jser带来一点启示.

本篇文章的目录如下:

• 打基础—性能优化基础知识
• 找问题—评价性能指标
• 定目标—确定优化范围
• 找原因—通过工具找具体瓶颈
• 破瓶颈—确定修复技术方案
• 测效果—测试性能修复效果

第一步.打基础 [性能优化基础知识]

授之以鱼不如授之以渔.万丈高楼平地起,也先要有扎实的基础.好的基础能让后来的优化之路少些坎坷多些坦途.
性能优化本质上来说是让网页在浏览器或者其他类浏览器容器中运行的尽量快,那么了解网页在浏览器是怎么渲染的就至关重要.了解了浏览器是怎么一步步渲染出来网页的,方便接下来对各个主要节点进行观察,并找到性能瓶颈.
回到一个老生常谈的问题: 浏览器从输入url到页面渲染出来,经过了哪些过程?

1.请求流转流程

从图上我们可以看出,大致经历了缓存查找、d