前端性能优化--笔记

一)Make fewer HTTP requests

尽可能少的http请求。合并图片、CSS、JS,改进首次访问用户等待时间。 

二)Use a CDN

使用CDN,就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 

CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可 以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。

三)Avoid empty src or href

避免空的src和href 
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。

四)Add an Expires headers

为文件头指定Expires 
使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。 

设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
五)Compress components with Gzip

使用gzip压缩内容 
压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。

对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常 大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩 后显示页面。
Put CSS at the top 把CSS外部链接放到页面的顶部。其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就 是个错误。

六)Put CSS at top

把CSS放到顶部
七)Put JS at  bottom

把JS放到底部 
防止js加载对之后资源造成阻塞。

把Javascript脚本尽量放到页面底部加载。 一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不 完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做 呢?呵呵,其实很简单,为了实现最大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页 面渲染,JS脚本运行。
八)Avoid CSS expressions

避免使用CSS表达式 

避免CSS表达式 其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。

九)Make JS and CSS external

将CSS和JS放到外部文件中 
目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
十)Reduce DNS lookups

尽可能少的DNS查找。

权衡DNS查找次数 
减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。 
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。 

十一)Minify JS and CSS

精简CSS和JS 

对Javascript 代码进行压缩。压缩工具,yuicompressor,雅虎美国开发的JAVA 压缩包yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混 淆脚本的作用。
十二)Avoid URL redirects

避免重定向。

避免跳转 
同域:注意避免反斜杠 “/” 的跳转; 

跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)

十三)Remove duplicate JS and CSS

scripts 去除重复的脚本。

删除重复的JS和CSS 
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

十四)Configure entity ETags

这个好像是服务器端配置的问题。

配置ETags 
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载。

十五)make AJAX cacheable

(AJAX 缓存)。

可缓存的AJAX 
“异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

十六)Use GET for AJEX requests

 使用GET来完成AJAX请求 
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

十七)Reduce the number of DOM elements

减少DOM元素数量 
是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS 

十八)Avoid HTTP 404(Not  Found )error

 避免404 
有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。 

十九)Reduce cookie size

减少Cookie的大小 

二十)Use cookie-free domains

使用无cookie的域 
比如图片 CSS 等,Yahoo! 的静态文件都在 yimg.com 上,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

二一)Avoid AlphaImageLoader filter

不要使用滤镜 
png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg 

二二)Do not scale images in HTML

不要在HTML中缩放图片 

二三)Make favicon small and cacheable

 缩小favicon.ico并缓存

时间: 2024-10-07 06:07:08

前端性能优化--笔记的相关文章

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

移动web性能优化笔记

移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

前端性能优化的14个规则

作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 规则01:尽量减少HTTP请求前端优化的黄金准则指导着前端页面的优化策略:只有10%-20

Web 前端性能优化【转】

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

前端性能优化规则总结—读《高性能网站建设指南》

本文对<高性能网站建设指南>这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程.就没必要看这本书了. 规则1-减少HTTP请求 1.使用图片地图 图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置. 比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次H

Web前端性能优化全攻略[转载]

1. 尽量减少  ">HTTP 请求 (Make Fewer  ">HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少  ">HTTP 请求: 1) 合并文件,比如把多个  ">CSS 文件合成一个: 2)  ">CSS Sprites 利用  ">CSS background 相关元

Web前端性能优化全攻略

网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户