14条规则摘自<High Performance Web Sites>,本文地址
1.减少Http请求
- 使用图片地图
- 使用CSS Sprites
- 合并JS和CSS文件
这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢
2.使用CDN(内容发布网络):当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度
3.添加http Expires头:为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求
- 如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求
另外一个有点类似的概念是条件Get请求,某些资源比如JS文件,如果我们总是需要最新的JS文件,那么可以设置条件Get请求去服务端验证本地的资源是否需要更新.这种情况下浏览器会向Server发送一个http请求,如果资源没有更新,会返回一个http 304的response,如果资源跟新,则重新下载资源:
条件Get请求每次都会产生一个304的请求
4.压缩组件:在Server端对Response资源进行压缩再传给浏览器,一般使用GZIP
5.将CSS放再顶部: 能加快页面内容显示,并且能避免页面产生白屏
6.将JS放在底部
- JS会阻塞对其后面内容的呈现
- JS会阻塞对其后面内容的下载
7.避免CSS表达式
8.将JS,CSS放在外部文件中
9.通过使用Keep-Alive和较少的域名来减少DNS查找
10.精简JS和CSS文件
11.寻找一种避免重定向的方法
12.移除重复的脚本
13.配置Etag
14.确保Ajax请求遵守性能知道,必要时候应具备长久的expires头
我们可以使用Yahoo的Yslow firefox插件来检查网站的前端性能.
最后,我们随便打开一个淘宝宝贝页面,用Fiddler查看一下,发现淘宝至少做了如下优化:
- 大规模使用CDN,图片,jS,css互相之间都使用了不同的域名.单是图片服务器,下面又使用了很多不同的服务器,比如img01.taobaocdn.com等等
- 当第二次浏览同一宝贝的时候,产生大量的Http 304请求.这样既能保证获取最新的资源,又能尽量减少数据传输
- CSS,JS文件大都精简过
- 对于资源类的东西比如图片,设置为不受保护.也就是说不需要登录依然可以直接访问的,这样就避免设置/读取cookie,达到节省网络资源的目的
唯一一点没有优化的是图片,服务端返回的图片都是没有Gzip压缩的,或许是为了减少服务器的压力
相关推荐
前端性能优化探索 前端性能优化是当前互联网开发中的一个重要话题。随着互联网技术的快速发展,Web前端技术也逐渐成为了互联网开发的重要一环。然而,在如今这个追求极致体验的时代,我们不仅要实现业务需求,更...
在现代Web开发中,前端性能优化是至关重要的,它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能,通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具,这是一个非常...
对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。...本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S系统前端性能优化的常见规则和有效方法。
前端性能优化是非常重要的一方面,好的性能优化可以提高网站的用户体验,而坏的性能优化则可能会带来麻烦和规则太多的问题。在这个知识点总结中,我们将介绍八个方面的前端性能优化知识点。 1. 减少 HTTP 请求 ...
这份"WEB前端性能优化资料"涵盖了前端优化的重要原则、实用工具以及如何进行有效测试的讲解,旨在帮助开发者实现更高效的网页设计。 一、前端性能优化规则 1. 减少HTTP请求:每个HTTP请求都会增加页面加载时间,...
前端性能优化也是不可忽视的一环,包括减少HTTP请求、压缩资源、利用缓存等策略。"web"中的"manifest.json"可能是应用的Web App Manifest文件,用于配置离线模式下的PWA(渐进式Web应用)。 最后,无障碍性(Web ...
9. **调试技巧**:学会使用浏览器的开发者工具进行错误排查和性能优化。 10. **实际项目实践**:通过创建简单的静态网页或参与小型项目,将理论知识付诸实践,巩固学习成果。 这个压缩包中的资源可能包含了以上...
同时,良好的用户体验设计也是不可忽视的,包括易用性、可访问性和性能优化等。 总的来说,这个压缩包提供的答案可以帮助学生巩固Web前端网页制作的关键概念和技术,通过实践应用深化理解和技能掌握,为他们未来的...
在“web前端开发计划.rar”这个压缩包中,我们可以预见到一份详尽的Web前端开发指南,涵盖了从项目启动到最终实现的整个流程。这份资料不仅教导开发者如何规划和实施Web开发项目,还强调了核心的技术栈,包括HTML、...
在实际开发过程中,还需要考虑到性能优化,如使用延迟加载图片、压缩CSS和JavaScript等技术,以确保网站在各种设备上都能快速加载。此外,进行跨浏览器测试也是必不可少的,以确保网站在不同浏览器中都能正常工作。 ...
13. 网页性能优化:提到了减少图片资源大小、合并CSS和JavaScript文件等性能优化技巧。 14. JavaScript基础语法:文档中简要介绍了JavaScript的基本语法,包括变量声明、函数定义、数据类型(如number、function、...
在IT领域,Web前端开发是构建...如果你对这个主题持续关注并不断探索,还可以进一步了解JavaScript、jQuery、Vue.js、React.js等前端框架,以及Web性能优化、响应式设计等高级话题,从而成为一位全能的Web前端开发者。
【尚学堂】全新2022版WEB前端HTML5.zip是一个专门针对Web前端开发的教程压缩包,尤其聚焦于HTML5技术。HTML5是超文本标记语言(HTML)的最新版本,它在原有的HTML4基础上引入了众多新的特性和改进,以适应现代互联网...
CSS代码优化则涉及减少不必要的样式规则和避免使用复杂的CSS选择器,同时合理地组织和管理样式文件,以提高页面的渲染效率和性能。 知识点三:前端资源优化 前端资源优化主要包括图片资源的优化和代码资源的压缩...
4. 性能优化:前端性能优化旨在缩短网页加载时间、提高运行效率。这包括图片压缩、使用CDN、最小化和合并CSS和JavaScript文件、异步加载资源等技术。 5. 语义化HTML:使用正确的HTML标签来增强页面的可访问性和搜索...
### Web前端开发规范知识点概述 #### 一、引言 Web前端开发规范是现代软件开发过程中不可或缺的一部分,它不仅能够帮助开发团队建立一套统一的工作流程,还能提高项目的整体质量和开发效率。本文档将详细介绍Web...
《Web前端设计与开发》这本书全面涵盖了Web前端开发的核心技术和实践方法,旨在帮助读者深入理解和掌握前端开发的各个环节。从HTML5开始,我们探讨这个现代Web标准如何改变了网页的构建方式,以及它带来的强大功能和...
2. **性能优化**:通过分析请求的响应时间、大小等,可以找出性能瓶颈,优化页面加载速度。 3. **安全检查**:检测是否存在敏感信息泄露,如API密钥、用户信息等,确保数据安全。 4. **学习和研究**:对于新API或...