`
snoopy7713
  • 浏览: 1148905 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量:0
社区版块
存档分类
最新评论

让网站访问速度飞起来(前端篇)

阅读更多

 帖子里很多坛友说到我的网站页面打开速度飞快,闪到了自己的眼睛 ,今天再发一帖说下自己的前端处理经验。



       说到前端,就不得不提 YSLOW ,Page Speed这些个大牛级的插件,这两个东西都可以直接装在firebug上。

Page Speed还提供了在线版。可以先用这些东西分析一下页面,把 High priority 的内容做到就差不多了。

本人经验如下:

 

首先,最重要的是请求数。

     尽可能的减少请求。如何减少,就是合并。这里有个合并图片的技巧有 css sprite,通过css定位,合并多个背景图。剩下的多个js能合并的就合并,css类似。

    请求实在没法减少的时候肿么办?利用浏览器并发。也就是多域名资源分布。大致原理是因为浏览器对单一域名并发下载有限制(不同浏览器数字不同),所以为了让浏览器一次下载更多资源,把内容分布到多个二级域名。

本人网站暂时用了三个 www img 和 img0。 www 就是下载文档,img是js、css和css背景图,img0就是电影图片。

 

 

其次是缓存。

     要充分利用浏览器本身的缓存策略。让用户打开过一次页面之后,访问其余页面更快,再次访问秒杀。具体HTTP协议的缓存策略这里就不展开,只说一下我的网站配置,Nginx版

 

 

Nginx代码  收藏代码
  1. location ~ .*\.(js|css|swf)$ {  
  2.         expires      60d;  
  3. }  
  4. location ~ .*\.(gif|jpg|jpeg|png|bmp|ico)$ {  
  5.         #valid_referers blocked *.fqxn.com;  
  6.         #if ($invalid_referer) {  
  7.                 #rewrite ^ http://www.fqxn.com/403 .jpg last;  
  8.         #}  
  9.         expires      8d;  
  10. }  
 

 

加了过期时间之后,普通链接点击(在过期时间内)就不会再发起新的请求,直接使用本地缓存。关于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配置压缩

 

 

Nginx代码  收藏代码
  1. gzip  on;  
  2. gzip_min_length 1024 ;  
  3. 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

 


 

 

分享到:
评论

相关推荐

    让你页面速度飞起来 Web前端性能优化(视频教程+ppt)

    - **预渲染**:利用`<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. **...

    飞行预定系统:包含JSP代码

    系统可能采用缓存策略来减少数据库查询,使用连接池管理数据库连接,或者优化SQL查询以提高响应速度。同时,负载均衡和集群技术也可能用于应对高并发访问,保证系统的稳定性和可用性。 总的来说,飞行预定系统是一...

    面试考点全面总结(自己总结的)1

    这种方式加载速度较慢,因为它需要等待外部文件完全加载才能继续执行。 - 修改样式时涉及到“读”和“写”的概念。“读”指的是获取元素的当前样式,“写”则是更改样式。更改样式会导致重排或重绘,从而影响页面的...

    在线商城系统参考论文

    《在线商城系统参考论文》是一份集合了11篇与计算机专业毕业设计相关的网上商城论文资源,旨在为学生们提供丰富的毕业论文写作素材和研究思路。这些论文深入探讨了在线商城系统的构建、运营、安全以及用户体验等多个...

    html5 情人节送花动画场景

    9. **JavaScript库和框架**:为了简化开发和优化性能,开发者可能使用了像jQuery、GreenSock(GSAP)这样的JavaScript库,或React、Vue等前端框架来管理状态和组件。 10. **优化与性能**:为了提供流畅的用户体验,...

    gourmet-svelte:美食网版

    CSS(层叠样式表)也可能被用于定义界面样式,使网站看起来美观且符合用户体验。 总之,【gourmet-svelte:美食网版】项目展示了如何利用Svelte框架结合HTML来构建一个功能完善的美食主题网站。通过学习这个项目,...

    ForesiteiPadApplication:Foresite iPad应用程序

    CSS3则提供了强大的样式控制和动画效果,让应用看起来更加美观且富有动态感。在Foresite iPad应用中,这些技术的结合使得应用界面既直观又现代,同时保持了高性能。 为了优化iPad上的用户体验,Foresite应用可能还...

    BalloonGrapher:从DR3现场直播天气气球进行现场直播时使用的应用程序

    6. API接口:为了与其他系统集成或扩展功能,BalloonGrapher可能提供了RESTful API,允许外部应用或服务访问其数据和控制某些操作。 7. 部署和监控:作为一款实时应用程序,BalloonGrapher可能需要在云服务器上运行...

Global site tag (gtag.js) - Google Analytics