前端优化⽅法（全）
1.Minimize HTTP Requests 减少HTTP请求
图⽚、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进⼀个⽂件，页⾯⾥直接写⼊图⽚也是不好的做法，应该写进CSS⾥，利⽤ CSS sprites 将⼩图拼合后利⽤background来定位。
cacheable
2.Use a Content Delivery Network 利⽤CDN技术
利⽤CDN将静态资源分发到各个主要服务器节点，可以加快⽤户的请求速度。
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 Expressions
CSS表达式很可怕，这个只被IE⽀持的东西执⾏时候的运算量⾮常⼤，你移动⼀下⿏标它都要进⾏重计算的，但有时候为了做浏览器的兼容必须要⽤到这个||| IE6！~
8.Make JavaScript and CSS External 将JS和CSS外链
前⾯讲到了缓存这个事情，⼀些较为公⽤的JS和CSS，我们可以使⽤外链的形式，譬如我就是从Google外链来的Jquery⽂件，如果我的浏览者在浏览别的使⽤了这个外链⽂件的⽹站时已经下载并缓存了这个⽂件，那么他在浏览我的⽹站的时候就不需要再进⾏下载了！~
9.Reduce DNS Lookups 减少DNS查
减少DNS查询次数需要减少来⾃不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等。
10.Minify JavaScript and CSS 减⼩JS和CSS的体积
写JS和CSS都是有技巧的，⽤最少的代码实现同样的功能，减少空⽩，增强逻辑性，⽤缩写⽅式等等，当然也有不少⼯具也能够帮你实现这⼀点。
11. Avoid Redirects 避免重定向
12. Remove Duplicate Scripts 删除重复脚本
重复调⽤的代码浏览器并不会识别忽略，⽽是会再次运算⼀遍，这当然是⼤⼤的浪费。
13. Configure ETags 配置ETags
搞不清楚咋回事，总之我是在. htaccess⾥把它删除了。
14. Make Ajax Cacheable 缓存Ajax
Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提⾼效率。
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 减⼩Cookie
Cookie在服务器及浏览器之间的通过⽂件头进⾏交换，尽可能减⼩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. Don’t 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 将组件打包进⼀个多部分的⽂档中
35. 使⽤base64编码代替图⽚
适⽤于图⽚⼩于2KB，页⾯引⽤图⽚不多的情况。将图⽚转换为base64编码字符串inline到CSS或页⾯中，减少http的请求次数。
36. 合并图⽚sprite（雪碧图）
任何⽤到页⾯图⽚的场景。将多个页⾯⽤到的背景图⽚合并成⼀个⼤的图⽚在页⾯中引⽤，可以有效地减少请求个数。
37. 使⽤canvas代替图⽚
需要⾼性能的图⽚或动画，使⽤HTML5的canvas元素绘制图⽚，页⾯渲染性能较⾼。
38. 响应式图⽚
不同终端对同⼀图⽚的需求不⼀样，根据终端加载不同的图⽚来节省不必要的流量。通过picture元素，picturefill或平台判断来为不同终端平台输出不同的图⽚。减少没必要的图⽚加载，灵活控制。
39. 图⽚压缩
在不得不加载图⽚的前提下，进⼀步提⾼优化效果，通过有损或⽆损压缩所见图⽚的⼤⼩。减少图⽚加载流量，效果明显。
40. 更好的图⽚格式
webp、bpg、sharpP等新图⽚格式具有更好的压缩⽐
webp能让图⽚平均⼤⼩减⼩70%
41. 使⽤⽮量图代替位图
对于绝⼤多数图案、图标等，⽮量图更⼩，且可缩放⽽⽆需⽣成多套图。现在主流浏览器都⽀持SVG了，所以可放⼼使⽤！
42. 使⽤⽀持SPDY的服务器
SPDY可认为是未来的HTTP 2.0的早期实现，Chrome、Firefox 13+、Opera 12+、IE 11+均已⽀持SPDY。SPDY和HTTP2可参考此中⽂演讲：（请⾃备梯⼦），这⾥就不展开了。
43. 最好不⽤图⽚，去掉⽆意义的修饰
44. 按需加载
⽤户看不到的可以先不⽤加载，在需要⽤到的时候再加载。可以按需加载的有图⽚、CSS、JS。
45. 预加载
提前加载图⽚，当⽤户需要查看时可直接从本地缓存中渲染。预加载是牺牲服务器性能来换取⽤户更好的⽤户体验。
不过需要注意的是和懒加载的区别，两者的⾏为是相反的，⼀个是提前加载，⼀个是迟缓甚⾄不加载。懒加载对服务器前端有⼀定的缓解压⼒作⽤，
预加载则会增加服务器前端压⼒。
46. 请求合并
47. 资源缓存+⽂件指纹+CDN部署+⾮覆盖式发布
47. ⾸屏CSS内嵌
48. Bigpipe
为了能让⼀个页⾯能够同时被客户端和服务前端同时处理，⾸先我们需要将⼀个完成的页⾯划分为若⼲⼩块，这些⼩分块被称为 pagelets。然后通过bigpipe技术，让页⾯以pagelet的形式在服务前端⽣成并分块发送给客户端。
49. Quickling
它指的是页⾯的某⼀个块可以通过Ajax请求，包括这块使⽤到的静态资源，然后通过JSON⽅式返回给前端加载器，前端加载器先加载静态资源然后渲染块，这样得到⼀个可展⽰的页⾯局部，可以把它放到当前页的任何地⽅
50. BigRender
将要加载的内容先放在textarea框中，并且隐藏。然后以后再通过js去获得textarea中内容加载出来。
51. 使⽤HTTP/2协议

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。