`

前端开发要点—Yahoo十四大军规

阅读更多

一.尽可能的减少HTTP请求数

        http请求:从客户端到服务器端的请求消息。包括消息首行中,对资源的请求方法、资源的标识符及使用的协议。

        简单地说,当你打开网页时,你所看到的文字、图片、多媒体等等,这一切内容,都是你从服务器获取的,每一个内容的获取,就是一个HTTP请求。



二.使用CDN(内容分发网络)

        CDN:内容分发网络。意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。

        简单地说,在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。



三.添加Expire/Cache-Control头

        Expire:expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地,在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求。

        CACHE-CONTROL:是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。



四.启动Gzip压缩   

 

五.将css放在页面最上面

        CSS:Cascading Style Sheets(层叠样式表单)

        为什么要将CSS放在页面的最上面呢?在IE下,如果将它放到网页内容中,它禁止了网页内容的顺序显示;Firefox虽不会禁止网页内容的显示,但它会待CSS加载后,会重画页面,导面页面出现闪烁。

 

六.将script放在页面最下面

        页面加载顺序:html->head->meta->title内容(网页标题)->style加载样式,解析样式->link加载外部样式表文件,解析外部样式表->script加载外部脚本文件,解析外部脚本文件,执行外部脚本->body->div->img加载外部图像文件,页面初始化完毕。

        将script放在页面最下面,会先将内容先呈现出来。

 

七.避免在CSS中使用Expressions

        CSS Expressions = CSS表达式

        CSS表达式在后台计算次数比我们想象的要多的多,它不仅在页面显示和缩放、页面滚动,甚至在移动鼠标时就要重新计算一次。

        示例代码:在你移动鼠标时,它会在input输入框中写入CSS Expressions计算了多少次。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Expression测试</title>
	<script type="text/javascript">
		var i=0;
		function scare() {
			i++;
			document.getElementById('run').value = i;
			return;
		}
	</script>
	<style type="text/css">
		ul a {width:expression(this.offsetWidth > 750 ? scare() : scare());}
	</style>
</head>
<body>
	当移动鼠标时,CSS Expression计算了<input id="run"/>次
	<ul>
		<li><a href="http://localhost:8088/t.html">aaa</a></li>
		<li><a href="http://localhost:8088/t.html">bbb</a></li>
		<li><a href="http://localhost:8088/t.html">ccc</a></li>
	</ul>
</body>
</html>

运行结果:

        当我们移动鼠标时,input框内的数字在不停的增加。这说明,当我们使用CSS Expressions时,在移动鼠标时,浏览器会不停的计算,这会严重影响浏览器的性能,影响用户的体验。


        注意:以上示例请在IE6、IE7下执行。

 

八.把JavaScript和CSS都放到外部文件中

1.单独提取的好处:

        a.提高了js和css的复用性

        b.减少页面体积

        c.提高了js和css的可维护性

2.写在页面内的好处:

        a.减少页面请求数

        b.提升页面渲染速度

3.是不是见到JS和CSS就提取出来呢?不是的,如下情况就没必要提取出来。

        a.只应用于一个页面

        b.不经常被访问到

        c.脚本和样式很少

 

3.是不是见到JS和CSS就提取出来呢?不是的,如下情况就没必要提取出来。

        a.只应用于一个页面

        b.不经常被访问到

        c.脚本和样式很少

 

九.减少DNS查询


        目前IE、Firefox、Chorme等浏览器都带有缓存,能自动减少DNS查询。但不同浏览器缓存时间不太一样,IE默认是30分钟,Firefox、Chorme是60s。

        当缓存时间长时,会减少DNS的重复查找 ,节省时间。

        当缓存时间短时,能及时的检测网站服务器的变化,保证正确性。

        在实际场景中,可根据自已网站的特点(多域还是单域),如是多域可将html文件、图片、js分别提出来,放到分别的域名下;单域则将html文件、图片、js等放在同一个服务器上;且如果采用多域的话,则需要考虑采用几个域名是最合适的。


 

十.压缩JavaScript和CSS

减少文件体积的方法:

1.去除不必要的空白符、格式符、注释符

2.简写方法名、参数名压缩JS脚本

JQuery1.11.0为例:


        所以,在正式上线项目前,将JavaScript和CSS都进行压缩,使线上版本是轻量级的,大幅提升网站性能。

 

十一.避免重定向

1.重定向:原始请求被重新转向到了其他请求。简单来讲,就是用户访问页面a,被重新指向了页面b。

2.重定向状态码:

        301:Moved Permanently被移动到了另外的位置,表示永久重定向

        302:Found用户请求的页面被找到了,但不在原始位置,表示临时重定向

搜索引擎会定期爬网,301重定向能智能分析,会记录新地址,删除老地址;302则会找旧地址,再跳到新地址。

3.为什么避免重定向?


        用户多了获取新地址的过程,增加了浏览器到服务器的访问次数。因此应避免使用重定向。

 

十二.移除重复的脚本

实例:

test.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<input type="text" id="test" value=""/>
<script type="text/javascript">
	var number = 0;
</script>
<script type="text/javascript" src="js.js"></script>
<!-- 无意中多引用了一次 -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>

js.js

number++;
document.getElementById('test').value = number;

运行结果:2

 

十三.配置实体标签

        ETag:Entity Tag(实体标签),属于HTTP协议,受web服务支持。

        它是使用特殊的字符串来标识某个请求资源版本。



十四.使AJAX缓存

全称:Asynchronous JavaScript and XML,异步的JavaScript和XML,局部请求。

两种方法:

        POST:每次都执行,不被缓存

        GET:同一地址不重复执行,可以被缓存

POST与GET的区别:



PS:Yslow网站性能优化工具

Yslow插件能对网站进行分析,给一些建议、一些规则,一步一步的优化自已的网站。

注意:在安装Yslow时,首先要安装好Firebug工具。

1.测试规则

(v2)=22个测试规则

 (v1)=13个测试规则

Small Site or Blog=14个测试规则

 

2.Grade:等级视图,网页评分A->F

如http://www.imooc.com/的测试结果为:C

 
3.优化规则

如上红框出来的“Make fewer HTTP requests”、“Avoid empty src or href”等就是Yslow给出的优化规则。

优化规则里面的子标签还对你优化规则进行了分类,如CONTENT、COOKIE、CSS、IMAGES、JAVASCRIPT、SERVER。

 

4.Component视图

组件视图,检视各个元素占用空间大小。

 

5.Statistics

统计信息视图,与Components相似。图形表示。

 

6.Tools

工具集,列出一个比较好的工具优化网站。


JSLint:检验JavaScript正确性

ALLJS:展示网页中用的JS,不仅包括外联JS,还包括内联JS(在什区域)

All JS Beautified:将js以可读的方式展示

ALL JS Minified:删除换行、空格等,压缩JS

ALL CSS:展示网页中用的CSS

YUI CSS Compressor:压缩CSS

ALL Smush.it TM:优化图片的功能,图片在线优化网站(YAHOO服务于图片优化的网站,不降低图片质量像素,减少图片体积)


Printable View:将分析打印成报告

 

文章来源:http://www.imooc.com/learn/50

  • 大小: 15.7 KB
  • 大小: 24.3 KB
  • 大小: 10.4 KB
  • 大小: 49.1 KB
  • 大小: 19.2 KB
  • 大小: 29 KB
  • 大小: 29.4 KB
  • 大小: 10.4 KB
  • 大小: 22.5 KB
  • 大小: 91.6 KB
  • 大小: 109.5 KB
  • 大小: 68.2 KB
  • 大小: 103.6 KB
  • 大小: 25.1 KB
分享到:
评论

相关推荐

    地理学十四大原理.doc

    地理学十四大原理.doc

    企业十四大经营管理工具.doc

    企业十四大经营管理工具.doc

    QC十四大手法的解决问题

    **QC十四大手法** QC(Quality Control)十四大手法是质量管理中常用的一套工具和方法,主要用于发现问题、分析问题和解决问题,从而提升产品质量和工作效率。这些手法源自于日本的全面质量管理(Total Quality ...

    初中语文文学讨论现当代文学中国历史上十四大圣人

    初中语文文学讨论现当代文学中国历史上十四大圣人

    零售店铺十四大数据分析指标.doc

    总结,这些零售店铺的十四大数据分析指标涵盖了店铺运营的各个方面,包括销售业绩、货品管理、顾客行为、员工效率等,通过深入分析这些指标,店铺管理者可以更准确地把握市场动态,制定有效的经营策略,提高店铺的...

    简单介绍PCB的十四大重要特征

    以下是对PCB十四大重要特征的详细介绍: 1. 孔壁铜厚:25微米的孔壁铜厚可以增强PCB的可靠性,尤其是提高Z轴方向的耐膨胀能力,这对于在温度变化较大或高频应用中的PCB尤为重要。 2. 无焊接修理或断路补线修理:...

    零售店铺十四大数据分析指标.pdf

    以下是关于零售店铺十四大数据分析指标的详细解释: 1. **营业额**:这是衡量店铺生意好坏的关键指标,通过对每日、每周的营业额进行追踪和比较,可以识别销售趋势,调整货品结构、商品陈列和促销活动。 2. **区域...

    房地产经营管理2房地产开发.pptx

    【房地产开发概述】 房地产开发是指在依法取得的土地使用权的国有土地上进行基础设施建设和房屋建设的行为。根据开发内容,可以分为纵向的两个方面:土地开发,主要涉及基础设施建设;房屋开发,涉及具体房屋的建设...

    网络工程师必须懂的十四大专业术语.doc

    【网络工程师必须懂的十四大专业术语】 1. 多路由协议:多路由协议用于不同路由协议之间的信息交换,如当需要将一个网络区域的信息传递给使用不同路由协议的另一个区域时。路由再分配也是实现信息交换的方式。不...

    ack_QC十四大手法+G8D+......(新鲜出炉).ppt

    《QC十四大手法与G8D问题解决流程详解》 在质量管理和持续改进的过程中,有效的问题解决策略至关重要。其中,QC十四大手法和G8D(8D)问题解决流程是两种常用且实用的方法。这两种工具帮助企业系统地识别、分析并...

    盘点高可靠性PCB的十四大重要特征

    以下是对高可靠性PCB的十四大重要特征的详细解读: 1. 孔壁铜厚:孔壁铜厚至少达到25微米,有助于增强电路板的z轴耐膨胀能力,从而提高整体的可靠性。 2. 无焊接修理或断路补线修理:避免使用焊接修理或断路补线,...

    大型门户网站实现的十四大技术小结

    ### 大型门户网站实现的十四大技术要点解析 #### 一、全文搜索 全文搜索是大型网站提升用户体验的重要手段之一。对于大型门户站点而言,每天都有海量的信息更新,如何让用户快速找到所需的内容变得至关重要。目前...

    新课标2020高考物理二轮复习题型技巧方法篇一考前必纠的十四大易错易混点练习含解析

    【知识点详解】 在高中物理的学习过程中,特别是在高考复习阶段,理解和掌握各类题型的解题技巧至关重要。本篇文章主要关注的是高考物理复习中常见的两类易错易混问题,并提供了具体的练习和解析,帮助考生在考前...

    研发能力成熟度评估.pdf

    从传统的瀑布式开发到敏捷开发,再到现代的DevOps模式,每一次变革都反映了对效率、质量以及市场响应速度追求的进步。 #### 过程是核心竞争力 研发过程的质量直接影响着最终产品的竞争力。高效的研发流程能够确保...

Global site tag (gtag.js) - Google Analytics