页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。
本文主要介绍Chrome渲染分析工具 Rendering。
如上图,按F12调出开发者工具,然后按“ESC”调出Rendering界面。
以上5个选项的意思如下:
页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。
本文主要介绍Chrome渲染分析工具 Rendering。
如上图,按F12调出开发者工具,然后按“ESC”调出Rendering界面。
以上5个选项的意思如下:
概述
这个工具真的很强大,Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件,框架,和实时内存用量3个方面的数据来监测网页,通过这些数据,我们可以方便的找出页面中存在问题的地方。
Timeline面板
打开chrome开发者工具,切换到Timeline选项卡,界面如下:
使用wampp新建alias的时候,默认是无法使用mod_rewrite模块。
需要做一些配置:
1、wampp开启mod_rewrite
2、在alias配置文件里加入如下代码,请自行根据情况修改。
使用jquery的Animate 方法可以实现页面上下滑动,以往常用的写法是:
$(‘html, body’).animate({
scrollTop: ‘0px’,’fast’, function(){