西红柿爱番茄

Feed Rss

存档: ‘性能优化’ 分类

javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处理,从而不至于阻塞其他资源的加载,并与其并行加载下来。这样的动态异步的加载方式罗列起来有:Ajax的方式、DOM Element Insert、Iframe、document.write、defer等等。这些都能够很好的处理js在加载的时候不会阻塞资源加载的问题,但是,js的执行仍然会阻塞浏览器的渲染。或许这是不得不需要付出的代价,有没有一些方式去缓解js在执行的时候对浏览器的渲染所造成的延迟的影响呢? 首先,让我们从UI Thread、UI Queue、UI Upate的角度去分析整个页面和javascript的行为。浏览器在加载HTML到最后呈现出来的这段过程,整个就是一个UI Thread进程,这个UI Thread里是一个浏览器的响应队列,而UI Queue则是浏览器的行为队列,包括UI Update,javascript的执行行为。那么在页面加载的过程中,UI Queue里面就储存了UI Update、js加载、js解析、js执行等。不管是UI Thread,还是UI Queue,都是按照顺序来的。页面在刚开始未遇到js的加载和执行的时候,是UI Update的一个过程,一旦遇到js,就会等待js的加载、解析、执行完毕之后,接着又开始UI Update,如此这样的一个相应顺序。

今天逛网的时候,看到一种技巧是将js代码和css代码混合在一起,利用CSS parser和Js parser的解析原理,来区分两种不同的代码。这个技巧估计老早就有人知道并讨论的乱套了,我又凹凸了一回。(合并javascript和css作为一个文件,Combine CSS with JS and make it into a single download!,Squeeze CSS and JS into one file) 起初看到这个标题觉得很惊奇,细看了上面罗列的文章之后,发现也只是利用了解析器的原理(解析器本来就是这么设计的,或许不是bug吧),对<!- … 了解更多

今天在看博客的时候,萌生了这样的一种想法,目前博客更新不是很快,那么相对来说,很多内容都是在一定时间内保持不变的,那么就相当于是一个静态的内容,既然是相对静态的内容,那么每次访问的时候还从服务器的MySql数据库读取相同的内容,这就造成了一定的服务器端资源的浪费,如果可以将这些相对静态的内容使用客户端存储技术在本地存储起来,在单个用户再次访问的时候,直接从本地存储中读取静态的内容,而无需从服务端读取内容,那么页面的初始化将会是更加的快速,另一方面也可以最大化的节省流量。

关于性能优化方面的关注点,每天都能够朗朗上口,但是当具体拿出一个页面给你去优化的时候,有可能你会不知道如何去展开优化工作和步骤(前几天有个朋友让我去优化一个网站首页,开始我就处于这种状态,很杯具~),也可能是想到一点就优化一点,乱套了。从而缺乏一个整体思路性的优化步骤。当我想到了这一点,就开始着手去总结这个一个优化流程的东西。 当然了,做优化的脱离不了浏览器,也脱离不了工具,为此,你手上得准备好一下几个工具:Google的Page Speed,Yahoo的YSlow,HTTPWatch,dynaTrace AJAX,Fiddler,Firebug。现在主流浏览器都集成了开发人员工具,提供了NET面板可以查看HTTP请求瀑布图,这是个好事情。 一切前提条件都就绪了,那么接下来罗列一下我认为的优化的流程,也是将来会指导我是思维的一个流程步骤吧:

Fetch resources on-demand,中文意思大概就是按需加载资源,而这里的资源不只是CSS、JS文件,Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页:http://www.yahoo.com,几乎页面的每一个模块都体现了按需加载的技巧:左边的导航(用户可以定制、点击异步请求更多资源)、中间的新闻、图片tab、右栏的第三方资源等等。 按需加载表面理解起来很简单,但是怎么个按需法呢?我所理解的按需,包括两个方面:一个是按用户的需要;另一个是网站本身的需要。按需加载主要解决的问题就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求,因为有些模块比如:图片导航tab、多级菜单、内容导航等等,这些在初始化页面的时候有很多内容都是处于隐藏状态,用户是看不到的,那么这些内容对不同的用户来说有不同的需求,那么这些就可以从页面的初始化中剥离出来,按用户的需求通过异步通信来加载内容和资源。对于网站本身的需要来加载后续资源,比如Google首页对于结果页的一些js、image等资源的pre-fetch的方式,通过分析用户可能会产生的行为,为后续的页面提前加载内容,加快后续页面的初始化速度,从缓存中读取页面所需要的资源。

Js学的也差不多了,该是来总结一下Js中一些比较高级的智慧结晶了。基于Js的动态性、对象都是易变的、函数是第一对象等等其他语言所不包含的特性,可以在使用Js的时候创造出更高效、组织性更好的代码。下面提到的一些概念,是不是很熟悉: 分支、惰性实例化、惰性载入函数、单例的两种模式、享元类、函数绑定(纠正函数一个执行上下文)、函数curry化、高级定时器、保护上下文的构造函数、函数节流、自定义事件…… js中的继承、原型、构造函数这些都是老生常谈的了。但是对于构造函数式继承和原型式继承的优缺点,还是有必要了解一下的。原型式继承的主要优点就是共享方法和属性,使得从原型对象中继承出来的子对象都可以在内存中共享全部的方法和属性,这如果是在大型的继承链中将会大大的改善性能和减少内存的使用量。