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

    提升页面性能的方法大致可归纳为以下几种:1.资源压缩合并,减少HTTP请求   2.浏览器缓存  3.非核心代码异步加载  4.CDN加速  5.DNS预解析

    一、浏览器缓存:

    缓存分类:1)强缓存 2)协商缓存 

    强缓存:在缓存时间未失效前,不会询问服务器,直接加载本地缓存资源,相关的HTTP头:

    Expires --后面会跟一个绝对时间,在此之前,缓存都是有效的。

    Cache-Control ,它有如下几个值

    • no-cache:在释放缓存副本之前,强制高速缓存将请求提交给原始服务器进行验证
    • no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。
    • public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。
    • private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。
    • max-age:从当前请求开始,允许获取的响应被重用的最长时间(秒)。

    max-age后面跟的是相对时间

    协商缓存:请求发送到服务器后,由服务器判定是否使用缓存,相关的HTTP头:

    Last-Modified 资源的最新修改时间 If-Modified-Since 上一次服务器的修改时间

    Etag HTTP响应头是资源的特定版本的标识符。这可以让缓存更高效,并节省带宽,因为如果内容没有改变,Web服务器不需要发送完整的响应。

    而如果内容发生了变化,使用ETag有助于防止资源的同时更新相互覆盖。

    浏览器缓存参考: 浏览器缓存--前端随笔     HTTP缓存策略--前端开发博客 

    二、异步加载脚本

    异步加载有以下几种方式:1)动态脚本加载  2)defer  3)async

    //动态加载脚本
    var myScript= document.createElement("script"); myScript.type = "text/javascript"; myScript.src="package.js"; document.body.appendChild(myScript);

      defer:只适用于外部脚本,整个页面解析完毕后才会执行,如果是多个,会按照加载顺序依次执行

      async :也只适用于外部脚本,加载完后立即执行,如果是多个,执行顺序并不保证与加载顺序一致

    三、预解析DNS

    <meta http-equiv="x-dns-prefetch-control" content="on">
    
    <link rel="dns-prefetch" href="//www.zhix.net">
  • 相关阅读:
    jmeter(46) redis
    jmeter(45) tcp/ip协议
    Codeforces Round #538 (Div. 2)D(区间DP,思维)
    Codeforces Global Round 1D(DP,思维)
    Educational Codeforces Round 57D(DP,思维)
    UPC11073(DP,思维)
    Yahoo Progamming Contest 2019D(DP,思维)
    Atcoder Beginner Contest 118D(DP,完全背包,贪心)
    Xuzhou Winter Camp 1C(模拟)
    Educational Codeforces Round 57 (Rated for Div. 2)D(动态规划)
  • 原文地址:https://www.cnblogs.com/jingmi-coding/p/9324285.html
Copyright © 2011-2022 走看看