宗旨与理念一切没有profiling的性能都是做无用功。性能优化不能只着眼于局部的代码，凡是真正有价值的性能优化，必定是从端到端的业务场景建立体系来考虑的。性能体系建立方案l现状评估和建立指标l技术方案l执行l结果评估和监控1.现状评估和建立指标a)现状评估作为一个架构师，指标要考虑两个因素。一方面，对用户来说，什么样的性能指标能更好地评估它的体验？另一方面，对公司来说，什么样的指标会影响业务价值？b)性能指标i.页面加载性能ii.动画与操作性能iii.内存、电量消耗着重需要注意的是：页面加载性能。根据淘宝大数据分析得出，30%以上的用户在打开页面2s后如果未看到关键信息，就会关闭或离开当前页面。秒开率（考核指标）：一秒内能够打开页面看到关键信息的用户所占整体用户的百分比。2.技术方案思考：从输入URL，到回车，发生了什么？a)从域名到IP地址，需要用DNS协议查询b)HTTP协议是用TCP传输的，所以会有TCP建立连接过程c)如果使用HTTPS，还有有HTTPS交换证书d)图片、文件等请求对应优化的技术方案3.执行a)纯管理纯行政管理，由项目负责人用纯粹的管理手段来执行方案。比如说，作为前端团队的Leader，组织会议，要求整个团队使用我们前面谈的技术方案。优点：简单粗暴，成本低缺点：需要的行政资源不一定有，比如我没法强制让后端团队配合。纯粹的管理方式，团队本身的体验并不好，也不利于团队成长，最重要的是，纯粹管理方式容易造成执行不到位。b)制度化制度化执行方式是用规则代替人的命令，指定责任人，通过培训、checklist、定期review等具体措施来保证实施。优点：可以极大地减轻管理工作量，一般现代互联网公司都会采用类似的方式。缺点：太过依靠人的主动性。c)自动化自动化的方式是在一些重要的操作路径上设置规则，针对我们的性能优化，例如：1.一个是把开发好的页面发布上线2.另一个是开发好的页面URL投放到首页等处的链接趋势：抛弃纯管理化，结合制度化和自动化的执行方案4.结果评估和监控执行完之后，做结果总结，才是一个完整的工程实施，凡是工程实施，肯定要有一定长效机制，不能优化完了退化，这些都要求有线上监控机制。a)数据采集与记录（网页性能打分系统）i.数据采集部分，同样需要发布平台或者开发工具来配合，对性能数据来说，PerformanceAPI非常好用，它是浏览器记录的性能数据，一般来说，我们用统一的代码把它上传到服务器端就够用了。b)数据展现i.可以用不同的数据可视化方案来展现性能数据，没有一定之规。选择有报警机制的就好了，也可以设置一些条件，针对秒开率特别低的网页报警。性能优化完整流程示例：关于前端性能优化的经典实施案例，今天就展示到这里了。想要成为一个优秀的前端工程师，就需要不断学习，每天积累新的知识，并将学到的运用到工作项目中。我这里还有更多前端学习资源和面试题库，有想要了解前端、学习前端的小伙伴可以私信我免费获取更有某机构的VIP零基础前端入门视频免费送哟~更多前端进阶知识，尽在WEB明教光明顶
转载请注明：http://www.aierlanlan.com/rzfs/6643.html
