信息技术专题讲座1

网站优化--WEB前端性能优化
27. 使用< link >而非 @import 在IE中使用@import就和在页面底部用< link >一样，我们前面说要把< link >放顶部 的。 28. 避免过滤器的使用 如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下
Web前端技术—HTML5
HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标
HTML5标准。
在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5 的语法，要不就是仅使用JavaScript引擎。 HTML5手机应用的最大优势就是可以在网页上直接调试和修改。 HTML5 中国 http://www.html5cn.org/
5.把CSS放在页面最上面 浏览器会在下载完全部CSS之后才对整个页面进行渲染，因此最好的做法是将 CSS放在页面最上面，让浏览器尽快下载CSS。 6.把Javascript放在页面最下面 浏览器在加载Javascript后立即执行，有时会阻塞整个页面，造成页面显示 缓慢，因此Javascript最好放在页面最下面，但如果页面解析时就需要用到 Javascript,这时放在底部就不合适了。 7.避免CSS 表达式 CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动 一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个
使用者 的状态
梅特卡夫定律 (Metcalfe’s Law)：
感官体验 的改善
系统性 能
网络价值同网 络用户数量的 平方成正比。
交互体验 的改善
环境（状 况）
用户最基本的需求： 速度和稳定性 迭代式发展，周期相对短 Always On line
目标信息 要醒目而 亲近并保 持更新
系统响应时间
打开一个网站

网站优化--WEB前端性能优化


31. 不要在HTML中缩放图片
图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以 后，本身的KB数是不会减少的。 32. 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。 33. 保证组件在25K以下 iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。 34. 将组件打包进一个多部分的文档中 就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支 持，iPhone就不支持。
信息技术
专题讲座
网站架构
中小网站（LAMP技术）
Linux+Apache+MySQL+PHP
大型网站（从中小网站发展而来）
高流量、高并发、高可用、高性能、伸缩性、可扩展、安全 NoSQL=not only SQL 不仅仅是SQL 泛指非关系型数据库，目前应用最广泛的是Apache HBase
网站优化—面包屑导航作用
1、让用户了解目前所处位置，以及当前页面在整个 网站中的位置。 2、体现了网站的架构层级，能够帮助用户快速学习 和了解网站内容和组织方式，从而形成很 好的位置 感。 3、提供返回各个层级的快速入口，方便用户操作。 4、Google已经将面包屑导航整合到搜索结果里面， 因此优化面包屑导航每个层级的名称， 多使用关键 字，都可以优化SEO。
网站架构
常用的网站架构：
Linux + Apache + PHP + MySQL Linux + Apache + Java (WebSphere) + Oracle Windows Server 2003/2008 + IIS + C#/ASP.NET + 数据库MsSQL 软件下载： Apache: http://www.apache.org/ PHP: http://php.net/ MySQL : http://www.mysql.com/



Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。
网站优化--WEB前端性能优化


18. 预加载组件
提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的 响应，参见Google首页上的CSS sprites应用。

19. 减少DOM元素数量 复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是 好的前端的必备条件。
网站优化--WEB前端性能优化

22. 不要出现404页面 站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗 服务器资源。
23. 减少Cookie传输 一方面，Cookie包含在每次的请求和响应中，太大的Cookie会严重影响数据传输，尽量 减少Cookie中传输的数据量，另一方面，对于某些静态资源的访问，如CSS,Script等， 发送Cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送 Cookie,减少Cookie传输的次数。 24. 对组件使用无Cookie的域名 对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件 式一个好方法，或者也可以在Cookie中只存放带www的域名。 25. 减少DOM的访问次数 JS访问DOM是很慢的，尽量不要用JS来设置页面布局。 26. 开发灵活的事件处理句柄 DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄
网站优化--WEB前端性能优化

1.减少HTTP请求 HTTP协议是无状态的应用层协议。意味着每次HTTP请求都需要建立通信链路、进行数据传输，而在服务器 端，每个HTTP都需要启动独立的线程去处理，这样通信和服务的开销都很昂贵，减少HTTP请求的数目可有 效提高访问性能。 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多 个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，通过CSS 偏移响应鼠标点击操作，构造不同的URL。 2.利用CDN技术 CDN （Content Distribute Network内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离 用户最近的地方，使用户以最快速度获取数据。 由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第 一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返 回响应，加快用户访问速度，减少数据中心负载压力。 CDN能够缓存的一般是静态资源，如图片、文件、CSS、Script脚本、静态网页等，但是这些文件的访问 频率很高，将其缓存在CDN可极大改善网页的打开速度。 3.使用浏览器缓存 对一个网站而言，静态资源文件的更新频率较低，而这些文件又几乎是每次HTTP请求需要的，如果将这些 文件缓存在浏览器中，可以极好的改善性能，通过设置HTTP头中Cache-Control和Expires的属性， 可以设定浏览器缓存的时间。使用此策略时，应采用逐量更新的方法
WEB前端技术
WEB前端技术的范围 编程语言/技术（HTML，JavaScript，CSS等） 跨浏览器兼容性/支持（JS Framework，CSS Library） 网络传输性能（并行下载，带宽利用率） 浏览器渲染时间/性能 （TTI即用户可交互前等待时间，JS执行性能）
用户体验（主观）
影响因素 优化方法

的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。
29. 优化图片 将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图
片以达到优化效果。
30. 优化CSS Sprites 在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小 图片本身的大小及提高页面图片显示速度。

20. 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面
说到的DNS查找浪费。

21. 减少iframe数量 需要更有效的利用 ifames。 iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本 iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload
网站优化--WEB前端性能优化

8.将JS和CSS外链 前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我 就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的 网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！
9. 减少DNS查找 貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。 10.减小JS和CSS的体积 写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩 写方式等等，当然也有不少工具也能够帮你实现这一点。 11.避免重定向 再写入链接时，虽然”http://www. xx. com”和”http://www. xx. com/” 仅 有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后 进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者 DirectorySlash解决。
百度文库


网站优化--WEB前端性能优化


12. 删除重复脚本
重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。 13. 配置ETags 搞不清楚咋回事，总之我是在. htaccess里把它删除了。 14. 缓存Ajax Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高 效率。 15. 尽早的释放缓冲 当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在 head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提 高效率。 16. 用GET方式进行AJAX请求

网站优化--WEB前端性能优化
4.启用压缩 在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输 的数据量，文本文件的压缩效率可达80%以上，因此html,css,javascript 文件使用Gzip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的 压力，在通信带宽良好，服务器资源不足的情况下要权衡考虑。
几秒 十几毫 秒
在数据库中查询一条记 录（有索引）
1微秒
0.5毫秒
网络传输2KB数据
从远程分布式缓存 Redis读取一个数据
网站优化—面包屑导航
面包屑导航其实就是目录结构、位置导航，像：主分类>一级 分类>二级分类>三 级分类>……>最终内容页面
在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这 是一种“历史记录”的应用方式，目的是帮助你追溯来路，因而 它应该是一种线性的导航方式。 在网页的应用中，“追溯来路”这件事浏览器已 经做得足够好了， 所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素， 也就是我们经常看到的“主分类>一级分类>二级分类>三 级分 类>……>最终内容页面”这样的方式。但是一般正常的来讲目 录结构由3层结构组成。分别是首页>栏目页>内容页。合理的 构建 目录结构可以让用户随时随地的找到自己所在的位置又能 保证栏目分类后的各个栏目的权重不至于太分散。同时在许多 关于网站用户使用体验的调查报告中也得出超 过3次点击访客 还没有找到需要的信息，访客就很大的可能性会离开网站。所 以，3层目录结构也是浏览体验的需要。