转:WEB前端性能优化规则
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前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
- WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
随机推荐
- HTML学习-2标记标签-1
大致可以分为以下6类学习: 1.通用标签. 2.常用标签. 3.表格标签. 4.表单元素. 5.框架. 6.其他. 一.通用标签.及属性 1.<body></body>标签,主 ...
- 现学现卖——VS2013 C#测试
VS2013 C#测试 首先安装Unit Test Generator.方法为:工具->扩展和更新->联机->搜索“Unit Test Generator”,图标为装有蓝色液体的小试 ...
- JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...
- Vue router 的使用--初级
在说 VueRouter 之前,首先要弄明白vueRouter 是干什么的,有什么用 说出来其实很简单,就是一个模板替换的问题,当路由改变的时候,把和路由相关的模板显示出来,就是这么简单.但是,当我们 ...
- Servlet基本_サーブレットのライフサイクル、スレッドセーフ
1.サーブレットのライフサイクル初期化時 ⇒ init() [初回リクエスト時] ↓リクエスト時 ⇒service() ⇒doGet() [Httpリクエストメソッドにより振り分け] 或は⇒doPos ...
- NGUI 背景图自适应
背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:
- linux 3.10 一次softlock排查
x86架构.一个同事分析的crash,我在他基础上再次协助分析,也没有获得进展,只是记录一下分析过程.记录是指备忘,万一有人解决过,也好给我们点帮助. 有一次软锁,大多数cpu被锁,log中第一个认为 ...
- Git设置/取消代理
设置代理 git config --global http.proxy http://proxy.com:1234 git config --global https.proxy http://pro ...
- Javascript中构造函数的返回值问题和new对象的过程
首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...
- Oracle 导入大量数据
环境是这样的: 需要导入大量数据到Oracle,目前Oracle已建立索引和触发器了,导入的数据是树型结构,需要关联. 采用的方法是: 删除以前数据库的索引和触发器,用OracleBulkCopy批量 ...