34条网站加速方法.docx

1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。2.Use a Content Delivery Network 利用CDN技术CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了 这项可以通过修改.htaccess文件来实现。4.Gzip Components Gzip压缩Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。5.Put Stylesheets at the Top 把CSS放顶部让浏览者能尽早的看到网站的完整样式。6.Put Scripts at the Bottom 把JS放底部网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。7.Avoid CSS Expressions 避免CSS ExpressionsCSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个| IE6去死去死！8.Make JavaScript and CSS External 将JS和CSS外链前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！9.Reduce DNS Lookups 减少DNS查找貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。10.Minify JavaScript and CSS 减小JS和CSS的体积写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。11. Avoid Redirects 避免重定向再写入链接时，虽然”http:/www. today-s-ooxx. com”和”http:/www. today-s-ooxx. com/” 仅有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。12. Remove Duplicate Scripts 删除重复脚本重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。13. Configure ETags 配置ETags搞不清楚咋回事，总之我是在. htaccess里把它删除了。14. Make Ajax Cacheable 缓存AjaxAjax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。15. Flush the Buffer Early 尽早的释放缓冲当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。16. Use GET for AJAX Requests 用GET方式进行AJAX请求Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。17. Post-load Components 延迟加载组件最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。18. Preload components 预加载组件提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。19. Reduce the Number of DOM Elements 减少DOM元素数量复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。20. Split Components Across Domains 跨域分离组件页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。21. Minimize the Number of iframes 减少iframe数量需要更有效的利用 ifames。 iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本 iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义22. No 404s 不要出现404页面站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。23. Reduce Cookie Size 减小CookieCookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。25. Minimize DOM Access 减少DOM的访问次数JS访问DOM是很慢的，尽量不要用JS来设置页面布局。26. Develop Smart Event Handlers 开发灵活的事件处理句柄DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄27. Choose over import 使用而非 import在IE中使用import就和在页面底部用一样，我们前面说要把放顶部的。28. Avoid Filters 避免过滤器的使用如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。29. Optimize Images 优化图片将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。30. Optimize CSS Sprites 优化CSS Sprites在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。31. Dont Scale Images in HTML 不要在HTML中缩放图片图片要用多大的就用多大的，1000X1000的图片被width=”100 height=”100以后，本身的KB数是不会减少的。32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。33. Keep Components under 25K 保证组件在25K以下iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。一位网页设计师制作网页的流程想想自己前前后后做网页制作已将进半年了，在这半年里有多少辛酸、多少欢喜伴随着我一步一步往前走，经历的多了 自然要老练一些了。在网页制作流程方面，刚开始我总是拿者设计稿就开始进行切割，直接就在DW里面敲代码，遇见一块用一个DIV 那时候我就自称学会了Div+Css了，现在想想真是太嫩了。在不断的摸索中，自己也有了一定的提高。以下是我从这半年中总结出来的一些网页制作的流程和技巧：1、拿到设计稿的后要认真研究，把握大致的框架图，做到心里有一个整体的构思，其中还可以揣摩一些设计的风格，有兴趣的朋友完全可以让自己走上设计的道路。2、用绘图软件做一些实体的框架图，这个框架的目的是让你在制作的过程中能够快速而准确的进行制作和在以后的修改工作中能够高效，所以框架图要具体的标示出块状的id号或者类名，父与子的层次关系等。3、接下来就是进行重要的一项-制作，在制作过程时，就要体现你对技术的熟练程度和技巧运用了，比如css的架构搭建，类名的选择和用CSS的简写达到高效的目的等技巧。4、制作完成后，就是自己的检验了，争取做到制作出的网页同设计师给出的设计稿如出一辙。最后让自己的工作得到他们的肯定，当然改是难免的，不要急躁。相信我们的能力，只要做好了，就没有贵贱之分，在行业中往往这个职位不被人看好，我只想说做我们的事情（网页），让被人去踏谑吧，浪费的时间是他们的损失。只要我们有自己的理想并为之去奋斗我们就会把我们的工作做的更宽更远更好。版式设计的十三种基本版面类型一、骨骼型骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。二、满版型版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。 三、上下分割型把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。 四、左右分割型把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。 五、中轴型将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。 六、曲线型图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。 七、倾斜型版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。 八、对称型对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。 九、中心型重心有三种楷念。1、直接以独立而轮廓分明的形象占据版面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。 十、三角形在圆形、四方形、三角形等基本形态中，正三角形（金字塔形）是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。 十一、并置形将相同或不同的图片作大小相同而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。 十二、自由型自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。 十三、四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面，给人以严谨，规范的感觉。看看大师们学完CSS又学了些什么也许你已经能够熟练地应用CSS，如果是这样的，那你下一步的计划是什么呢？计划下一步行动和思考未来，它们是推动你的职业生涯向前发展的重要组成部分。大家都知道“时间就是金钱”，所以我们就应该以最有效的方式去花费时间。有些人会选择继续在前端方面发展，那么他们下一步也许就需要掌握JavaScript；有些人可能会走设计路线，那么他们应该熟悉、掌握Photoshop和Illustrator；还有一些人，他们则会选择Flash。那么，我们看一下一些Web领导者是怎么说的。Chris Coyier我认为应该有提问者回答“我下一步该学什么？”这个问题。Web上的每一个技术都是有用的，如果你有时间的话，它们都是值得你去学习的。或许你现在正在为一个项目而工作，或者是有一个想法（创意）等着你去实现，那么你需要了解这一点：我将怎样做才能使它变得更加完美。如果你还没有主意想做些什么，那么你去了解下JavaScript吧。David Walsh遨游在JavaScript的海洋中将是必须的，最好是MooTools 或 jQuery。CSS是需要掌握的伟大技术，但是由于浏览器和CSS3的发展缓慢，CSS和JavaScript正慢慢的成为一种技术。毫无疑问，我的选择是使用JavaScript。Chris Spooner对于网页设计（Web design），它有一个很重要的事情：你永远可以采取一条新的道路来学习新的技能。具有良好的CSS知识和在线教程的帮助，你就很容易学会JavaScript的基本框架jQuery。jQuery的语法使用CSS选择器来指定网页的内容，具有良好CSS知识的人将会很容易处理的。经过短暂的学习jQuery的各种操作方法和效果后，一些伟大的、有创意的视觉就可以添加到你的网站中。另一方面，有新的消息说伴随着CSS3和HTML5的发布，Web将会继续向前发展，这两者带来了新的功能。目前你有很多的时间来学习这些新功能，以保证你的技术水平跟得上行业的发展，使你成为一名业内高手。Alen Grakalic我的建议是学习JS，不仅是因为JS现代网站的一个重要组成部分，而且掌握了JS之后，他/她将是一名完美的前端专家。拥有设计、CSS/XHTML/JS编码技能，你就可以胜任前端的任何职位，这就是我在开始阶段的目标。现在我有很多的事情要做，从用户界面设计、CSS“切割”到编写JavaScript代码。Steven Snell我的看法是，不管你做过什么样的网页设计，HTML和CSS是（明显）必要的。在此之后，我认为选择一些可以帮助你在某一（专业化）方面发展的技术是有意义的。它可能是JavaScript、Flash等等。对我来说它是PHP和WordPress。我不是PHP专家，但我对WordPress还是很了解的。学习Photoshop或 Illustrator技术可能又是我的另外一个选择。掌握HTML和CSS之后，我认为你应该看看你真想作一个设计师吗？毕竟我们大多数人都没有充裕的时间去学习所有的东西。Cameron Moll我一直坚持称最伟大的用户体验是建立在三件事情上的：互动、平面设计和沟通。CSS作为从事于提升用户体验的表现的一个工具，即促进互动，它使界面设计能够“活”在浏览器中。如果有人觉得他/她已经掌握那种（CSS）技术，我建议他/她专注于开发技能，使沟通更加的友好-用户、界面之间的视觉上和语言上的沟通，用户和开发者之间的沟通。Jacob Gube下一步，充分体验（享受）CSS的是书写能够跨所有浏览器的代码。当你开始更复杂的设计时，你就会意识到书写支持各种类型浏览器的CSS代码是很困难的。这就是CSS新手和老手之间最根本的区别：能否理解CSS在什么地方能达到预想的效果和在什么地方不会其任何作用。让我告诉你，当我第一次尝试时，我就经常花费无数个小时去调试CSS，但是别担心，这样你会很容易的得到更多的经验。唯一的真正的学习方法是实验和探索，所以就不要放弃了。如果说你已经对HTML/CSS理解的很透彻，那么掌握JavaScript也未尝不是一件好事。学习JS能够帮助你创建更加强大的和互动的Web界面，并且已经掌握的CSS知识能够帮助你更快的理解JS，尤其是当你开始从事DOM工作时。Dmitry Fadeev这个话题很有意思，因为它也曾经困扰过我一段时间。当我能够熟练应用CSS/HTML时，我已经开始慢慢厌倦重复制作相同的模板和前端页面，所以我决定学一点其它的知识。现在我已经学会了Ruby，经过一段时间我开发了一些小的web apps（网络应用服务）。我认为，如果设计师有兴趣了解更多的东西，扩大他们的领域，比如说，从前端设计到后台开发就是一个令人十分高兴的事情，因为你可以在提供整体解决方案或解决所有的问题方面比别人需要更少的时间。另外，还有一件事，我现在是一位系统管理员。我在Slicehost买了VPS后，我不得不学会安装所有的东西，比如数据库、Web服务器、Ruby、Rails等等。学习如何管理一个ApacheWeb服务器，的确是一件很单调的事情，但它给了你一更好地了解这么多东西是如何在一起工作的机会。我最不擅长的是JavaScript。事实上，我很苦恼，我给自己买了一本书，但是到现在我还没有把它读完。我个人认为，在提升前端设计上，JavaScript应该是仅次于CSS/XHTML的。不要仅仅学习JavaScript，下载一个JS库，比如说jQuery并且了解它是如何工作的。像jQuery它能够更容易地把动态内容展现在你的网站上。因此，我认为Web设计师应该学会一些其它编程语言如PHP、Python或者Ruby。你可以迅速达到一定的水平，尽管你无法编写一个复杂的应用程序，但是你至少可以看懂代码并且编写它。举个例子：一个根本不懂PHP的前端开发人员在设计一个非常漂亮的WordPress模板时，他们必须受到一些限制在编写WordPress模板时。然而如果那位设计师懂得一些PHP的话，他就可以通过修改PHP代码来定制他的主题。许多编程语言都是相同的，所以，一旦你学会一门，没准你就会看懂另一种语言的代码。我认为系统管理是另一个很好的技能。它真的很无聊和，但并不难学。如果一个网页设计师能够建立和维护自己的Apache服务器，那么他运行自己的网站将会变得更容易。你也没有必要每月花20美元把你的网站放在托管服务商那里，你可以为自己建立一个真正的具有相同软件和服务的Web服务器。Flash？我不知道。我认为最近几年我们正在远离Flash，走向CSS/HTMl和JavaScript.: CSS艺术字:.如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供参考。CSS艺术字用blur滤镜做出的效果，代码如下：FILTER: blur(direction=135,strength=8)CSS艺术字用dropshadow滤镜做出的效果，代码如下：FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)CSS艺术字用glow滤镜做出的效果，代码如下：FILTER: glow(color=#B4BBCF,strength=5)CSS艺术字这个效果用到了两种滤镜：shadow和alpha，代码如下：FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=#8C96B5,direction=135)CSS艺术字这个效果也用到两个滤镜mask和shadow，代码如下：FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)注意：mask的颜色要和网页背景色一致，字体的颜色由shadow决定。CSS艺术字如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：FILTER: mask(color=#E1E4EC) dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1) chroma(color=#E1E4EC)CSS艺术字用glow滤镜可以做空心字，方法是将字体颜色设置为背景色