网页性能

1)减少对Dom的操作

如:if(document.getElementByTagName("a").length>0){

  var links=document.getElementByTagName("a");

  ...

}

查询任意Dom元素,浏览器都是搜索整个Dom树,更好的方法是把第一次搜索的结果存储在一个变量里,然后循环利用该变量。

上例改为:var links=document.getElementByTagName("a");

     if(links>0){

     ...

}

2)减少文档中的标记数量

过多的不必要的元素会增加Dom树的规模,进而增加遍历Dom树查找元素的时间。

3)合并和放置脚本

<script src="js/functionA.js"></script>

<script src="js/functionB.js"></script>

建议上例把两个.js合并到一个脚本中,可以减少加载页面时的请求数量。

4)把script标签放在文档末尾

5)压缩脚本

时间: 2025-01-01 16:51:34

网页性能的相关文章

毫秒必争,前端网页性能最佳实践

你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案,让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度,对自己的网站更有信心. 最佳实践 最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律.原文猛击这里.下面我们分门别类将每条的关键点总结一下. 网页内容 减少http请求次数 减少DNS

smarty对网页性能的影响--开启opcache

在上一篇<smarty对网页性能的影响>中,默认没有开启opcache,于是我安装了一下zend opcache扩展,重新实验了一下,结果如下: 有smarty 用apache的ab命令进行压力测试,并发10个,不算大:同时用sar命令进行cpu利用率的统计.命令如下: ./ab -c 10 -n 100000 http://cq01-rdqa-dev072.cq01.baidu.com:8008/index.php sar -u 2 1000 >/tmp/smarty.sar &

毫秒必争,前端网页性能最佳实践--转载

转载,原文地址:http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html#httprequest 你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性能的最佳实践,以及相应的问题解决方案,让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应

网页性能优化

文章首发: http://www.cnblogs.com/sprying/p/4251682.html 本文先从网页性能优化点说起,然后介绍怎么实施性能优化,有哪些性能检测工具. Yahoo!性能优化35条 Yahoo!性能优化现在有35条,划分成了几个类别,content.server.Cookie.CSS.JavaScript.Images.Mobile. 减少HTTP的请求数 合并Js.CSS文件,使用CSS sprites,使用Inline images(将base64的图片数据放在页面

OutputCache缓存优化asp.net代码 提高网页性能

对于asp.net编写的网页来说,使用缓存是一种非常重要也是很常用的优化技术,它可以大大减轻服务器的负载压力,优化这些网页的性能,在网与使用 .NET Framework 的任何其他功能相比,适当地使用缓存可以更好地提高站点的性能.同时,在网页加速显示上也起了很大的作用. OutputCache以声明的方式控制 ASP.NET 页或页中包含的用户控件的输出缓存策略. 语法: <%@ OutputCache Duration="#ofseconds"   Location=&quo

网页性能测试之WebPageTest

想知道您的网站,性能怎么样? 很自然,首先得找一个广被认可的测试工具.我们推荐WebPageTest: WebPageTest 它是google 开源项目"make the web faster "的子项目("make the web faster包括page speed,spdy,tcpm等等"),它本来是AOL内部使用的工具,后来在2008年基于BSD开源.其网址如下:http://www.webpagetest.org/ 我们抓取出来里面的主要指标. 那么,问

网页性能智能优化——Apache扩展mod_pagespeed

本文主要介绍出自谷歌公司的Apache扩展模块mod_pagespeed.该模块的目标是提高网页的加载速度.具体的实现方法主要是通过优化html代码.css代码.js代码.缩放图片来减少请求数量.请求流量,从而提高网页的加载速度. ? 我们首先展示一下插件的效果.下图是还没有开启mod_pagespeed模块的情况. 在这种情况下,页面中充斥着大量空格,以及很长的变量名称和函数名称.其实对于正式运行的系统来说这些空格和名称都是一种浪费.而且将网页的源代码暴露在外,对于安全性要求比较高的网站,这种

提高网页性能的九大技巧

第一条,DOM 的多个读操作(或多个写操作),应该放在一起.不要两个读操作之间,加入一个写操作. 第二条,如果某个样式是通过重排得到的,那么最好缓存结果.避免下一次用到的时候,浏览器又要重排. 第三条,不要一条条地改变样式,而要通过改变 class,或者 csstext 属性,一次性地改变样式. // bad var left = 10; var top = 10; el.style.left = left + "px"; el.style.top = top + "px&q

优化前端网页性能

综合来看,优化前端网页性能有以下几种方式: 网页内容.服务器.图片.cookie.css/js文件处理等方式. 1.网页内容: 通过减少http请求,减少DNS查询,延时加载不急切需要的内容,提前加载将要需要的内容,不要404页面,不用iframe等方式. 减少http请求次数:将文件捆绑打包,将图片合并. 减少DNS 查询:本地上可以清除DNS记录,但是这只能让本地浏览速度加快,服务器上怎么设置呢? 2.服务器: 通过设置服务器使得提高网页性能的方式并不是很熟练.主要有以下等方式:  CDN.

10个免费在线测试网页性能工具

推荐10个免费在线测试网页性能工具:http://www.daqianduan.com/3962.html