1)减少一个页面访问所产生的http连接次数
对于第一次访问你网站的用户,页面所产生的http连接次数是影响性能的一个关键瓶颈。
对策:
- 尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。
- 使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术;使用Inline images将css图片捆绑到网页中。
- 尽量合并js和css文件,减少独立文件个数。
2) 使用gzip压缩网页内容
使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60%)。主流的web服务器都支持或提供gzip压缩,如果使用apache服务器,只需要在配置文件中开启mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩。
3)将CSS放在页面顶端,JS文件放在页面底端
CSS的引用要放在html的头部header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来。不过要注意,一些大量使用js的页面,可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。
4)使JS文件内容最小化
具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等。在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。
5)尽量减少外部脚本的使用,减少DNS查询时间
不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容(css,js)放在其他的子域名下(如 static.xxx.com)会有利于提高浏览器并行下载网页内容的能力。
对于您网站的经常性访问用户,主要的优化思路就是最大限度利用用户浏览器的cache来减少服务器的开销。
1)在header中添加过期时间(Expires Header)
在header中给静态内容添加一个较长的过期时间,这样可以使用户今后访问只读取缓存中的文件,而不会与服务器产生任何的交互。不过这样做也存在一些问 题,当图片、CSS和js文件更新时,用户如果不刷新浏览器,就无法获得此更新。这样,我们在对图片、css和js文件修改时,必须要进行重命名,才能保 证用户访问到最新的内容。这可能会给开发造成不小的麻烦,因为这些文件可能被站点中的许多文件所引用。flickr提出的解决办法是通过url rewrite使不同版本号的URL事实上指向同一个文件,这是一个聪明的办法,因为url级别的操作效率是很高的,可以给开发过程提供不少便利。
2)将css和js文件放在独立外部文件中引用
将css和js文件放在独立文件中,这样它们会被单独缓存起来,在访问其他页面时可以从浏览器的高速缓存中直接读取。一些网站的首页可能是例外的,这些首页的自身浏览可能并不大,但却是用户访问网站的第一印象以及导向到其他页面的起点,也可能这些页面本身使用了大量的ajax局部刷新及技术,这时可以将 css和js文件直接写在页面中。
3)去掉重复的脚本
在IE中,包含重复的js脚本会导致浏览器的缓存不被使用,仔细检查一下你的程序,去掉重复引用的脚本应该不是一件很难的事情。
4)避免重定向的发生
除了在header中人为的重定向之外,网页重定向常在不经意间发生,被重定向的内容将不会使用浏览器的缓存。比如用户在访问www.xxx.com,服 务器会通过301转向到www.xxx.com/,在后面加了一个“/”。如果服务器的配置不好,这也会给服务器带来额外的负担。通过配置apache的 alias或使用mod_rewrite模块等方法,可以避免不必要的重定向。
做完了上述的优化,可以试着用yslow测试一下网页的性能评分,一般都可以达到70分以上了。
分享到:
相关推荐
在前端开发领域,性能...以上这些方法都是前端性能优化的关键点,通过综合运用这些策略,可以显著提升Web应用的性能,提供更优秀的用户体验。在实践中,开发者需要根据项目具体需求和用户行为数据进行有针对性的优化。
本篇内容将深入探讨Web前端性能优化的思路与学习方法,结合WebQQ、QQ互联、QQ商家等大型项目研发中的实践经验,提供一套系统的优化框架。 首先,前端性能优化可以从以下几个层面展开: 1. 网络层面优化:优化网络...
在这份文档中,郭碧青分享了关于Web前端性能优化的思路与方法。首先,他提到了性能优化的基本原则,即在不牺牲用户体验的前提下,尽可能地提升页面加载速度和运行效率。他强调了前端资源的压缩和合并,以便减少HTTP...
具体内容包括:基于用户体验的性能优化要素、前端性能优化实战、网站性能分析、服务端性能优化、TCP优化、DNS优化、CDN优化、大型网站性能监控体系、大型网站容量评估、高性能系统架构模式、大促保障体系、数据分析...
前端性能优化对于提高用户体验至关重要。以下是一些常见的前端性能优化策略: **2.1 延迟渲染** - **2.1.1 挑战和困难**:某些情况下,由于页面内容过多或资源过大,页面加载速度变慢。 - **2.1.2 解决方案**:...
"前端性能优化全面汇总图.zip" 提供了一个综合性的视角,让我们一起探讨其中涉及的多个知识点。 1. **延迟加载(Lazy Loading)**:非关键内容如图片、视频等可以采用延迟加载策略,即在用户滚动到相关内容时才开始...
美团买菜iOS工程师王梓童分享了前端性能优化的实践经验,包括性能优化思路、措施和未来规划。 一、前端页面加载性能优化思路 前端页面加载性能优化的思路包括多个方面: 1. 首屏优化:首屏时间是用户体验的关键...
本实战指南将探讨从前端网络到后端大促的全链路性能优化策略,旨在提升网站的整体效率。 前端网络性能优化主要关注减少页面加载时间。CDN(Content Delivery Network)是一个关键的工具,它通过在全球部署多个节点,...
前端性能优化是指通过各种技术和策略提高网站或Web应用的加载速度、响应速度以及整体用户体验的过程。良好的前端性能不仅能够提升用户满意度,还能提高搜索引擎排名,增加转化率。 ### 二、性能分析 #### 2.1 性能...
本资源"前端性能优化:掌握解决方案.zip"提供了一种系统性学习和实践前端性能优化的方法。下面,我们将详细探讨这个主题,涵盖多个关键知识点。 首先,前端性能优化的基础在于理解网页加载流程。当用户访问一个页面...
在现代Web开发中,前端性能优化是至关重要的,它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能,通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具,这是一个非常...
前端性能优化是指通过对网站或Web应用的前端部分进行改进,以提升用户体验的过程。优秀的前端性能优化能够显著提高网页加载速度、减少资源消耗、增强用户交互体验,进而提升整体的业务表现。本指南将深入探讨几个...
Web前端性能优化是提高网页加载速度和用户体验的关键因素。Yahoo! 的 Exceptional Performance team 提出了一系列不断更新的优化策略,从最初的13条发展到现在的34条,涵盖了多个角度,包括内容、服务器、Cookie、...
前端性能优化是非常重要的一方面,好的性能优化可以提高网站的用户体验,而坏的性能优化则可能会带来麻烦和规则太多的问题。在这个知识点总结中,我们将介绍八个方面的前端性能优化知识点。 1. 减少 HTTP 请求 ...
Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化
【web前端性能优化】是提升网站用户体验的关键环节。在当今互联网环境下,网页的加载速度直接影响着用户的满意度和网站的留存率。以下是一些基础且实用的前端优化策略: 1. **合并CSS和JavaScript文件**:减少HTTP...
本文将深入探讨从前端网络CDN到后端大促的全链路性能优化策略,以提高网站的加载速度、响应时间和整体效率。 前端网络CDN(内容分发网络)是性能优化的第一步。CDN通过在全球部署边缘节点,将网站内容缓存到离用户...