zoukankan      html  css  js  c++  java
  • 前端优化方法(全)

    1.Minimize HTTP Requests 减少HTTP请求

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

    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 避免重定向

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


    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协议
     
  • 相关阅读:
    【Ansible】 各种模块
    【Python】 linecache模块读取文件
    【Ansible】 基于SSH的远程管理工具
    【Python】 更棒的Excel操作模块xlwings
    【Python】 docker-py 用Python调用Docker接口
    【Docker】 Swarm简单介绍
    【Docker】 积累
    【Bootstrap】 一些提示信息插件
    配置 -- php运行报Call to undefined function curl_init()的解决办法
    windows下svn钩子实现每次提交更新至web目录
  • 原文地址:https://www.cnblogs.com/wuguanglin/p/front-end-optimization.html
Copyright © 2011-2022 走看看