文章分类 -  Web前端性能优化

十四. 优化Cookie
摘要：什么是Cookie Cookie是存储在客户端的一小段文本信息，伴随着用户请求在浏览器和服务器之间传递。Cookie除了核心对象key-value外，还有max-age，path，domain和httponly属性。httponly属性标识一个客户端javascript能否操作这个Cookie；m... 阅读全文
posted @ 2014-11-23 17:16 teroy 阅读(377) 评论(0) 推荐(0)
十三. 图像优化
摘要：图像基础知识gif: 适用于动画效果，例如提示的滚动条图案 jpg: 是一种使用有损压缩的图片格式，它将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格，隐藏细节。用户可以设置质量级别，从0到100，数字越少图片质量就越差。png：是一种使用无损... 阅读全文
posted @ 2014-11-17 09:29 teroy 阅读(220) 评论(0) 推荐(0)
十二. 配置ETag
摘要：什么是ETag？ 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。条件GET请求 浏览器下载组件的时候，会将它们存储到浏览器缓存中。如果需要再次获取相同的组件，浏览器将检查组件的缓存时间，假如已经过期，那么浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。 那么服务器是根据什么判断缓存是否还有效呢?答案有两种方式，一种是前面提到的ETag，另一种是根据最新修改时间。先来看看最新修改时间。最新修改时间 原始服务器通过... 阅读全文
posted @ 2014-01-23 10:22 teroy 阅读(431) 评论(0) 推荐(0)
十一. 移除重复脚本
摘要：出现重复脚本的原因 导致一个脚本的重复又两个主要因素：团队大小和脚本数量。开发一个网站需要极大数量的资源，不同的团队需要构建一个大型web的不同部分，当团队整合和沟通工作没有做足，则容易出现重复脚本的情况。当然脚本数量也是重要的一环，脚本数量越多越容易出现重复脚本的情况。重复脚本如何损伤性能 在没有缓存的情况下，如果在html中重复链接了相同的脚本，IE7以下(包括IE7)将会产生两次HTTP请求，IE8以上则不会。 除了产生不必要的HTTP请求外，对脚本进行重复执行也会浪费时间，脚本的重复执行在浏览器中都存在。如何避免重复脚本 1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本... 阅读全文
posted @ 2014-01-21 11:42 teroy 阅读(135) 评论(0) 推荐(0)
十. 避免重定向
摘要：什么是重定向？ 重定向用于将用户从一个URL重新路由到另一个URL。常用重定向的类型301：永久重定向，主要用于当网站的域名发生变更之后，告诉搜索引擎域名已经变更了，应该把旧域名的的数据和链接数转移到新域名下，从而不会让网站的排名因域名变更而受到影响。302：临时重定向，主要实现post请求后告知浏览器转移到新的URL。304：Not Modified，主要用于当浏览器在其缓存中保留了组件的一个副本，同时组件已经过期了，这是浏览器就会生成一个条件GET请求，如果服务器的组件并没有修改过，则会返回304状态码，同时不携带主体，告知浏览器可以重用这个副本，减少响应大小。重定向如何损伤性能? 当.. 阅读全文
posted @ 2014-01-20 09:52 teroy 阅读(565) 评论(0) 推荐(0)
九. 精简javascript
摘要：基础知识精简：从javascript代码中移除所有的注释以及不必要的空白字符(空格，换行和制表符)，减少javascript文件的大小。混淆：和精简一样，会从javascript代码中移除注释和空白，另外也会改写代码。作为改写的一部分，函数和变量的名字将被转换为更短的字符串，所以进一步减少了javascript文件的大小。混淆的缺点 1. 缺陷：混淆过程本身很有可能引入错误。 2. 维护：由于混淆会改变javascript符号，因此需要对任何不能改变的符号进行标记，防止混淆器修改它们。 3. 调试：经过混淆的代码很难阅读，这使得在产品环境中更加难以调试。 相对而言，精简出错的概率会少很... 阅读全文
posted @ 2014-01-17 11:13 teroy 阅读(204) 评论(0) 推荐(0)
八. 减少DNS查找
摘要：基础知识DNS(Domain Name System)： 负责将域名URL转化为服务器主机IP。DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器。所以DNS也是开销，通常浏览器查找一个给定URL的IP地址要花费20-120ms，在DNS查找完成前，浏览器不能从host那里下载任何东西。TTL(Time To Live)：表示查找返回的DNS记录包含的一个存活时间，过期则这个DNS记录将被抛弃。影响DNS缓存的因素 1. 服务器可以设置TTL值表示DNS记录的存活时间。本机DNS缓存将根据这个TTL值判断DNS记录什么时候被抛弃，这个TTL. 阅读全文
posted @ 2014-01-14 13:19 teroy 阅读(387) 评论(0) 推荐(0)
七. 使用外部javascript和css
摘要：基础知识页面浏览量(PV)：用户对页面请求访问次数总和。内联 VS 外置 对于两个相同大小的页面，一个使用了内联，只有html需要下载，一个使用了外置，包括一个js和一个css，在用户不带缓存访问页面的时候，内联所有的js和css的效率更快，原因是外置js和css带来额外的http请求开销，1个http请求相对于3个http请求要更快一些。尽管如此，现实中还是使用外部文件会产生较快的访问速度，这是由于外部js和css有机会被浏览器缓存起来，当再次请求相同的js或css的时候，浏览器将不会发出http请求，而是使用缓存的组件，减少了总体需要下载文件的大小。 综合来讲，我们一般推荐使用外置的j.. 阅读全文
posted @ 2014-01-13 11:14 teroy 阅读(404) 评论(0) 推荐(0)
六. 将脚本放在底部
摘要：并行下载 浏览器下载组件的时候并不是每次只下载一个组件，而是实现了并行下载的机制。HTTP规范1.1建议浏览器从每个主机名并行地下载两个组件。既假如页面的所有组件都来自于一个主机名，则每次只能同时下载两个组件。如果组件使用了两个主机名，而且组件的主机名分配均匀，则每次并行下载的数量变成了2*2=4。不过，当代的浏览器普遍实现都超过了2个并行下载，不同的浏览器设置都有所不同。脚本阻塞下载 并行下载组件能加快页面的加载速度，然而，在下载脚本的时候并行下载实际上是被禁用的，即使其他组件使用了不同的主机名，浏览器也不会启动其他的下载。原因如下：1. 脚本可能使用了document.write来修改.. 阅读全文
posted @ 2014-01-08 10:33 teroy 阅读(232) 评论(0) 推荐(0)
五. 将样式表放在顶部
摘要：可视性回馈的重要性进度指示器有三个主要优势——它们让用户知道系统没有崩溃，只是正在为他或她解决问题；它们指出了用户大概还需要等多久，以便用户能够在漫长的等待中做些其他事情；最后，它们能给用户提供一些可以看的东西，使得等待不再是那么无聊。最后一点优势不可低估，这也是为什么推荐使用图形进度条而不是仅仅以... 阅读全文
posted @ 2014-01-07 19:28 teroy 阅读(297) 评论(0) 推荐(0)
四. 压缩组件
摘要：基础知识gzip编码：gzip是GUNzip的缩写，是使用无损压缩算法的一种，最早是用于Unix系统的文件压缩，凭借着良好的压缩效率，现在已经成为Web上使用最为普遍的数据压缩格式。压缩是如何工作的 客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法，如果客户端请求报文没... 阅读全文
posted @ 2014-01-03 20:47 teroy 阅读(202) 评论(0) 推荐(0)
三. 添加Expires头
摘要：什么是Expires头？Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时，它会和相应的组件一起保存到其缓存中，只要组件没有过期，浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT（格林尼治标准时间）。HTTP1.1... 阅读全文
posted @ 2013-12-19 20:15 teroy 阅读(382) 评论(0) 推荐(0)
二. 使用内容分发网络
摘要：基础知识服务器离用户越近，HTTP请求的响应时间将更短。CNAME：别名记录，当多个域名需要指向同一服务器IP，可以使用一个域名做A记录指向该服务器IP，然后让多个域名指向该A记录。ICP：Internet Content Providor。DNS：Domain Name System。什么是内容分发网络?CDN（Content Deliver Network）是一组分布在多个不同地理位置的Web服务器，通过将网站的资源发布到最接近用户的网络”边缘“，供用户就近取得所需内容。CDN可以看作一种缓存代理，主要用于对静态资源（如图片，css，js等）的缓存。CDN的网络架构 CDN的网络架构主要. 阅读全文
posted @ 2013-12-09 19:38 teroy 阅读(169) 评论(0) 推荐(0)
一. 减少Http请求
摘要：性能黄金法则只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。前言 有关前端性能优化的资料参考于《高性能网站建设》这本书，这一系列的文章可以看作是对这本书的阅... 阅读全文
posted @ 2013-12-08 22:17 teroy 阅读(214) 评论(0) 推荐(0)