2013年4月12日

规则8 使用外部JavaScript和CSS

摘要: 1. 内联 VS 外置 a. 纯粹而言,内联快点,因为内联的组件http请求少,虽然合一并行下载组件,但总之外置要慢; b. 然而由于JavaScript和CSS外部文件可以被缓存,HTML文档的大小减小,而且不会增加HTTP请求的数量; c. 比较依赖于页面查看(一次会话查看次数和查看周期)、空缓存VS完整缓存、组件重用。2. 组件重用---JavaScript和CSS作为外部文件可以被组件重用 a. 为每个页面提供一组分离的外部文件---每个页面都要强制用户使用另外一组外部组件并产生HTTP请求;(一般一次会话只访问网站一个页面) b. 创建一个单独的、联合所有的JavaScri... 阅读全文

posted @ 2013-04-12 22:37 BigPalm 阅读(253) 评论(0) 推荐(0) 编辑

规则7 避免CSS表达式

摘要: 1. CSS表达式: CSS expressions only work in Internet Explorer background-color: expression((new Date()).getHours()%2 ?"#B8D4FF" :"#F08A00"); expression方法接受一个JavaScript表达式,CSS属性将被设置为对js表达式进行求值得结果。 expression被其他浏览器忽略,但却是IE浏览器创建跨浏览器有效方法。 IE不支持min-width, 可以这样: width: expression(document. 阅读全文

posted @ 2013-04-12 20:54 BigPalm 阅读(146) 评论(0) 推荐(0) 编辑

规则6 将脚本放在底部

摘要: 1. 脚本下载时,将阻塞 后面内容的呈现 和 后面组件的下载 。因为脚本可能会使用document.write来修改页面内容,因此浏览器会等待,以确保页面能恰当地布局;还有一个原因是确保脚本的执行顺序。2. 并行下载 HTTP1.1 建议浏览器从每个主机名并行的下载两个组件,IE和Firefox都遵守这一建议,但可以修改浏览器配置; 也可以通过使用CNAME(DNS别名)来讲组件分别放到多个主机名中,Yahoo!研究表明,使用2个主机名比使用1,4,或10和主机名性能更好; 脚本下载会阻塞并行下载和页面呈现,执行时会阻塞页面呈现。3. 最佳情况:将脚本放在底部 defer属性指定不需要... 阅读全文

posted @ 2013-04-12 19:12 BigPalm 阅读(175) 评论(0) 推荐(0) 编辑

规则5 将样式表放在顶部

摘要: 1. 组件(图片、样式表、脚本等等)是呈现页面所必须的,组件通常是按照在文档出现的顺序下载的。2. 样式表在页面中的位置并不影响下载时间,但是会影响页面的呈现。 如果样式表仍在加载,构建呈现树就是一种浪费,因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则,在其准备好之前显示内容就会遇到FOUC(无样式内容闪烁)问题。 样式表放在文档底部时,IE针对以下三种情况会用白屏代替闪烁: a. 在新窗口中打开时; b. 重新加载时; c. 作为主页。3. @import会造成组件无序下载,从而可能会引起闪烁和白屏,用link不会出现问题。 HTML规范:和A不一样,<link>只能出 阅读全文

posted @ 2013-04-12 18:59 BigPalm 阅读(177) 评论(0) 推荐(0) 编辑

规则4 压缩组件

摘要: 1. 压缩是通过浏览器发送Accept-Encoding头和服务器响应Content-Encoding完成的。2. 压缩什么 很多网站会压缩其HTML文档,实际上压缩脚本和样式表也是非常值得做的(还包括XML和JSON在内的文本响应)。图片和PDF不应该被压缩,因为他们本来就被压缩了,再压缩只会浪费CPU资源。 根据经验通常对大于1kb或2kb的文件进行压缩,mod_gzip_minimun_file_size指令会控制着希望压缩的文件的最小值,默认值为500B。3. 配置 a. 一般压缩方法有gzip和deflate,但gzip支持的浏览器最多,并且压缩效果也较好; b. Apach... 阅读全文

posted @ 2013-04-12 18:25 BigPalm 阅读(184) 评论(0) 推荐(0) 编辑

规则3 添加Expires头

摘要: 1. Expires and Max-Age a. Expires可以指示浏览器使用缓存组件直到有效期,通过指定一个特定有效期时间(Expires: Thu, 15 Apr 2010 20:00:00 GMT),需要考虑服务器和客户端同步性; b. Cache-Control使用max-age来指定缓存被缓存多久,指定的是一个相对时间,单位为秒(Cache-Control: max-age=315360000); c. Cache-Control优先级更高,同时存在时可以重写Expires,但是HTTP1.0不支持Cache-Control; d. mod_expires Apache... 阅读全文

posted @ 2013-04-12 16:46 BigPalm 阅读(200) 评论(0) 推荐(0) 编辑

规则2 使用内容发布网络

摘要: 1. 正确部署服务器:当用户群增加时,有必要在多个地理位置不同服务器上部署内容,由于性能黄金法则,首先可以考虑将组件服务器分散开;2. 内容发布网络(CDN) a. CDN是一组分布在多个不同地理位置的Web服务器,用于更加高效地向用户发布内容; b.CDN可以缩短响应时间、备份、扩展存储能力、进行缓存、缓和web流量峰值压力; c.CDN缺陷:响应时间可能受到其他网站影响,因为CDN服务商在其所有客户之间共享web服务器;无法直接控制组件服务器所带来的特殊麻烦; d.CDN用于发布静态内容。 阅读全文

posted @ 2013-04-12 15:56 BigPalm 阅读(151) 评论(0) 推荐(0) 编辑

规则1 减少HTTP请求

摘要: 1. 由性能黄金法则得知,改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。2. 图片地图 a. 允许在一个图片上关联多个URL,目标URL的选择取决于单击图片哪个位置; b. 服务器端图片地图:所有点击提交到同一URL,向其传递用户点击的x,y坐标。Web将x,y映射为适当的操作; c. 客户端图片地图:将用户点击映射到指定操作。通过HTML的MAP标签实现; d. 缺点:区域坐标难确定,通过DHTML创建的图片地图在IE下无法工作。 e. <img usemap="#map1" border=0 src="/image/image 阅读全文

posted @ 2013-04-12 15:40 BigPalm 阅读(231) 评论(0) 推荐(0) 编辑

绪言 前端性能的重要性 && HTTP概述

摘要: 1. 性能黄金法则 只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。2. 时间分配: a. 有缓存:没有太多的下载活动,HTML文档下载后将阻塞HTTP请求,先进行解析HTML、JavaScript、CSS,并从缓存中获取组件; b. 大量的HTTP请求并行发生:因为使用了多个不同的主机名; c.HTML请求得到响应后(不需要响应完全结束)就开始解析(同时构造DOM树)并开始下载解析出的组件; d. 在请求脚本时不会发生并行请求:大多情况下(defer,async除外)浏览器在下载脚本时会阻塞其他其他组件下载(页面呈... 阅读全文

posted @ 2013-04-12 14:52 BigPalm 阅读(315) 评论(0) 推荐(0) 编辑

The normal equations

摘要: 1. Guide Gradient descent gives one way of minimizing J. Lets discuss a second wayof doing so, this time performing the minimization explicitly and withoutresorting to an iterative algorithm. In this method, we will minimize J byexplicitly taking its derivatives with respect to the θj ’s, and setti. 阅读全文

posted @ 2013-04-12 11:06 BigPalm 阅读(456) 评论(0) 推荐(0) 编辑

Linear Regression

摘要: 1. Guide Here, the x’s are two-dimensional vectors in R2. For instance, x(i)1 is theliving area of the i-th house in the training set, and x(i)2 is its number ofbedrooms. To perform supervised learning, wo must decide to choose h. As an initual choice, we decide to approximate y as a l... 阅读全文

posted @ 2013-04-12 09:46 BigPalm 阅读(186) 评论(0) 推荐(0) 编辑

Supervised learning

摘要: 1. Guide Suppose we have a dataset giving the living areas and prices of 47 housesfrom Portland, Oregon: We can plot this data: ... 阅读全文

posted @ 2013-04-12 09:36 BigPalm 阅读(169) 评论(0) 推荐(0) 编辑

导航