帖子里很多坛友说到我的网站页面打开速度飞快,闪到了自己的眼睛
,今天再发一帖说下自己的前端处理经验。
说到前端,就不得不提 YSLOW ,Page Speed这些个大牛级的插件,这两个东西都可以直接装在firebug上。
Page Speed还提供了在线版。可以先用这些东西分析一下页面,把
High priority
的内容做到就差不多了。
本人经验如下:
首先,最重要的是请求数。
尽可能的减少请求。如何减少,就是合并。这里有个合并图片的技巧有 css sprite,通过css定位,合并多个背景图。剩下的多个js能合并的就合并,css类似。
请求实在没法减少的时候肿么办?利用浏览器并发。也就是多域名资源分布。大致原理是因为浏览器对单一域名并发下载有限制(不同浏览器数字不同),所以为了让浏览器一次下载更多资源,把内容分布到多个二级域名。
本人网站暂时用了三个 www img 和 img0。 www 就是下载文档,img是js、css和css背景图,img0就是电影图片。
其次是缓存。
要充分利用浏览器本身的缓存策略。让用户打开过一次页面之后,访问其余页面更快,再次访问秒杀。具体HTTP协议的缓存策略这里就不展开,只说一下我的网站配置,Nginx版
-
location ~ .*\.(js|css|swf)$ {
-
expires 60d;
-
}
-
location ~ .*\.(gif|jpg|jpeg|png|bmp|ico)$ {
-
#valid_referers blocked *.fqxn.com;
-
#if ($invalid_referer) {
-
#rewrite ^ http://www.fqxn.com/403
.jpg last;
-
#}
-
expires 8d;
-
}
加了过期时间之后,普通链接点击(在过期时间内)就不会再发起新的请求,直接使用本地缓存。关于F5 和 Ctrl + F5的情况,请求是都会发出。
不过F5是这样的:请求头加入If-Modified-Since
和 Cache-Control: max-age=0
,
意思是说,我不管浏览器缓存中的文件过期没有,都去询问一下有没有更新,相当于上次HTTP响应的Expires暂时失效。服务器的响应处理流程很简单,
如果确实没有改动,直接返回一个304,并不发送真正的图片内容。意思是说没有过期,用你自己本地的吧。下面是F5的情况(本人已经打开过首页,然后
chrome下按F5 查看网络面板截图)
而 Ctrl + F5的情况,请求头中会加入Cache-Control
换成了no-cache
,(Pragma:no-cache
行是为了兼容HTTP1.0),而没有加入 If-Modified-Since
。这次就和初次访问一样了,服务器老老实实的返回200状态码,同时响应头中多了个Content-Length 这次就真的产生了数据流量,服务器重新发送内容到浏览器。下面是Ctrl+F5
最后是压缩。
这里主要是说GZIP,至于js 、css mini这个东西不做讨论。由于GZIP之后相差不大,所以
本人
没有进行js、css mini,另外:一是方便自己修改和阅读,二是没有混淆的必要,不怕别人看,三就是自己比较懒。
现在主流浏览器都支持gzip压缩,压缩一下文本一般能节省原大小的 60%~80%,节省的带宽可不小,重要的是速度!
通过站长工具看下本站首页的压缩情况:
下面是Nginx配置压缩
-
gzip on;
-
gzip_min_length 1024
;
-
gzip_types text/plain text/css application/x-javascript application/xml;
以上就是本人网站在前端部分进行的优化经验总结~分享给大家,希望有帮忙!
最后,相关链接:
1.隐藏帖传送门 http://www.iteye.com/topic/1122481
2.在线版Page Speed https://developers.google.com/pagespeed/
3.Firebug Yslow https://addons.mozilla.org/zh-cn/firefox/addon/yslow/
最后,顺便用在线版PS又分析了下网站 fqxn.com
分享到:
相关推荐
- **预渲染**:利用`<link rel="prefetch">`让浏览器预先加载后续可能访问的页面资源。 **2.3 优先级资源提示** - **Critical CSS**:提取首屏渲染所必需的CSS代码,嵌入到HTML文档头部,确保快速渲染首屏内容。 -...
"让您的软件飞起来"这一主题,直指代码优化的核心目标,即提升软件运行速度,使其达到极致性能。以下将详细探讨代码优化的关键技术和方法,以及如何通过这些方法提升软件的运行效率。 首先,代码优化分为前端优化和...
尊天缓存是高并发高性能的缓存系统 帮您的服务器真正的飞起来 下面是性能测试数据: os:windows server 2008 x64 cpu:AMD Athlon tm 2 core 3 5G 3 5G mem:4G 64线程 数据 次 秒 add : 2566787 read : 4764566 ...
- **加载速度**:优化图片大小,使用CDN(内容分发网络)和缓存策略,提升网站加载速度。 - **可访问性**:遵循WCAG(Web Content Accessibility Guidelines)标准,确保残障人士也能无障碍地使用网站。 6. **...
系统可能采用缓存策略来减少数据库查询,使用连接池管理数据库连接,或者优化SQL查询以提高响应速度。同时,负载均衡和集群技术也可能用于应对高并发访问,保证系统的稳定性和可用性。 总的来说,飞行预定系统是一...
这种方式加载速度较慢,因为它需要等待外部文件完全加载才能继续执行。 - 修改样式时涉及到“读”和“写”的概念。“读”指的是获取元素的当前样式,“写”则是更改样式。更改样式会导致重排或重绘,从而影响页面的...
《在线商城系统参考论文》是一份集合了11篇与计算机专业毕业设计相关的网上商城论文资源,旨在为学生们提供丰富的毕业论文写作素材和研究思路。这些论文深入探讨了在线商城系统的构建、运营、安全以及用户体验等多个...
9. **JavaScript库和框架**:为了简化开发和优化性能,开发者可能使用了像jQuery、GreenSock(GSAP)这样的JavaScript库,或React、Vue等前端框架来管理状态和组件。 10. **优化与性能**:为了提供流畅的用户体验,...
CSS(层叠样式表)也可能被用于定义界面样式,使网站看起来美观且符合用户体验。 总之,【gourmet-svelte:美食网版】项目展示了如何利用Svelte框架结合HTML来构建一个功能完善的美食主题网站。通过学习这个项目,...
CSS3则提供了强大的样式控制和动画效果,让应用看起来更加美观且富有动态感。在Foresite iPad应用中,这些技术的结合使得应用界面既直观又现代,同时保持了高性能。 为了优化iPad上的用户体验,Foresite应用可能还...
6. API接口:为了与其他系统集成或扩展功能,BalloonGrapher可能提供了RESTful API,允许外部应用或服务访问其数据和控制某些操作。 7. 部署和监控:作为一款实时应用程序,BalloonGrapher可能需要在云服务器上运行...