网站前端性能优化常用几种方式 (8)

一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write,它告诉浏览器继续显示。不幸的 是,Firefox并不支持DEFER属性。在Internet Explorer中,脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟,那么它就可以移到页面的底部,这会让你的页面加载的快一点。

24、剔除重复脚本

在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在 重复引用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生:团队规模和脚本数量。如果真的存在这种情况,重复脚本会引起不必要的HTTP 请求和无用的JavaScript运算,这降低了网站性能。

在Internet Explorer中会产生不必要的HTTP请求,而在Firefox却不会。在Internet Explorer中,如果一个脚本被引用两次而且它又不可缓存,它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存,当用户重载页面时也会产 生额外的HTTP请求。

除增加额外的HTTP请求外,多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用<script />标签引用脚本的最常见方法就是:

<script type=”text/javascript” src=http://www.likecs.com/”menu_1.0.17.js”></script>

在PHP中可以通过创建名为insertScript的方法来替代:

为了防止多次重复引用脚本,这个方法中还应该使用其它机制来处理脚本,如检查所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

25、减少DOM访问

使用JavaScript访问DOM元素比较慢,因此为了获得更多的应该页面,应该做到:

1、缓存已经访问过的有关元素;

2、线下更新完节点之后再将它们添加到文档树中;

3、避免使用JavaScript来修改页面布局。

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章《高性能Ajax程序》。

26、开发智能事件处理程序

有时候我们会感觉到页面反应迟钝,这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation(事件代理)是一种好方法了。如果你在一个div中有10个按钮,你只需要在div上附加一次事件句柄就可以了,而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。

你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。

你可能会希望用DOMContentLoaded事件来代替事件应用程序中的onAvailable方法。

27、减小Cookie体积,最好使用localStorage

HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。

有关更多信息可以查看Tenni Theurer和Patty Chi的文章《When the Cookie Crumbles》。这们研究中主要包括:

1、去除不必要的coockie;

2、使coockie体积尽量小以减少对用户响应的影响;

3、注意在适应级别的域名上设置coockie以便使子域名不受影响。

设置合理的过期时间,较早地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

28、对于页面内容使用无coockie域名

当浏览器在请求中同时请求一张静态的图片和发送coockie时,服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的 网络传输。所有你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。

如果你的域名是,你可以在static.52maomao.info上存在静态内容。但是,如果你不是在 上而是在顶级域名52maomao.info设置了coockie,那么所有对于static.52maomao.info的请求都包含coockie。 在这种情 况下,你可以再重新购买一个新的域名来存在静态内容,并且要保持这个域名是无coockie的。Yahoo!使用的是ymig.com,YouTube使 用的是ytimg.com,Amazon使用的是images-anazon.com等等。

使用无coockie域名存在静态内容的另外一个好处就是一些代理(服务器)可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是, 如果你想确定应该使用52maomao.info还是 作为你的一主页,你要考虑到coockie带来的影响。忽略掉www会使你除了把coockie设置到*.example.org(*是泛域名解析,代表 了所有子域名)外没有其它选择,因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie。

29、优化图像

设计人员完成对页面的设计之后,不要急于将它们上传到web服务器,这里还需要做几件事:

你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查:identify-verbose image.gif。

如果你发现图片中只用到了4种颜色,而在调色板的中显示的256色的颜色槽,那么这张图片就还有压缩的空间。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzsygx.html