zoukankan      html  css  js  c++  java
  • 高性能网站建设指南(yahoo!14条)

    序言

    压缩:Accept-Encoding <-> Content-Encoding

    Browser利用本地缓存:

    Last-Modified <-> If-Modified-Since -> 304):每次均会进行http请求确认

    Expire: 在有效期内不会进行任何http请求

    Keep-Alive: 基于单个socket,可以进行多个http请求

    http1.1 管道:性能优于Keep-Alive,但不是所有浏览器都支持(具体待查?)

    减少Http请求

    Image Map: 只能是矩形区域

    Css Sprites

    Inline images

    基于data:[<mediatype>][;base64],<data>,实质就是讲图片进行编码,直接以字符串格式写入html或者css中。注意:data:[<mediatype>][;base64],<data>可以支持ascript等所有url

    缺点:不被IE支持(IE7-IE8+待查?);编码大小受限制

    合并脚本和样式表

    使用Content Delivery Network

    使用Expires

    Expires缺点:

    使用一个具体的特定时间,要求服务器时间和客户端时间严格同步;

    服务器端过期时间需要经常检查并且更新。

    Cache max-age: 需要支持Http1.1的浏览器

    哪些浏览器默认用的还是http1.0

    压缩组件

    原理:

    Request Header: Accept-Encodinggzip, deflate -> Response: Content-Encoding: gzip

    (注意:gzip是标准,更通用)

    代理缓存:

    给服务器的Vary响应头包含上:Accept-Encoding

    将样式表放在顶部

    将脚本放在底部

    Http1.1规范建议浏览器从每个主机名并行下载2个组件,IE默认设置为2个,FF默认设置为8个;

    下载Js时,为了保证js按照正常顺序加载执行,禁用并行下载。

    避免CSS表达式

    所谓的css表达式, 即在css中通过expression方法接受一个javascript表达式来动态设置css样式。如:background-color:expression(new Date().getHours() % 2 ? “#ccc” : “#fff”);

    注意:css expression只被IE识别,被其他浏览器所忽略;

    表达式功能强大,但性能低下。

    避免方法:

    一次性表达式(js定义方法,css引用),如:widthexpression(setWidth(this));

    事件处理;

    使用外部CSSJavascript

    内联 VS 外部

    加载后下载:

    将不公用的cssjs内联,将公用的通过jsonload事件中基于setTimeout延迟加载(可以将该操作独立到一个隐藏的iframe中,这样不会影响页面正常显示)。

    动态内联:

    检查cookie是否存在,存在则直接引用外部css&jscookie存在,正常情况下css&js均在缓存中,即使被清楚,也不过是真正去请求下载);不存在,则先内联css&js,减少http请求数,尽快加载渲染页面,然后基于加载后下载技术下载外部css&js,并且写入cookie(当cookie不存在但css&js已在缓存中时,浏览器不会真正去下载css&js

    减少DNS查找

    减少站点唯一主机名 & 使用Keep-Alive

    权衡组件并行下载数 DNS查找数建议: 组件分布到2~4个主机名.

    精简Javascript

    精简工具:

    Jsminhttp://crockford.com/javascript/jsmin

    Shinksafe: http://shrinksafe.dojotoolkit.org/

    避免重定向

    301 VS 302

    Baidu搜索结果列表通过onmousedown来做流量统计;

    Yahoo通过动态建立一个img,然后设置src路径为后端统计程序。

    移除重复脚本

    配置或者移除ETag (Entity Tag)

    完整过程:

    Request -> Response: ETag: “***…” -> Re Request: If-None-Match: “***…” -> Response: 304 Not Modified

    缺点:

    默认情况下,ETag通常根据服务器某些属性来产生,同已组件在IISAppache集群不同机器上产生的ETag可能不一样。而If-None-Match优先级高于If-Modified-Since,导致服务器集群时缓存利用率极低。

    建议:

    重写或者移除ETag

    使Ajax可缓存

    如果业务许可,可以增加长久的Expires

  • 相关阅读:
    metal的gpu query
    体积雾 global fog unity 及改进
    hdr rt format对颜色的影响
    unity deferred lighting
    unity linear space时 photoshop blend的正确设置
    unity linear work flow
    一些数据 bandwidth之类
    deferred rendering with msaa
    unity 显示mipmaplevel
    【转】在C#中使用SendMessage
  • 原文地址:https://www.cnblogs.com/Langzi127/p/2400233.html
Copyright © 2011-2022 走看看