【前端如何进行网站性能优化】网站性能优化,前端性能分析

发布时间:2020-01-14 11:30:00

一般来说,前端性能可以看作是用户获取所需页面数据或执行某个页面动作的实时指标。通常,它是通过用户期望的数据操作和用户实际数据采集之间的时间间隔来测量的。

【前端如何进行网站性能优化】网站性能优化,前端性能分析

前端性能优化是一个非常宽泛的概念,本书前一部分或多或少提到了一些前端优化方法,这也是我们一直关注的一个重要问题。采用多种方式、手段和辅助系统,前端优化的最终目标是提高用户体验和页面性能。我们经常尽力优化前端页面,但忽略了这样做的效果和意义。不要急于探索如何做前端优化,先看看什么是前端性能,如何理解和评估前端页面的性能。

一般来说,前端性能可以看作是用户获取所需页面数据或执行某个页面动作的实时指标。通常,它是通过用户期望的数据操作和用户实际数据采集之间的时间间隔来测量的。例如,如果用户希望通过打开页面来访问数据,则可以通过用户操作与页面内容的屏幕显示之间的时间间隔来判断操作的前端性能。用户的等待延迟可以分为两部分:可控等待延迟和不可控等待延迟。

可控等待延迟可以理解为可以通过技术手段和优化来改进的部分,例如减小图像大小以使请求加载更快,减少HTTP请求的数量等。不可控等待延迟不能或很难通过前后技术来改进和优化,比如鼠标点击延迟、CPU计算延迟、ISP网络传输延迟等,所以你应该知道前端的所有优化都是针对可控的等待延迟。让我们学习如何获取和评估页面的特定性能。

要获取和度量页面的性能,主要可以通过以下几个方面:性能计时API、profile工具、页面嵌入计时、资源加载计时图分析。

1、 性能API

性能计时API是一种支持Internet Explorer 9及以上版本的机制,用于在WebKit核心浏览器中记录页面加载和解析过程中的关键时间点。它可以详细记录从加载开始到解析完成的整个过程中每一个页面资源的时间点,这样就可以根据它的时间开始和结束时间戳来计算在这个过程中花费的时间。

通过以上时间戳计算,我们可以得到几个关键步骤所消耗的时间。对前端有意义的主要过程是解析DOM树耗时、加载事件耗时和整个加载过程耗时。但是,在获得页面性能时,我们可以获得更详细的数据信息,以便以后进行分析。除了资源加载和解析的关键计时外,performance还提供了一些其他功能,可以根据具体需要进行选择和使用。

2、 轮廓工具

性能计时API描述了页面资源从加载到解析的各个阶段的执行键时间记录,但它不能统计Java执行期间的系统资源使用情况。Profile是chrome和Firefox等标准浏览器提供的一个API,用于测试运行页面脚本时的系统内存和CPU资源使用情况。以Chrome浏览器为例,结合profile实现以下功能。分析页面脚本执行过程中最耗费资源的操作,记录Java对象在执行页面脚本时消耗的内存和堆栈的使用情况,检查页面脚本执行期间的CPU使用情况

3、 页面掩埋时间

与性能计时类似,page Java嵌入计时很容易实现。我们可以记录java代码开始执行时的时间戳,然后将时间戳埋在需要记录的记录末尾。根据差异值计算HTML解析或Java解析的执行时间。为了方便操作,可以将操作开始和结束的时间戳记录到一个数组中,然后分析数组之间的间隔,得到每个步骤的执行时间。这里是一个时间点记录和分析的例子。


联系我们,谈您的需求

立即咨询