Archive for the ‘WEB优化’ Category

渐进式的脚本加载

    通过之前几篇性能指标分析系列的文章可以发现,无论是对于哪个性能指标来说,脚本的影响都是最大的。实际的线上监控数据(图1)也确实能够论证这一点,例如某个页面DOM Ready的时间在4.1s左右,而外链脚本的加载和执行则消耗了2.8s左右,比例高达68.74%。也就是说假如该页面没有脚本的话,页面的DOM Ready时间将会大大缩短。实际的页面中,脚本在加强和提高交互体验方面又是不可或缺的,因此需要从脚本的合理使用方式着手来改善脚本的使用对整体页面性能的影响。

Read the rest of this entry »

从用户体验出发的性能指标分析-TTI

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善用户体验,而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括:Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍TTI。

Read the rest of this entry »

从用户体验出发的性能指标分析-Page Load

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善用户体验,而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括:Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍Page Load。

Read the rest of this entry »

从用户体验出发的性能指标分析-DOM Ready

如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善用户体验,而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括:Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍DOM Ready。

Read the rest of this entry »

从用户体验出发的性能指标分析-Start Render

    如何在持续升级的项目中保持项目的高性能?如何更加准确的定位和解决性能问题?实际上,WPO的最主要目的是改善用户体验,而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括:Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的,而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式?接下来将一一介绍,本文集中介绍Start Render。

Read the rest of this entry »

[正则优化] CSS属性选择符的匹配

正则表达式如下
[s*((?:[wu00c0-uFFFF-]|\.)+)s*(?:(S?=)s*([‘"]*)(.*?)3|)s*]
这个正则表达式的作用是用来匹配CSS属性选择符,例如:

/*能匹配成功的*/
[class=’abcdefg-abcdefg’]
/*匹配失败的*/
[class=’abcdefg-abcdefg’
成功匹配的过程如下:

Read the rest of this entry »

[正则优化] 加速正则失败效率

上一文《正则优化一则:CSS选择符匹配》中说到了如何优化一个正则在匹配成功时的效率,而实际上正则匹配有成功就会有失败,因此失败时的效率也是需要注意的。继续上文中的正则,分析了一下优化前和优化后表达式失败时的效率:
匹配文本:.a select,.b input,.b input[

Read the rest of this entry »

[正则优化] CSS选择符匹配

正则表达式如下
^((^|,)s*[.w-][.ws->+~]*)+$
这个正则表达式的作用是用来匹配一些简单的CSS选择符,例如:

/*能匹配成功的*/
.a select,.b input,.b input
.a select,div.test > a,.b input
/*匹配失败的*/
.a select,.b input,.b input[type="submit"]
该表达式在匹配成功时的效率还是比较高的,因为里面使用了字符集进行贪婪匹配,接下来以匹配 ".a select,.b input,.b input " 这个文本来具体分析一下它的效率问题,具体的匹配过程见下图

Read the rest of this entry »

前端优化总结

    前段时间简单的研究了下前端优化相关的知识,本文算是一个阶段性的总结,或者当做一个优化的参考List。
前言
    前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么?
    1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
    2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
    总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
    前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化,例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

Read the rest of this entry »

HTML优化

在前段领域中,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。在整个前端的构成中,HTML是必不可少的一部分,而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比,HTML的大小在整个页面资源中一般不会占太多的比重,而且还有Gzip,但是事实表明,大多数页面都有较大的压缩余地,即使是Gzip过后仍然能减小可观的体积,这一事实在后续的文章中会给出,本文主要讨论HTML优化的一些可行和看上去不那么可行的途径。

Read the rest of this entry »