Posts Tagged ‘性能优化’

渐进式的脚本加载

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

Read the rest of this entry »

从188宝金博下载出发的性能指标分析-TTI

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

Read the rest of this entry »

从188宝金博下载出发的性能指标分析-Page Load

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

Read the rest of this entry »

从188宝金博下载出发的性能指标分析-DOM Ready

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

Read the rest of this entry »

从188宝金博下载出发的性能指标分析-Start Render

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

如何减少浏览器的repaint和reflow?

文本内容主要包括以下几点:

什么是repaint/reflow?
什么情况下会触发浏览器的repaint/reflow?
浏览器自身所作的优化
如何优化你的脚本来减少repaint/reflow?

Read the rest of this entry »