六月 « 2014 « Hugo Web前端开发

页面的绘制时间（paint time）是每一个前端开发都需要关注的的重要指标，它决定了你的页面流畅程度。而如何去观察页面的绘制时间，找到性能瓶颈，可以借助Chrome的开发者工具。

本文主要介绍Chrome渲染分析工具 Rendering。

如上图，按F12调出开发者工具，然后按“ESC”调出Rendering界面。

以上5个选项的意思如下：

1、获取页面标题

//提取标题

preg_match(‘/<title>(?<title>.*?)<\/title>/i’, $html, $titleArr);

概述

这个工具真的很强大，Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。

Timeline面板

打开chrome开发者工具，切换到Timeline选项卡，界面如下：

貌似php5.3新增了一些新的方法来实现，如RecursiveIteratorIterator、scandir

不过这里还是用最土的方法实现。

/**

使用wampp新建alias的时候，默认是无法使用mod_rewrite模块。

需要做一些配置：

1、wampp开启mod_rewrite

2、在alias配置文件里加入如下代码，请自行根据情况修改。

使用jquery的Animate 方法可以实现页面上下滑动，以往常用的写法是：

$(‘html, body’).animate({

scrollTop: ‘0px’,’fast’, function(){

在写插件或我们日常代码中，经常都会用到自执行函数表达式，最简单，最常用的也就是匿名函数自运行了。

如下代码结构：

(function(){

//code

Hugo Web前端开发