zoukankan      html  css  js  c++  java
  • 高性能网站建设

    压缩

    浏览器使用Accept-Encoding头来生命它支持压缩。

    服务器使用content-Encoding头确认响应已被压缩。

    持久连接

    request:      Connection:keep-alive

    response:    Connection:keep-alive

    图片优化

    1.使用图片地图,将多个图片整合到一张图片上   <map>

    2.CSS Sprites   多张图片合并为一张,使用时,通过位置制定

    合并后大小比单个图片总和还小,并且减少http请求

    3.内联图片 data:URL

    添加 Expires头

    浏览器使用缓存来减少HTTP请求的数量,并减少HTTP响应的大小,使Wweb页面加载的更快。

    Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止。

    HTTP规范中简要地称该头为“在这一日期/时间之后,响应将被认为是无效的”。

    Expires:Thu, 15 Apr 2010 20:00:00 GMT

    弱点:

    Expires头使用一个特定的时间,它要求服务器和客户端的时钟严格同步。

    另外,过期日期需要经常检查,并且一旦未来这一天到来了,还需要在服务器配置中提供一个新的日期。

    带有max-age的Cache-Control

    使用带有max-age的Cache-Control 可以消除Expires的限制

    mod_expires Apache模块使你在使用Expires头时能像max-age那样以相对的方式设置日期。

    这通过Expires-Default指令来完成

    Last-Modified   /    If-Modified-Since

    如果一个组件没有一个长久的Expires头,浏览器仍会缓存住,在后续请求中,浏览器会检查缓存并发现组件已过期。

    为了提高效率,浏览器会像原始服务器发送一个GET请求。

    如果组件没有改变,原始服务器可以免于发送整个数据,而是发送一个很小的头(304),告诉浏览器可以使用其缓存的组件。

    Last-Modified      : 服务器发送给客户端最后的修改时间

    If-Modified-Since : 客户端记录的服务器最后修改时间

    注意:

    通过修订文件名的方式,排除在重新发布项目时,浏览器使用缓存中的数据,不再获取最新文件,通常将项目版本号追加到文件名上。

    压缩组件

    通过减小HTTP响应的大小来减少响应时间。

    如果HTTP请求产生的响应包很小,传输时间就会减小,因为只需将很小的包从服务器传递到客户端。

    使用gzip编码来压缩HTTP响应包,并由此减小网络响应时间。

    这是减小页面大小的最简单的技术。

    从HTTP 1.1 开始,Web客户端可以通过HTTP请求中的 Accept-Encoding 头来标识对压缩的支持。

    Accept-Encoding : gzip, deflate

    如果Web服务器看到请求中有这个头,就会使用客户端列出的方法中的一种来压缩响应。

    Web服务器通过响应中的Content-Encoding头来同志客户端。

    Conten-Encoding : gzip

    压缩什么:

    html,script,css,XML,JSON....

    image 和 pdf 不应该被压缩,因为他们已经被压缩了,再压缩只会浪费CPU资源。

    根据经验通常对大于1KB或2KB的文件进行压缩。

    mod_gzip_minimum_file_size指令控制希望压缩的文件的最小值,默认是500B。

    将样式标放在顶部

    为避免白屏,请将样式表放在文档顶部的HEAD中。

    经过这样修改后的示例网站称作 " CSS at tht Top ",解决了所有错误的情况。

    样式表在页面中的位置并不影响下载时间,但是会影响页面的呈现。

    如果样式表仍在加载,构建呈现树就是一种浪费,因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则,在其准备好之前显示内容会遇到 “无样式内容的闪烁” 问题。

    将脚本放在底部

    最好将脚本从页面的顶部移至底部。

    这样页面即可以逐步呈现,也可以提高下载的并行度。

    对于位与脚本以下的文档内容,逐步呈现都被堵塞了。

    将脚本放在页面越靠下的地方,以为着越多的内容能够逐步呈现。

    并行下载:

    HTTP 1.1 规范建议浏览器从每个主机名并行地下载两个组件。

    很多Web页面需要从一个主机名下载所有的组件。

    使用DNS别名将组件分放到多个主机中。

    建议使用连个主机名,效率最佳。

    脚本阻塞下载:

    并行下载组件的优点是很明显的,但在下载脚本时并行下载实际上是禁用的,即使使用了不同的主机名,浏览器也不会启动其他下载的。(不仅仅阻塞script,其他下载也会阻塞)

    脚本阻塞下载的原因主要是为了保证脚本的加载顺序。

    • 脚本会阻塞对其后面内容的呈现
    • 简本会阻塞对其后面组件的下载

    动态内联 javascript / css

    使用cookies做指示器,如果cookies不存在,就内联javascript和css,页面加载完成后,在load事件中动态加载外部javascript和css文件(加载到隐藏的iframe中,实现缓存外部文件,且不影响当前页面)。

    当用户第一次访问页面时,服务器发现没有cookie,于是生成了一个内联组件的页面。

    然后服务器添加javascript来在页面加载后动态下载外部文件(并设置cookie).

    减少DNS查找

    精简javascript

    精简

    混淆

    避免重定向

    301 重定向,重定向地址在response头信息的Location中,代表永久转移。

    302 重定向,重定向地址在response头信息的Location中,代表暂时转移(已过时)。

    303 重定向,对于302的补充,必须使用GET请求获取新位置的资源。

    307 重定向,对于302的补充,后续请求资源的方法是使用与当前交互相同的方法而不是全部使用GET。

    304 Not Modified,通知浏览器可以直接使用缓存中的副本。

    ETag

    集群环境下有问题

    配置或移除

    使ajax可缓存

    对于图片的处理

    1.图片地图,css sprites,内联图片

    2.使用缓存

    3.制定图片的原始大小,不要放大图片,缩小图片

    4.照片使用JPEG,动画使用GIF,其他使用PNG,并尽量使用PNG8

    5.图片lazzy 加载

    创建快速响应的Web应用

    脚本的耗时开销很低,而处理CSS是最大的开销。理解DOM的奥秘并减少它的影响比试图给脚本提速效果更好。

    用户操作时,浏览器使用单线程从队列中取出事件,然后对事件本身进行处理或执行javascript。

    怎样才算够快

    用户直接操作UI中对象的感觉极限为 0.1秒。

    如果无法在0.1秒内完成,那么必须在1秒内完成,在0.2到1秒的处理时间内,用户会感到计算机正在处理中。

    超过1秒的延时要提示用户计算机正在解决这个个问题,如光标的形状改变。

    超过10秒的任何操作都需要一个百分比完成指示器,以及一个方便用户中断操作且有清晰标识的方法。

    使用Firebug插件,分析javascript代码性能。

    定时器

    使用定时器模拟多线程应用,简单的将运行时间很长的计算拆成独立的区块。

    内存优化

    使用delete关键字从内存中移除不再需要的javascript对象。

    从网页的DOM树上移除不再是必须的节点。

    Comet

    低延时数据传输技术,它们是comet的基础:轮询、长轮询、永久帧、XHR流、WebSocket

    1.轮询

    简单轮询,即网站或应用每x毫秒发出一个请求来检查是否有更新要呈现到用户界面上。

    eg:settimeout

    在服务器按已知间隔时间生成信息的情况下,轮询是可行的

    简单轮询是效率最低但最简单的comet技术。

    2.长轮询

    浏览器发送一个请求到服务端,而服务端只在有可用的新数据的情况下才响应。

    在支持长轮询,服务端要完全保持一个所有未响应请求和它们对应连接的大集合。

    服务端通过返回 Transfer-Encoding: chunked 或 Connection:close 响应来保持这些请求连接。

    即通过XHR建立与服务器的连接,在服务端数据发生改变的时候,通过XHR通知浏览器,此时再发送请求数据的连接。

    客户端会与服务器建立一个持久的连接,直到服务器端有数据发送过来,服务器端断开,客户端处理完推送的数据,会再次发起一个持久的连接,循环往复。

    3.永久帧

    4.XHR流

    IE7以下浏览器不支持

    http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html

    简化CSS选择符

     CSS选择符是从右到左进行匹配。

     尽量避免使用通配规则

    不要限定ID选择符

    不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展

    对于子选择符和后代选择符尽可能用具体的类来表示

    浏览器的重排必须再次匹配所有的css选择符

  • 相关阅读:
    (网页)中的简单的遮罩层
    (后端)shiro:Wildcard string cannot be null or empty. Make sure permission strings are properly formatted.
    (网页)jQuery的时间datetime控件在AngularJs中使用实例
    Maven Myeclipse 搭建项目
    MyBatis 环境搭建 (一)
    java 常用方法
    XML 基础
    JS BOM
    js 事件
    js 的使用原则
  • 原文地址:https://www.cnblogs.com/chenqf/p/3778355.html
Copyright © 2011-2022 走看看