前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发工程师有必须重视的几个性能指标

前端开发工程师有必须重视的几个性能指标

作者头像
企鹅号小编
发布2018-02-12 14:25:38
6100
发布2018-02-12 14:25:38
举报
文章被收录于专栏:企鹅号快讯

前端开发工程师有有必要重视的几个功用方针

关于页面相应时间,有一条闻名的“2-5-8准则”。当用户访问一个页面:

在2秒内得到照应时,会感觉系统照应很快;

在2-5秒之间得到照应时,会感觉系统的照应速度还可以;

在5-8秒以内得到照应时,会感觉系统的照应速度很慢,但可以承受;

而逾越8秒后依然无法得到照应时,用户会感觉系统糟透了,进而选择脱离这个站点,或许主张第2次央求。

关于一个网站如果期望抓住用户,网站的速度以及稳定性是首战之地的。

从各式各样的前端监控平台中,你都可以获得页面许多的功用方针。本文将介绍几个几个比较要害的方针,并给出相应的优化思路。

初步渲染的时间

该时间点标明浏览器初步制作页面,在此之前页面都是白屏,所以也称为白屏时间。

关于该时间点的优化有:

1)优化服务器照应时间,服务器端尽早输出

2)减少html文件大小

3)减少头部资源,脚本尽量放在body中

DOM Ready

该时间点标明dom解析现已结束,资源还没有加载结束, 这个时分用户与页面的交互现已可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以标明。TTSR上面现已介绍过了,TTDC标明DOM树创建所耗时间。TTST标明BODY中一切静态脚本加载和实行的时间。在高级浏览器中有DOMContentLoaded工作对应,MDN上有关DOMContentLoaded工作描绘的文档如下,

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

具体规范可以查看W3C的HTML5规范。从MDN文档上可以看出该工作首要是指dom文档加载解析结束,看上去很简略,但是DOMContentLoaded工作的触发与css,js息息相关,现在有专门的名词Critical Rendering Path(要害呈现途径)来描绘,在文章【要害呈现途径】中具体介绍了要害呈现途径对DOMContentLoaded的影响。

在不支持DOMContentLoaded工作的浏览器中可以通过仿照获取近似值,首要的仿照办法有:

1)低版本webkit内核浏览器可以通过轮询document.readyState来结束

2)ie中可通过setTimeout不断调用documentElement的doScroll办法,直到其可用来结束

具体结束办法可以参看干流结构(jquery等)的结束。 DOM Ready时间点意味着用户与页面可以进行交互了,因此越早越好,关于该时间点的优化有:

1)减少dom结构的复杂度,节点尽可能少,嵌套不要太深

2)优化要害呈现途径

首屏时间

该时间点标明用户看到第一屏页面的时间,这个时间点很重要但是很难获取,一般都只能通过仿照获取一个近似时间。一般仿照办法有:

1)不断获取屏幕截图,当截图不再变化时,可以视为首屏时间。可参看webPagetest的Speed Index算法;

2)一般影响首屏的首要要素是图片的加载,通过页面加载完后判别图片是否在首屏内,找出加载最慢的一张即可视为首屏时间。当然还需考虑其他细节,具体可参看【7天打造前端功用监控系统】

针对该时间点的优化有:

1)页面首屏的显现尽量不要依赖于js代码,js尽量放到domReady后实行或加载

2)首屏外的图片推延加载

3)首屏结构尽量简略,首屏外的css可推延加载

onload

该时间点是window.onload工作触发的时间,标明原始文档和一切引用的内容现已加载结束,用户最显着的感觉就是浏览器tab上loading状况完毕。

该时间点的优化办法有:

1)减少资源的央求数和文件大小

2)将非初始化脚本放到onLoad之后实行

3)无需同步的脚本异步加载

为了优化整站功用,页面onload的时分可以考虑做一些预加载,把其它页面需求用到的资源预先加载进来。

本文来自企鹅号 - 前端木雨媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 前端木雨媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
前端性能监控
前端性能监控(Real User Monitoring,RUM)是一站式前端监控解决方案,专注于 Web、小程序等场景监控。前端性能监控聚焦用户页面性能(页面测速,接口测速,CDN 测速等)和质量(JS 错误,Ajax 错误等),并且联动腾讯云应用性能监控实现前后端一体化监控。用户只需要安装 SDK 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正做到低成本使用和无侵入监控。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档