优化前端网页性能

综合来看,优化前端网页性能有以下几种方式:

网页内容、服务器、图片、cookie、css/js文件处理等方式。

1、网页内容:

通过减少http请求,减少DNS查询,延时加载不急切需要的内容,提前加载将要需要的内容,不要404页面,不用iframe等方式。

减少http请求次数:将文件捆绑打包,将图片合并。

减少DNS 查询:本地上可以清除DNS记录,但是这只能让本地浏览速度加快,服务器上怎么设置呢?

2、服务器:

通过设置服务器使得提高网页性能的方式并不是很熟练。主要有以下等方式:

  CDN、Expires/Cache-Control、Gzip、Etags、Get Ajax 、避免空src

  cdn:分布式存储、负载均衡、网络请求的重定向和内容管理(就是将网站的内容发布到最接近用户的网络"边缘"",使用户可以就近取得所需的内容,解决Internet网络拥塞状况,提高用户访问网站的响应速度。)

Expires/Cache-Control:静态内容永不过期,动态内容动态加载。

Gzip:是个效率提升的好东西,zip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。需要配置iis。

  Etags:就是将网页内容标记,然后让服务器更好判断这是神马东东。

  Get:get比post快。。。

  当然要避免空的src了,空的还要发送一个请求,然后浏览器还要返回个空值,不浪费才怪。。。

3、图片:

优化图片(就是让它小,更小,或者在移动设备上用媒体查询的方式让它小。。。)。

css sprite :一个神奇的拼图片,然后再切图片的想法。

如何切? (人家是用position定位的,没错,就是这么简单粗暴。)

why用它? 对于小的图标还是蛮合适的,但是公司好像并没有经常用到它,然并卵。。。

不要在html中缩放图片,如果用小图,就把图弄小。。。 (这个美工负责么?)

4、cookies

由于cookies是在http的报头中,所以如果不用cookies就把它禁了吧,用到也尽量减小它。

5、css/js

  将css文件放在head中,因为这样做可以使浏览器逐步加载已将下载的网页内容,然后就慢慢看到了它加载完成的东西啦,不用面对个白屏。

尽量不用css表达式(这个真不经常用,类似if else语句的东西(new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )丑丑的语句。

js写在body里,这个我们知道,因为它会阻塞加载。

去除重复脚本,线上环境下,去除空格注释也可。

好吧,这么多条,终于总结完了,除了服务器上的设置,其他的已经基本搞清楚怎么回事了,以后多接触,多学习,多捣鼓。

时间: 2024-12-07 21:02:29

优化前端网页性能的相关文章

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

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

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

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

web前端之性能优化

作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 首先我们从三个大类讲起:一,网络服务器.二,浏览器,三代码上面,针对这三个大类总结出了下面

移动网站性能优化:网页加载技术概览

性能一直是网站成功的关键.越来越多的研究已经证明,不管是小型电商,还是像沃尔玛那样的连锁店,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验.但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径.低带宽,高延迟,小内存,低处理器性能的移动设备环境,迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期. 在强调如何解决移动端性能问题上,这篇文章总结了一

网页性能优化

文章首发: 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的图片数据放在页面

移动网站性能优化:网页加载(转)

原文链接:http://caibaojian.com/mobile-optimization.html 由于移动设备存在的环境限制,如低带宽,高延迟,小内存,低处理器性能的等,迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期.在强调如何解决移动端性能问题上,这篇文章总结了一些前端优化的案例,并且概括了一些加速页面的方法和策略.· 为什么性能会影响这么多 不论你的页面设计地多么有趣.漂亮.交互性好,不管是在桌面还是移动设备上,如果页面需要花2到3秒时间去渲染展示,那么用户都会很快变

雅虎十四条:网站前端网页优化的14条原则

Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页面设计.但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps组合多个

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,