zoukankan      html  css  js  c++  java
  • web性能优化

    常用方法

    压缩源码和图片
      JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩,比如24色变成8色、去掉一些PNG格式信息等。
      选择合适的图片格式:如果图片颜色数较多就使用JPG格式,如果图片颜色数较少就使用PNG格式,如果能够通过服务器端判断浏览器支持WebP,那么就使用WebP格式和 SVG格式。
    合并静态资源
      包括CSS、JavaScript和小图片,减少HTTP请求。
    开启服务器端的Gzip压缩
      这对文本资源非常有效,对图片资源则没那么大的压缩比率。
    使用CDN 或者一些公开库使用第三方提供的静态资源地址
      
    比如jQuery、normalize.css。一方面增加并发下载量,另一方面能够和其他网站共享缓存。
    延长静态资源缓存时间

      频繁访问网站的访客就能够更快地访问。不过,这里要通过修改文件名的方式,确保在资源更新的时候,用户会拉取到最新的内容。

    CSS引用放在页面头部,JavaScript引用放在页面底部

      这样就不会阻塞页面渲染,让页面出现长时间的空白。

    前端工程师的性能优化

    基本优化方法是:

    • 尽量减少同一域下的HTTP请求数
    • 以及尽量减少每一个资源的体积

      浏览器常常限定了对同一域名发起的并发连接数的上限。E6/7和Firefox2的设计规则是,同时只能对一个域名发起两个并发连接。新版浏览器普遍上限设定为4至8个。

       把静态资源放在非主域名下,这种做法除了可以增加浏览器并发,还有一个好处是,减少HTTP请求中携带的不必要的cookie数据。cookie是某些 网站为了辨别用户身份而储存在用户浏览器中的数据。cookie的作用域是整个域名,也就是说如果某个cookie存放在google.com域名下,那 么对于google.com域名下的所有HTTP请求头都会带上cookie数据。

      如果Google把所有的资源都放在google.com下,那么所有资源的请求都会带上cookie数据。对于静态资源来说,这是毫无必要的,因为这对带宽和链接速度都造成了影响。
       前端工程师经常做的优化是合并同一域名下的资源,比如把多个CSS合并为一个CSS,或者将图片组合为CSS贴图,还有一些优化建议是省掉不必要的 HTTP请求,比如内嵌小型CSS、内嵌小型JavaScript、设置缓存,以及减少重定向。这些做法虽然各不相同,但是如果了解HTTP请求的过程, 就知道这些优化方法的最终目的都是最大化利用有限的请求数。
      一个基础题目是“常用的图片格式有哪些,它们的使用场景是什么”。对图片的敏感性反映出工程师对带宽和速度的不懈追求。比较大的文本资源,必须开启gzip压缩。
    对于一个CSS资源的请求耗时(两个细节):
      这个CSS资源请求的体积是36.4KB(这是gzip压缩过的体积),解压缩之后,CSS内容实际上是263KB,可以算出压缩后体积是原来的13.8%。
      整个连接的建立花费了30%的时间,发出请求到等待收到第一个字节回复花费了20%的时间,下载CSS资源的内容花费了50%的时间。

    后台工程师的性能优化

      对于HTTP的关注在于让服务器尽快响应请求,以及减少请求对服务器的开销
      1、提高服务器的请求处理能力: Apache 通过模块化的设计来适应各种环境,其中一个模块叫做多处理模块(MPM),专门用来处理多请求的情况。Apache安装在不同系统上的时候会调用不同的默 认MPM,我们不用关心具体的细节,只需要了解Unix上默认的MPM是prefork。为了优化,我们可以改成worker模式。
       prefork和worker模式的最大区别就是:prefork 的一个进程维持一个连接,而worker的一个线程维持一个连接。所以prefork更稳定但内存消耗也更大,worker没有那么稳定,因为很多连接的 线程共享一个进程,当一个线程崩溃的时候,整个进程和所有线程一起死掉。但是worker的内存使用要比prefork低得多,所以很适合用在高HTTP 请求的服务器上。

    Apache和Nginx:
      在高连接并发的情况 下,Nginx是Apache服务器不错的替代品或者补充:一方面是Nginx更加轻量级,占用更少的资源和内存;另一方面是Nginx 处理请求是异步非阻塞的,而Apache 则是阻塞型的,在高并发下Nginx 能保持低资源、低消耗和高性能。——由于Apache和Nginx各有所长,所以经常的搭配是Nginx处理前端并发,Apache处理后台请求。新秀 Node.js也是采用基于事件的异步非阻塞方式处理请求,所以在处理高并发请求上有天然的优势。
      2、高性能网站的关键缓存
      在一个Web站点中,它的数据流从服务器端到浏览器端,哪些地方可以使用缓存来优化:

    • 服务器缓存
    • 数据库缓存

      基本的数据库查询缓存——可以开启MySQL查询缓存来提高速度,并且减少系统压力

      MySQL默认不开启查询缓存,但我们可以通过修改MySQL安 装目录中的my.ini来设置查询缓存。设置的时候可以根据实际情况配置缓冲区大小、单个查询的缓冲区大小等。

    如果您希望优化MySQL服务器的查询性能 和速度,可以在MySQL配置中增加这两项:

    1. query_cache_size=SIZE SIZE是指为查询缓存开辟多大的空间。默认是0,也就是禁用查询缓存。
    2. query_cache_type=OPTION 设置查询缓存的类型,可选的值有以下这三种。
      • 0:设置查询缓存的类型,可选的值有以下这三种。
      • 1:所有的缓存结果都缓存起来,除非查询命令以SELECT S_NO_CACHE开始。
      • 2:只缓存查询命令以SELECT SQL_CACHE开始的查询结果。

    ——问题是“缓存命中率不高”,所以配置缓存之后第一件事就是查询命中率,如果命中率低,不如不做缓存。数据库查询缓存的一个设计原则:其缓存失效设计是很粗糙的——保证实时性可牺牲命中率??

      扩展数据库缓存memcached
       memcached应运而生,它是一个高性能分布式内存对象缓存系统,用于减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而 提高动态、数据库驱动网站的速度。memcached可以与数据库查询缓存配合使用。memcached的设计原则是:时间过期,即只有设定的时间到了才 去更新数据,提高了命中率,但有可能是”不新鲜的“。

  • 相关阅读:
    Asp.net mvc5开源项目"超级冷笑话"
    SQLServer清空日志
    Quartz.net配置文件实例及cron表达式详解
    2.eclipse 插件安装烦死人(2)
    2.eclipse 插件安装烦死人(1)
    1.jdk安装和环境配置
    IOS UI 设计 技术
    ios 缓存策略
    ios 缓存相关信息收集
    ios 流媒体 资料
  • 原文地址:https://www.cnblogs.com/guodq/p/5225169.html
Copyright © 2011-2022 走看看