MyException - 我的异常网
当前位置:我的异常网» Web前端 » 前端开发要端

前端开发要端

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
前端开发要点

一.尽可能的减少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给出的优化规则。

 

 

 

 

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

文章评论

程序员和编码员之间的区别
程序员和编码员之间的区别
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
如何成为一名黑客
如何成为一名黑客
中美印日四国程序员比较
中美印日四国程序员比较
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的鄙视链
程序员的鄙视链
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
每天工作4小时的程序员
每天工作4小时的程序员
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
代码女神横空出世
代码女神横空出世
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
老程序员的下场
老程序员的下场
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
编程语言是女人
编程语言是女人
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
我是如何打败拖延症的
我是如何打败拖延症的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
鲜为人知的编程真相
鲜为人知的编程真相
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
那些争议最大的编程观点
那些争议最大的编程观点
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员都该阅读的书
程序员都该阅读的书
10个调试和排错的小建议
10个调试和排错的小建议
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
 程序员的样子
程序员的样子
一个程序员的时间管理
一个程序员的时间管理
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有