前端性能

#####一.前言 对 APM 用户的一次真实调查分析（上） 中，我们主要聊到了现阶段国外 APM 行业对各个企业的渗透率、大部分使用 APM 工具的企业规模以及 APM 工具在用户心中的地位等问题，有兴趣的朋友可以点击链接观看。 我们本次继续顺着这个话题聊下去。 #####一.APM 工具的传统购买模式 先上个图！ 图 1. APM 工具的主要买家 如上图所示，IT 运维人员仍然是 APM 工具的主要买家(参见图 1 )，一个主要的原因是，IT 基础设施和运维人员是本次调查的主体。然而，无论行业、公司规模(员工，收入)和公司技术采用策略(保守，主流或激进)，结果都是一致的。但是，要注意，随着 DevOps 的兴起，IT 运维人员仍然是主要买家，但是 APM 数据 的消费者可能不再是 IT 运维人员。 至于 APM 产品的购买偏好，如下图 2 所示，60% 受访者认为购买单项工具是最佳选择，这一购买模式或许与目前的经济情况相关。当经济形势不好时，许多企业希望统一购买以节约成本，通过更大的折扣获得更好的价格。同样的，在经济良好时期，或者非紧缩时期，企业更多地关注性能，而不把成本作为主要购买标准。 图2. APM 产品购买偏好 最后，Gartner 想要评估对基于 SaaS 用户的 APM 产品的需求。结果(参见图 3 )表明，现阶段 SaaS 的使用仍然很有限，只有 18%

如何才能做一个合格的前端开发者呢？ 第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、Java等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。 第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。 第三，必须学会运用各种工具进行辅助开发。 第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。 来源： CSDN 作者： 前端碎碎念 链接： https://blog.csdn.net/zhongqw_00/article/details/88929162

Vue Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄 的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular 开发团队也开发了angular2.0版本，并且更名为angular，吸收了react、vue的优点，加上angular本身的特点，也吸引到很多用户，目前已经迭代到5.0了。 学习vue是现在前端开发者必须的一个技能。 前端js框架到底在干嘛，为什么要用 js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点： 渲染数据 操作dom（写一些效果） 操作cookie等存储机制api 在前端开发中，如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题 而js框架对上述的几个问题都有自己趋于完美的解决方案，开发成本降低。高性能高效率。唯一的缺点就是需要使用一定的成本来学习。 Vue官网介绍 vue是渐进式JavaScript框架 “渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

“道生一，一生二，二生三，三生万物。” ―― 《道德经》 Picasso是大众点评移动研发团队自研的高性能跨平台动态化框架，经过两年多的孕育和发展，目前在美团多个事业群已经实现了大规模的应用。 Picasso源自我们对大前端实践的重新思考，以简洁高效的架构达成高性能的页面渲染目标。在实践中，甚至可以把Native技术向Picasso技术的迁移当做一种性能优化手段；与此同时，Picasso在跨越小程序端和Web端方面的工作已经取得了突破性进展，有望在四端（Android、iOS、H5、微信小程序）统一大前端实践的基础之上，达成高性能大前端实践，同时配合Picasso布局DSL强表达能力和Picasso代码生成技术，可以进一步提升生产力。 2007年，苹果公司第一代iPhone发布，它的出现“重新定义了手机”，并开启了移动互联网蓬勃发展的序幕。Android、iOS等移动技术，打破了Web应用开发技术即将一统江湖的局面，之后海量的应用如雨后春笋般涌现出来。移动开发技术给用户提供了更好的移动端使用和交互体验，但其“静态”的开发模式却给需要快速迭代的互联网团队带来了沉重的负担。 客户端开发技术与Web端开发技术相比，天生带有“静态”的特性，我们可以从空间和时间两个维度来看。 从空间上看需要集成发布 ，美团App承载业务众多，是跨业务合流，横向涉及开发人员最多的公司

性能和效率 ChromeDevTools Timeline : ChromeDevToolsAudits: Yslow http :// www . cnblogs . com / simon / p /5883336 .html http :// blog . csdn . net / ivan 0609/ artide / details /45508365 http :// www . wtoutiao . com / p /1305 TZW.html ( 5 ) CDN 存储静态资源 DNS 查询次数 css 和 js 内容 详细参见： http :// www . mahaixiang . cn / wyzz /1589 .html xcodeAnalyze build setting ---- automa ---- mrc product ---- analyze ---- command + R ARC 内存泄露： http://blog.csdn.net/panda_bear/article/details/8009421 前后端 1. http 2. 4. Gzip 5. 6. 7. CSS 8. JavaScript CSS 9. DNS 10. JavaScript CSS 考：http://blog.csdn.net/sonta/article

