前端性能优化--转载

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 4.5k 阅读时长 ≈ 4 分钟
前端性能优化一直是一个很头疼的问题，虽然网上资料很多，但每次有优化需求时，还是感觉很焦虑，这里收藏一篇比较全面的文章（知识点全面，但并不深入，随用随差），以备不时之需吧

网络请求优化/CDN

  • Minimize HTTP Requests 减少HTTP请求
    图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用CSS sprites将小图拼合后利用background来定位。

  • Reduce DNS Lookups 减少DNS查找
    减少DNS查询次数需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等。

  • Use a Content Delivery Network 利用CDN技术
    利用CDN将静态资源分发到各个主要服务器节点，可以加快用户的请求速度。

  • Make JavaScript and CSS External 将JS和CSS外链
    前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！

  • Avoid Redirects 避免重定向
    在写入链接时，虽然”http://www.mulianju.com"和"http://www.today-s-ooxx.com/"仅有一个最后的"/"只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

  • Use GET for AJAX Requests 用GET方式进行AJAX请求
    Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。

  • Preload 预加载
    提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。

  • Lazyload 懒加载
    图片、组件、模块等体量较大的资源，可以通过判断是否出现在可视窗口，动态加载，这样可以大量减少首屏加载的压力。
    不过需要注意的是和预加载的区别，两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

  • Split Components Across Domains 跨域分离组件
    页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。

  • Choose over @import 使用而非 @import
    在IE中使用@import就和在页面底部用一样，我们前面说要把放顶部的。

  • 使用base64编码代替图片
    适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码字符串inline到CSS或页面中，减少http的请求次数。

  • 按需加载
    用户看不到的可以先不用加载，在需要用到的时候再加载。可以按需加载的有图片、CSS、JS。

  • 首屏CSS内嵌

  • 请求合并

  • 资源缓存+文件指纹+CDN部署+非覆盖式发布

缓存

  • Make Ajax Cacheable 缓存Ajax
    Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。

  • Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存
    浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

  • Make favicon.ico Small and Cacheable 缩小favicon.ico的大小并缓存它
    站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。

体积优化/压缩技术

  • Gzip Components Gzip压缩
    Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。

  • Minify JavaScript and CSS 减小JS和CSS的体积
    写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。

  • Reduce Cookie Size 减小Cookie
    Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

  • Optimize Images 优化图片
    将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。

  • Optimize CSS Sprites 优化CSS Sprites
    在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

  • Don’t Scale Images in HTML 不要在HTML中缩放图片
    图片要用多大的就用多大的，1000X1000的图片被width=”100” height=”100”以后，本身的KB数是不会减少的。

  • Keep Components under 25K 保证组件在25K以下
    iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。

  • 图片压缩
    在不得不加载图片的前提下，进一步提高优化效果，通过有损或无损压缩所见图片的大小。减少图片加载流量，效果明显。

  • 更好的图片格式
    webp、bpg、sharpP等新图片格式具有更好的压缩比
    webp能让图片平均大小减小70%

  • 使用矢量图代替位图
    对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

  • 最好不用图片，去掉无意义的修饰

代码逻辑优化

  • Put Stylesheets at the Top 把CSS放顶部
    让浏览者能尽早的看到网站的完整样式。

  • Put Scripts at the Bottom 把JS放底部
    网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

  • Avoid CSS Expressions 避免CSS Expressions
    CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

  • Flush the Buffer Early 尽早的释放缓冲
    当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。

  • Reduce the Number of DOM Elements 减少DOM元素数量
    复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。

  • Use Cookie-free Domains for Components 对组件使用无Cookie的域名
    对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

  • Minimize DOM Access 减少DOM的访问次数
    JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

  • Develop Smart Event Handlers 开发灵活的事件处理句柄
    DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

  • Avoid Filters 避免过滤器的使用
    如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

  • 使用canvas代替图片
    需要高性能的图片或动画，使用HTML5的canvas元素绘制图片，页面渲染性能较高。

  • 响应式图片
    不同终端对同一图片的需求不一样，根据终端加载不同的图片来节省不必要的流量。通过picture元素，picturefill或平台判断来为不同终端平台输出不同的图片。减少没必要的图片加载，灵活控制。

  • BigRender
    将要加载的内容先放在textarea框中，并且隐藏。然后以后再通过js去获得textarea中内容加载出来。

  • Document-Fragment
    documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。

服务端优化

  • Configure ETags 配置ETags
    搞不清楚咋回事，总之我是在.htaccess里把它删除了。

  • 使用支持SPDY的服务器
    SPDY可认为是未来的HTTP 2.0的早期实现，Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可参考此中文演讲：http://www.youtube.com/watch?v=r74RAcrc1ZA（请自备梯子），这里就不展开了。

  • Quickling
    它指的是页面的某一个块可以通过Ajax请求，包括这块使用到的静态资源，然后通过JSON方式返回给前端加载器，前端加载器先加载静态资源然后渲染块，这样得到一个可展示的页面局部，可以把它放到当前页的任何地方

  • 使用HTTP2协议

其他优化

  • Remove Duplicate Scripts 删除重复脚本
    重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。

  • Minimize the Number of iframes 减少iframe数量
    需要更有效的利用 ifames。
    iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
    iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

  • No 404s 不要出现404页面
    站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

  • Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

  • Bigpipe
    为了能让一个页面能够同时被客户端和服务前端同时处理，首先我们需要将一个完成的页面划分为若干小块，这些小分块被称为 pagelets。然后通过bigpipe技术，让页面以pagelet的形式在服务前端生成并分块发送给客户端。

参考： 前端优化方法（全）

本文永久链接: https://www.mulianju.com/front-end-performance/