当前位置: 首页 > 科技观察

Web 与 Web 性能世界万物诞生记

时间:2023-03-20 13:51:45 科技观察

Web万物的诞生与Web性能世界转载本文请联系三分钟学习前端公众号。本文转载自微信公众号《三分钟学会前端》,作者安姐。转载本文请联系三分钟学习前端公众号。一开始,什么都没有。然后,在1990年,蒂姆基于超文本语言HTML发明了NeXT计算机上最原始的Web浏览器,随后继续广泛推广Web的概念。1993年4月推出1994年7月发布HTML2.0规范1994年底,蒂姆领导的万维网联盟(WorldWideWebConsortium)成立,简称W3C,即现在的Web技术领域最具权威和影响力的国际中立技术标准组织W3C相当于一个论坛:以工作组(如HTML工作组、CSS工作组等)的形式汇集了某项技术的相关方.),最后他们会制定标准。它制定整个平台的规则并监督整个过程。但是这些技术规范并不是(基本上)由W3C工作人员编写的。此时的网页以HTML为主,是一个纯静态的网页。网页是“只读”的,信息流只能从服务器单向流向客户端。前端页面想要获取后台信息,需要刷新整个页面。1995Netscape随着JavaScript的初始版本Mocha的推出,动态网页开始进入我们的视野。页面不再是静态的,页面可以获取服务器数据信息并不断更新。以谷歌为代表的搜索引擎和各种论坛相继出现,使网络充满生机。随着动态页面技术的不断发展,后台代码变得庞大臃肿,后台逻辑也越来越复杂,逐渐难以维护。这时候后端的各种MVC框架逐渐发展起来,一直到2005年,这个阶段一直处于重后端轻前端的状态。2005年,AJAX越来越流行,越来越多的网站使用AJAX动态获取数据。使动态网页内容成为可能,像Facebook这样的社交网络开始繁荣起来,前端一时间呈现出欣欣向荣的局面。2008年1月22日,HTML5草案发布。2009年12月,ECMAScript5.0规范发布。随着各种规范的制定,多种浏览器的发布,数千台Web服务器的建立,以及数百万网页的生成,Web呈现爆炸式增长。前端的责任越来越重,网页设计也越来越复杂。人们开始思考如何提高Web性能和用户体验。为此,2010年8月,W3C在其官网上宣布成立网络性能工作组(WebPerformanceWorkingGroup),将由来自谷歌和微软的工程师担任主席,负责开发衡量网络应用性能的方法和API.随后,Web性能工作组开始制定一系列Web性能标准,应用于桌面和移动浏览器等环境,帮助Web开发者评估和理解应用程序的性能特征。标准是如何诞生的?标准的形成要经历几个主要阶段:工作草案(WorkingDraft,WD)、候选推荐(CandidateRecommendation,CR)、建议书(Recommendation,Rec)。一个标准要进入推荐阶段,其所有功能必须至少有两个独立的实现。因此,主流浏览器厂商在W3C会员席位中占有很高的比例,对标准的形成和推广有着举足轻重的作用。截至目前,WebPerformanceWorkingGroup制定了以下性能标准:NavigationTiming:提供文档导航过程中完整的计时信息,即文档从发起请求到执行每个阶段的性能和耗时。加载完成PerformanceTimeline:为各种类型的性能时间线(navigation,resource,paint等)提供各种方法ResourceTiming:为文档中的资源提供时间信息UserTiming:帮助应用程序使用高分辨率时间戳测量性能HighResolutionTime:转换单调的亚毫秒级分辨率时钟API,提供给Web应用程序,让Web应用程序可以准确测量两个事件之间的时间间隔ServerTiming:描述如何在请求-响应周期中传递服务器端性能指标给用户代理,并定义一个API,使应用程序能够收集ct,process,andexecutethesemetricsPaintTiming:记录页面加载过程中的一些关键时间点LongTasksAPI:该文档定义了一个API,网页作者可以使用它来检测长任务的存在,这些长任务会独占UI线程长时间并阻止其他关键任务的执行——例如响应用户输入PageVisibility:提供一个API来观察页面的可见性状态,这有助于开发资源高效的Web应用程序Beacon:本规范定义Web开发人员可以用来安排异步和非阻塞数据传输的接口,最大限度地减少与其他时间关键操作的资源争用,同时确保这些请求仍然得到处理并交付到他们的目的地资源提示:定义rel属性值HTML元素,包括dns-prefetch、preconnect、prefetch和prerender,以帮助用户代理决定它应该在决策过程,应该获取和预处理哪些资源以提高页面性能。Preload:定义可与链接元素一起使用的预加载关键字。此关键字提供声明性获取原语以初始化早期获取并将获取与资源执行分开。详情可见:https://www.w3.org/webperf,其中:NavigationTiming、PerformanceTimeline、ResourceTiming、UserTiming、ServerTiming、PaintTiming、HighResolutionTime定义了时间信息(性能指标)web加载和请求PageVisibility、Beacon、ResourceHints、Preload等各种操作提供了一些优化相关的API。主要浏览器实现这些标准(例如window.performance)。用户基于这些标准定义性能指标及其计算方法、优化策略等,进而建立前端性能调查、优化和监控报告系统参考:W3C性能优化史前端发展简史