前后端分离已成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个NodeJS）有效地对前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS等）打下坚实的基础。前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的RESTFUL API接口，并通过JSON数据进行交互。 前端的开发与后端的开发分离 以前的JavaWeb项目，大多数都是Java程序员又搞前端，又搞后端。而随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分得越来越明确，即前端工程师只管前端的开发，后端工程师只管后端的开发。大中型公司需要专业的人才，小公司需要全才（省钱）。但是对于个人职业发展来说，还是分开比较好，因为当生涯发展到后期的时候，企业往往要的是在某一方面上的专家，而不是熟练工。如果一个人前端后端都会一点，那也可以说什么都不会。 前端追求的是页面的表现、速度的流畅、兼容性和用户的体验等。因此对于前端开发工程师来说，需要把精力放在HTML5、CSS3、JavaScript、jQuery、AngularJS、BootStrap、ReactJS、VueJS、Webpack、Less/Sass、Gulp、NodeJS、Google V8引擎、JS多线程、JS模块化

6.1前端性能示例 性能测试工具： Apache Benchmark（ab）得到的响应时间仅为从请求发出开始到接收到HTML的最后一个字节所消耗的全部时间。ab命令行如下： ab -c 【并发用户数】 -n 【发出请求数量】 【被测试页面的URL】 FireBug： DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 onload事件：在页面和图片加载完成后加载。 对Web应用前端性能的研究不是为了准确地得到一个响应时间数据，实际上，Web性能一部分取决于Web服务器和应用服务器（建立连接/下载资源文件），另一部分取决于浏览器的实际机制/Web页面上的JS文件执行等。取决于web服务和应用服务器的响应时间与服务器的负载和压力相关；而取决于浏览器实现机制与JS文件执行所需要的时间则几乎与服务器负载和压力无关。对于后者的研究正是本章所探讨的内容要逃的目的不是得到这部分响应时间的准确数据，而是拖动更好的web应用的前端性能，减少总响应时间。 6.2HTTP概要 HTTP用于传输WWW方式的数据，该协议采用了请求/响应模型。HTTP协议本身是一种非面向连接的协议，每个HTTP请求之间都是独立的。 6.2.1HTTP协议结构 1.请求报文格式 请求报文格式如下：

在Linux的服务器下操作： 安装命令：yum -y install httpd-tppls 查看版本：ab -V 查看帮助：ab -help 执行测试：ab -c 10 -n 10 http://baidu.com/------注：com后面必须要加上“/”，才会识别（别问，问了我也不知道为什么） 注： Mac有自带的apache工具，可用[ab -V]命令查看 压测报错，查看是否是由连接数过多导致的， 先查连接数：netstat -an |grep 服务器IP |wc -l 再查本机最大连接数：ulimit -a 修改连接数：ulimit -n 65535 查看是否修改成功：ulimit -a 来源： https://www.cnblogs.com/jagiexu/p/11754010.html

需求分析： 整体流程图： 需求提取 -> 需求分析 -> 需求评审 -> 更新后的测试需求跟踪xmind 分析流程： 1. 需求提取： 分析依据（包括：需求矩阵、产品交互图、需求说明书） 获取需求的纬度 客户价值 可以为客户带来哪些价值？ 可以解决哪些问题？ 根据以上问题定位功能是否合理 UI功能 - 展示功能 模块关联-历史模块 新功能模块关联 考虑是否关联？耦合部分是否需要支持？ 客户使用场景-部署方式 网络特性 客户使用服务器常见外设 性能参数-性能要求 网卡最低速率 硬件支持 输出（提取最原始的测试需求） 2. 需求分析： 分析依据（五维分析） 用户场景 功能是否和场景强关联 网络拓扑能否满足客户需求 和竞争对手比较差异 功能是否能满足客户实际应用场景 是否考虑了用户的实际操作 明确性 范围明确性（参数、类型长度范围） 清晰性限制等范畴 无法预知影响的需求提出进行确定，风险 二义性 概念模糊【大概念、第三方支持、与上个版本相同】 支持与不支持等范畴 一个需求描述能出现多种理解 完整性 需求一致性【用户需求、需求规格、需求矩阵三者是否同意】 需求完整【隐形需求】 关联性【与新老功能、与外置软件设备】 可测试性 实现测试需要的工具、方法【调试、接口命令】 定位方式【日志等形式观察】 复杂环境、容量边界、操作时过程不可见 输出 测试需求跟踪 缺陷预防bug 工具需求

前言 虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下载应用程序才会在本地操作系统运行,而前端不同,它是“动态增量”式的,我们的前端应用往往是实时加载执行的,并不需要预先下载,这就造成了一个问题,前端开发中往往最影响性能的不是什么计算或者渲染,而是加载速度,加载速度会直接影响用户体验和网站留存。 《Designing for Performance》 的作者 Lara Swanson 在2014年写过一篇文章 《Web性能即用户体验》 ，她在文中提到“网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面能够在2秒内加载完成，而当超过3秒以后， 就会有接近40%的用户离开你的网站 ”。 值得一提的是,GUI 开发依然有一个共同的特殊之处,那就是 体验性能 ,体验性能并不指在绝对性能上的性能优化,而是回归用户体验这个根本目的,因为在 GUI 开发的领域,绝大多数情况下追求绝对意义上的性能是没有意义的. 比如一个动画本来就已经有 60 帧了,你通过一个吊炸天的算法优化到了 120 帧,这对于你的 KPI 毫无用处,因为这个优化本身没有意义,因为除了少数特异功能的异人,没有人能分得清 60 帧和 120 帧的区别,这对于用户的体验没有任何提升