• web前端优化之常规优化(1)


     页面打开速度(Fully Loaded)

          1  网站首页(或列表页)之 First View :打开速度应在 3秒+0.5秒 内;

          2  对 Repeat View 时的各项指标暂不作要求;

      首屏打开时间(Start Render)

         1  网站首页(或列表页) 之 First View :首屏渲染速度应在 1秒+0.5秒 内;

      文档解析完毕时间(Document Complete):

          对此指标暂不作要求。

      常规优化建议:

      1   javascript 外联文件引用放在 html 文档底部:具体如何摆放内联JS/CSS和外联JS/CSS,请参考 优化第二阶段;

      2   css 外联文件引用在 html 文档头部:位于 header 内;

      3   http 静态资源尽量用多个子域名:充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力,参考 附录C;

            具体建议:

    JS、CSS、CSS背景图片、CSSSprite图片分散在 s0~s2.haoyangshiimg.com 下;

    业务类图片分散在 p0~p3.haoyangshi.com 下;

      4   服务器端提供 html 文档和 http 静态资源时,尽量开启 gzip 压缩;

    json/xml 等格式的文本响应,也建议开启 gzip ;

    jepg/png 等图片,可以选择不开启 gzip,因为可能服务器端图片无损压缩算法已经很强悍了,不需要依赖于 gzip;

      5  在 js、css、image 等资源响应的 http headers 里,设置 expires、last-modified;
                 nginx如下设置:        

    location ~ .*.(js|css)${
    expires 30d;
    }
    location ~ .*.(gif|jpg|jpeg|png|bmp)${
    expires 1M;
    } 
    

         6 尽量减少 HTTP Requests 的数量;

              通过 combo handler 合并 js 和 css 的下载,参考 优化第三阶段;

             本阶段请尽量减少外联 js/css 文件数,尽量减少 ajax 调用;

      7 js/css 的 minify:可统一通过 combo handler 做到压缩加合并;

      8 减少不必要的 301/302 跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);

      9 请大量使用 CSS Sprites:这样做可以大大地减少CSS背景图片的HTTP请求次数;

      10 首屏不需要展示的较大尺寸图片,请使用 LazyLoad ;

      11 避免404错误:请求一个外联 js 失败时获得的404错误,不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码;

      12 减少 cookies 的大小:尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;

           去除不必要的 cookie ;

          尽量减少 cookie 的大小;

          留心将 cookie 设置在适当的域名下,避免影响到其他网站;

          设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie,从而减少响应时间。

      13 使用无 cookies 的域:

      当浏览其请求一个静态图片并一同发送 cookie 时,服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies,所以需要把你的静态资源放在另一个子域名下。

      如果你的域名是 www.example.org,你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org,那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下,你可以用一个全新的没有 cookie 的域名来放置你的静态资源。

      14 避免使用 javascript 来定位布局

  • 相关阅读:
    使用grpc C++功能
    华为任正非访谈
    苹果产品
    异步编程
    基于磁盘存储
    spring 应用
    java简单框架设计
    消息队列架构
    03 java 基础:注释 关键字 标识符 JShell
    02 java 基础:java 文件名与类名关系 CLASSPATH
  • 原文地址:https://www.cnblogs.com/heavens/p/5241083.html
Copyright © 2020-2023  润新知