2015第17周二

晚上没事学习了毫秒必争,前端网页性能最佳实践,把里面自己当前用到的但容易忽略的几点摘录下

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较多可以采用以下技巧。

1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件,将多个样式表文件捆绑成一个文件,以此来减少文件的下载次数。要不少现成的合并JS和CSS的工具

2. CSS Sprites: 就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。

3. Image Maps: 也是将多幅图拼在一起,然后通过坐标来控制显示导航。这里有个经典的例子,选中图片中的某个人就会将你带到不同的链接。

4. Inline images: 通过编码的字符串将图片内嵌到网页文本中。例如下面的inline image的显示效果为一个勾选的checkbox。

使用GET Ajax请求

浏览器在实现XMLHttpRequest POST的时候分成两步,先发header,然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据,而POST则是向服务器发送数据,所以我们使用Ajax请求数据的时候尽量通过GET来完成。

关于GET和POST的详细对比可以查看这里

避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。

浏览器如此实现也是根据RFC 3986 - Uniform Resource Identifiers标准,空的src被定义为当前页面。

所以注意我们的网页中是否存在这样的代码

straight HTML 
<img src="">

JavaScript 
var img = new Image(); 
img.src = "";

Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。Gzip比deflate更高效,主流服务器都有相应的压缩支持模块。

减少iframe数量

使用iframe要注意理解iframe的优缺点

优点

  • 可以用来加载速度较慢的内容,例如广告。
  • 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
  • 脚本可以并行下载

缺点

  • 即使iframe内容为空也消耗加载时间
  • 会阻止页面加载
  • 没有语义
时间: 2024-10-08 10:58:18

2015第17周二的相关文章

张珺 2015/07/17 个人文档

姓名 张珺 日期 信息楼南406,中蓝公寓蓝芳园D507,2015/07/17 主要工作及心得 今天,我们先去找老师对程序进行了检查,并讨论了关于报告编写的问题.针对老师指出的问题,以及老师提出的意见.建议,我们在回来后对程序进行了修改.我主要负责对程序界面中中文显示及界面标题的问题进行修改.此外,我继续进行了报告的编写工作 遇到的问题 界面显示.提示信息中缺乏中文信息 解决方法 按照老师要求修改界面和对话框

2015.11.17 新起点,出发。

今天注册了博客,要开始认真仔细的学习前端技术了.这个博客将作为我学习进度记录.学习笔记整理.心得体会整理等书写记录的工具. —希望苍天不负有心人 2015.11.17

任笑萱 2015/7/17 个人文档

姓名 任笑萱 日期 2015年7月17日 主要工作及心得 今天我们先去找老师探讨了一下关于报告的格式问题,老师给我们提出了一些意见,之后回来之后我对我数据库等等部分的报告进行了修改,之后把我之前测试的部分的报告给更改了,之后我对个人报告进行了编写,这部分的报告还是比较麻烦的,我还是写了很长一段时间,将自己的思想阐述清楚了. 又是编写报告的一天,感觉软件工程很大一部分都是报告的编写,真是需要耐心.细致的一项工作. 遇到的问题 1)         与老师探讨之后,发现报告某些部分不符合要求 解决方

2015第14周二

今天调试程序时发现自己犯了一个很弱智的错误,先把实体类保存到数据库中再修改它的某个属性,结果当然修改后的属性值没保存到数据库中,赶紧调整顺序后解决,之前写那端程序时太不小心了,惭愧.今天用sql语句更新一个列的值加1时发现总不成功,后来看该列值为null,用它做加法当然不行,然而sql语句也没报错误,后来把列默认值设为0后解决. 今天三月最后一天,2015第一个季度完了,第二个季度要更加努力进步.工作.生活.

2015第7周二技术学习

IE下使用jQuery重置iframe地址时内存泄露问题解决办法 页面中有个iframe: ? 1 2  <iframe src='a.html'></iframe> <button>测试IFRAME泄露</button> 其中a.html内容如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 3

2015.11.17

CommonJS CommonJs是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象. 例如: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // foobar.js //私有变量 var test = 123; //公有方法 function foobar () {     this.foo =

赵晓铮 2015/7/17 个人文档

姓名 赵晓铮 日期 2015年7月16日 主要工作及心得 今天,我们继续编写报告,我今天主要写的是详细设计和测试分析的经理部分. 遇到的问题 交于老师检查后,发现昨天写的报告少写了一些,格式不太对. 解决方法     将老师提出的问题记下来,进行相应的修改,并且将询问的结果运用到今天的报告中.

2015.7.17 第八课 课程重点(js语句:条件、循环)

1.条件语句: (1)比较操作符: ==:判断是否相等 !=:判断是否不相等 > :判断是否大于 >=:判断是否大于等于 < :判断是否小于 <=:判断是否小于等于 [例1] if(iNum1==iNum2) //如果iNum1与iNum2相等 { iNum3=iNum1; //将iNum1的值赋给iNum3 } else{  //否则 iNum3=iNum2;  //将iNum2的值赋给iNum3 } [补充]以上也可写作: iNum3 = iNum1==iNum2 ? iNum

2015第29周二AOP

1.问题:想要添加日志记录.性能监控.安全监测 2.最初解决方案 2.1.最初解决方案:在每个需要的类函数中重复写上面处理代. 缺点:太多重复代码,且紧耦合 2.2.抽象类进行共性设计,子类进行个性设计,此处不讲解,缺点一荣俱荣,一损俱损 2.3.使用装饰器模式/代理模式改进的解决方案 装饰器模式:动态地给一个对象添加一些额外的职责.就增加功能来说, 装饰器模式相比生成子类更为灵活. 代理模式:为其他对象提供一种代理以控制对这个对象的访问. 缺点:紧耦合,每个业务逻辑需要一个装饰器实现或代理 2