javascript - কিভাবে ক্যাশে CSS/JS ফাইলগুলি পুনরায় লোড করতে ব্রাউজারকে জোর করবেন?




caching auto-versioning (20)

30 বা তার বেশি বিদ্যমান উত্তর প্রায় ২008 ওয়েবসাইটের জন্য দুর্দান্ত পরামর্শ। তবে, যখন এটি একটি আধুনিক, একক পৃষ্ঠা অ্যাপ্লিকেশন (এসপিএ) আসে তখন এটি কিছু মৌলিক অনুমান পুনরায় চিন্তা করার সময় হতে পারে ... বিশেষ করে ধারণা যে ওয়েব সার্ভারের জন্য কেবলমাত্র একক, এটির সাম্প্রতিকতম সংস্করণ সরবরাহ করা ফাইল।

আপনার ব্রাউজারে লোড হওয়া একটি SPA এর সংস্করণ M কে কল্পনা করুন আপনি একজন ব্যবহারকারী আছেন:

  1. আপনার সিডি পাইপলাইন সার্ভারে অ্যাপ্লিকেশনটির নতুন সংস্করণ এন স্থাপন করে
  2. আপনি SPA এর মধ্যে নেভিগেট করেন যা সার্ভারে XHR প্রেরণ করে /some.template পেতে
    • (আপনার ব্রাউজার পৃষ্ঠাটি রিফ্রেশ করেনি, তাই আপনি এখনও সংস্করণ চলছে M )
  3. সার্ভার /some.template এর সামগ্রীগুলির সাথে প্রতিক্রিয়া /some.template - আপনি কি এটি টেমপ্লেটের সংস্করণ এম বা N ফেরত চান?

যদি /some.template এর ফর্ম্যাট এম এবং এন (অথবা ফাইলটির নামকরণ করা হয় বা যাই হোক না কেন) এর মধ্যে পরিবর্তিত হয় তবে সম্ভবত আপনি /some.template পুরানো সংস্করণ M চালানোর জন্য ব্রাউজারে পাঠানো টেমপ্লেটের সংস্করণ এন চান না

যখন দুটি শর্ত পূরণ হয় তখন ওয়েব অ্যাপ্লিকেশনগুলি এই সমস্যাটিতে চালিত হয়:

  • প্রাথমিক পৃষ্ঠা লোডের পরে সংস্থানগুলিকে অ্যাসাইন্রোনাসে কিছুকাল অনুরোধ করা হয়
  • অ্যাপ্লিকেশন লজিক সম্পদ সামগ্রী সম্পর্কে জিনিসগুলি (ভবিষ্যতে সংস্করণগুলিতে পরিবর্তন হতে পারে) অনুমান করে

একবার আপনার অ্যাপ্লিকেশনের সমান্তরাল একাধিক সংস্করণ পরিবেশন করা প্রয়োজন, ক্যাশিং সমাধান এবং "পুনরায় লোড হচ্ছে" তুচ্ছ হয়ে যায়:

  1. সংস্করণ dirs মধ্যে সব সাইট ফাইল ইনস্টল করুন: /v<release_tag_1>/…files… , /v<release_tag_2>/…files…
  2. ব্রাউজার ক্যাশ ফাইল চিরতরে যাক HTTP হেডার সেট করুন
    • (বা এখনো ভাল, একটি সিডিএন মধ্যে সবকিছু রাখুন)
  3. সমস্ত <script> এবং <link> ট্যাগগুলি, ইত্যাদি আপডেট করুন যে ফাইলটিকে সংস্করণযুক্ত ডিআইআরগুলির মধ্যে একটিতে নির্দেশ করুন

শেষ পদক্ষেপটি চতুর বলে মনে হচ্ছে, কারণ এটি আপনার সার্ভার-সাইড বা ক্লায়েন্ট-সাইড কোডের প্রতিটি URL এর জন্য একটি URL নির্মাতা কল করতে পারে। অথবা আপনি কেবল <base> ট্যাগটির চতুর ব্যবহার করতে পারেন এবং বর্তমান সংস্করণটি এক জায়গায় পরিবর্তন করতে পারেন।

Around একটি নতুন সংস্করণ প্রকাশ করা হলে ব্রাউজারকে সবকিছু পুনরায় লোড করার জন্য বাধ্য করার পক্ষে এটির একটি উপায় প্রায় আক্রমনাত্মক। কিন্তু কোন অগ্রগতির ক্রিয়াকলাপগুলি সম্পন্ন করার জন্য, এটি সমান্তরালভাবে কমপক্ষে দুটি সংস্করণগুলিকে সমর্থন করার পক্ষে আরও সহজ হতে পারে: v-current এবং v-পূর্ব।

আমি লক্ষ্য করেছি যে কিছু ব্রাউজার (বিশেষ করে, ফায়ারফক্স ও অপেরা) খুব বেশি উদ্যোগী। CSS এবং .js ফাইলগুলির ক্যাশে কপি ব্যবহার করেও ব্রাউজার সেশনগুলির মধ্যে। এটি যখন আপনি এই ফাইলগুলির মধ্যে একটি আপডেট করেন তখন একটি সমস্যা হয় তবে ব্যবহারকারীর ব্রাউজার ক্যাশেড অনুলিপি ব্যবহার করে চলতে থাকে।

প্রশ্ন হল: ব্যবহারকারীর ব্রাউজারটি যখন এটি পরিবর্তিত হয় তখন ফাইলটিকে পুনরায় লোড করার জন্য সবচেয়ে মার্জিত উপায় কী?

আদর্শভাবে সমাধানটি ব্রাউজারকে পৃষ্ঠায় প্রতিটি দর্শনতে ফাইলটি পুনরায় লোড করতে বাধ্য করবে না। আমি উত্তর হিসাবে আমার নিজের সমাধান পোস্ট করব, কিন্তু যদি কেউ ভাল সমাধান করে তবে আমি আগ্রহী নই এবং আমি আপনার ভোট দেওয়ার সিদ্ধান্ত দেব।

হালনাগাদ:

এখানে কিছুক্ষণ আলোচনা করার পর, আমি জন মিলিকিন এবং ডায়লির পরামর্শটি কার্যকর হতে দেখেছি । এটা এই জন্য একটি শব্দ আছে সক্রিয় আউট: স্বয়ংক্রিয় সংস্করণ

আমি নীচের একটি নতুন উত্তর পোস্ট করেছি যা আমার আসল সমাধান এবং জনের পরামর্শের সমন্বয়।

এসসিডিএফ দ্বারা প্রস্তাবিত আরেকটি ধারণা ফাইলটিতে একটি বগুড়া ক্যোয়ারী স্ট্রিং যোগ করা হবে। (কিছু পাইথন কোড স্বয়ংক্রিয়ভাবে টাইমস্ট্যাম্প ব্যবহার করে একটি বোগাস ক্যোয়ারী স্ট্রিং হিসাবে পিআই দ্বারা জমা দেওয়া হয়েছিল।)। যাইহোক, ব্রাউজার একটি ক্যোয়ারী স্ট্রিং সহ একটি ফাইল ক্যাশে করবে কিনা তা নিয়ে কিছু আলোচনা আছে। (মনে রাখবেন, আমরা ব্রাউজারটিকে ফাইলটি ক্যাশে করতে এবং ভবিষ্যতের ভিজিটগুলিতে এটি ব্যবহার করতে চাই। আমরা এটি পরিবর্তন করার পরেই এটি আবার ফাইলটি পেতে চাই।)

যেহেতু এটি একটি বুদ্ধিজীবী ক্যোয়ারী স্ট্রিং এর সাথে কি ঘটে তা স্পষ্ট নয়, তাই আমি সেই উত্তরটি স্বীকার করছি না।


ASP.NET 4.5 এবং তারপরে আপনি স্ক্রিপ্ট bundling ব্যবহার করতে পারেন।

অনুরোধটি http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 বান্ডেলের জন্য AllmyScripts এবং একটি ক্যোয়ারী স্ট্রিং জোড়া v = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 রয়েছে। ক্যোয়ারী স্ট্রিং ভিটিতে একটি মান টোকেন রয়েছে যা ক্যাশিংয়ের জন্য ব্যবহৃত একটি অনন্য সনাক্তকারী। যতক্ষণ পর্যন্ত বান্ডিল পরিবর্তন হয় না, ASP.NET অ্যাপ্লিকেশনটি এই টোকেনটি ব্যবহার করে অলমাইকন বান্ডিলের জন্য অনুরোধ করবে। যদি বান্ডেলের কোনও ফাইল পরিবর্তিত হয়, তবে ASP.NET অপ্টিমাইজেশান ফ্রেমওয়ার্ক একটি নতুন টোকেন তৈরি করবে, যা বান্ডেলের জন্য ব্রাউজারের অনুরোধগুলি সর্বশেষ বান্ডিল পাবে।

খনি সঙ্গে প্রথমবারের পাতা লোড বৃদ্ধি কর্মক্ষমতা সহ bundling অন্যান্য সুবিধা আছে।


Foo.css ব্যবহার করবেন না? সংস্করণ = 1! ব্রাউজার GET ভেরিয়েবলগুলির সাথে URL গুলি ক্যাশ করতে অনুমিত হয় না। http://www.thinkvitamin.com/features/webapps/serving-javascript-fast মতে, যদিও IE এবং ফায়ারফক্স এটিকে উপেক্ষা করে, অপেরা এবং সাফারি না! পরিবর্তে, foo.v1234.css ব্যবহার করুন এবং সংস্করণ নম্বরটি ফাঁকা করার জন্য পুনরায় লেখার নিয়মগুলি ব্যবহার করুন।


Laravel (পিএইচপি) আমরা পরিষ্কার এবং মার্জিত উপায় অনুসরণ করে এটি করতে পারেন (ফাইল সংশোধন টাইমস্ট্যাম্প ব্যবহার করে):

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

এবং সিএসএস জন্য অনুরূপ

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

আকর্ষণীয় পোস্ট। এখানে সমস্ত উত্তরগুলি পড়ার সাথে সাথে আমি "বোগাস" কোয়েরি স্ট্রিংগুলির সাথে কোনও সমস্যা নেই (যা আমি নিশ্চিত নই কেন সবাই এটি ব্যবহার করতে অনিচ্ছুক।) আমি অনুমান করছি সমাধান (যা apache পুনর্লিখন নিয়মগুলির প্রয়োজনগুলি সরিয়ে দেয়) যেমন গৃহীত উত্তর হিসাবে) CSS ফাইলের বিষয়বস্তুগুলির একটি ছোট HASH গণনা করা হয় (ফাইলের সময়কাল পরিবর্তে) একটি বোগাস কোয়েরিস্ট্রীং হিসাবে।

এই নিম্নলিখিত ফলাফল হবে:

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

অবশ্যই ডেটাটাইম সমাধানগুলিও CSS ফাইল সম্পাদনা করার ক্ষেত্রে কাজটি সম্পন্ন করে তবে আমি মনে করি এটি CSS ফাইলের সামগ্রীর সম্পর্কে এবং ফাইলটি ডেটাটাইম সম্পর্কে নয়, তাহলে কেন এই মিশ্রিত করা হবে?


আপনি আপনার CSS / Js আমদানির শেষে ?foo=1234 ঠিক করতে পারেন, 1234 পরিবর্তন করুন যা আপনার পছন্দ হতে পারে। একটি উদাহরণ জন্য SO এইচটিএমএল উত্স একটি চেহারা আছে।

এই ধারণাটা কি হচ্ছে? প্যারামিটারগুলি যে কোনও অনুরোধে প্রত্যাখ্যাত / উপেক্ষা করা হয় এবং যখন আপনি একটি নতুন সংস্করণটি চালু করেন তখন আপনি সেই নম্বরটি পরিবর্তন করতে পারেন।

দ্রষ্টব্য: ক্যাশিংকে কীভাবে প্রভাবিত করে ঠিক সে সম্পর্কে কিছু যুক্তি রয়েছে। আমি বিশ্বাস করি এটির সাধারণ ধারণা হল যে, GET অনুরোধগুলি পরামিতিগুলির সাথে বা বিনা প্যাকগুলি কার্যকর হওয়া উচিত , তাই উপরের সমাধানটি কাজ করা উচিত।

তবে, উভয় ওয়েব সার্ভারের কাছে এটি নির্ধারণ করা হয়েছে যে এটি স্পিকারের অংশটি এবং ব্যবহারকারী যে ব্রাউজারটি ব্যবহার করে সেটি মেনে চলতে চায় কিনা তা নির্ধারণ করতে পারে, কারণ এটি ঠিক এগিয়ে যেতে পারে এবং যাইহোক একটি নতুন সংস্করণ চাইতে পারে।


আপনি যদি "সেশন-ওয়াইড ক্যাশিং" জোর করতে পারেন তবে আপনি js / css ফাইলের একটি স্পারাস প্যারামিটার হিসাবে session-id যোগ করেন:

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

যদি আপনি একটি সংস্করণ-প্রশস্ত ক্যাশিং চান তবে আপনি ফাইল তারিখ বা অনুরূপ মুদ্রণ করতে কিছু কোড যুক্ত করতে পারেন। আপনি যদি জাভা ব্যবহার করেন তবে আপনি একটি মার্জিত উপায়ে লিঙ্ক তৈরি করতে একটি কাস্টম-ট্যাগ ব্যবহার করতে পারেন।

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

আমি এই "স্বয়ংক্রিয় সংস্করণ" বলা শুনেছেন। ইউআরএলটিতে স্ট্যাটিক ফাইলের মাইটাইমকে সবচেয়ে সাধারণ পদ্ধতিতে অন্তর্ভুক্ত করা এবং পুনরায় লেখার হ্যান্ডলারগুলি বা URL ব্যবহার করে এটি ফাঁস করা:

আরো দেখুন:


তার নিখুঁত সমাধান জন্য Kip এ ধন্যবাদ!

আমি এটি Zend_view_Helper হিসাবে ব্যবহার করার জন্য প্রসারিত করেছি। কারন আমার ক্লায়েন্ট একটি ভার্চুয়াল হোস্টে তার পৃষ্ঠা চালায় তাই আমি এটির জন্য এটি প্রসারিত করেছি।

আশা করি এটা অন্য কেউ সাহায্য করবে।

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // file exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {

                return $filePath;
            }
        }
    }

}

চিয়ার্স এবং ধন্যবাদ।


নিজে সংস্করণ পরিবর্তন করার পরিবর্তে, আমি আপনাকে সিএসএস ফাইলের MD5 হ্যাশ ব্যবহার করার সুপারিশ করব।

সুতরাং আপনার ইউআরএল কিছু হতে হবে

http://mysite.com/css/[md5_hash_here]/style.css

আপনি এখনও হ্যাশ খোলার জন্য পুনর্লিখনের নিয়মটি ব্যবহার করতে পারেন তবে সুবিধাটি হল যে আপনি এখন আপনার ক্যাশ নীতিটি "চিরতরে ক্যাশে" সেট করতে পারেন, কারণ যদি URL একই থাকে তবে এর অর্থ হল ফাইলটি অপরিবর্তিত।

তারপর আপনি একটি সহজ শেল স্ক্রিপ্ট লিখতে পারেন যা ফাইলটির হ্যাশ গণনা করে এবং আপনার ট্যাগটি আপডেট করতে পারে (আপনি সম্ভবত এটি অন্তর্ভুক্ত করার জন্য একটি পৃথক ফাইলতে সরাতে চান)।

প্রতিটি সময় সিএসএস পরিবর্তনের সময় কেবল সেই স্ক্রিপ্টটি চালান এবং আপনি ভাল। যখন তারা পরিবর্তিত হয় তখন ব্রাউজার কেবলমাত্র আপনার ফাইলগুলিকে পুনরায় লোড করবে। আপনি যদি সম্পাদনা করেন এবং এটি পূর্বাবস্থায় ফিরিয়ে আনেন তবে আপনার দর্শকদের পুনরায় ডাউনলোড না করার জন্য কোন সংস্করণটি আপনাকে ফেরত দিতে হবে তা figuring in কোন ব্যথা নেই।


আপডেট: জন মিলিকিন এবং da5id থেকে পরামর্শ অন্তর্ভুক্ত করার জন্য পুনরায় লিখুন । এই সমাধান পিএইচপি লেখা হয়, কিন্তু সহজে অন্যান্য ভাষা থেকে অভিযোজিত করা উচিত।

আপডেট 2: নিক জনসন থেকে যে মন্তব্যগুলি আসছে তা json-1.3.js রেজেক্স json-1.3.js ফাইলগুলিতে সমস্যা সৃষ্টি করতে পারে। সমাধানটি শেষ পর্যন্ত ঠিক দশমিক সংখ্যা থাকলেই কেবল পুনর্লিখন করা হয়। (10 টি সংখ্যা 9/9/2001 থেকে 11/20/2286 পর্যন্ত সমস্ত টাইমস্ট্যাম্প জুড়ে।)

প্রথমে, আমরা .htaccess এ নিম্নলিখিত পুনর্লিখিত নিয়ম ব্যবহার করি:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

এখন, আমরা নিম্নলিখিত পিএইচপি ফাংশন লিখুন:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

এখন, যেখানেই আপনি আপনার CSS অন্তর্ভুক্ত করবেন, এটি এটিকে পরিবর্তন করুন:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

এটার জন্য:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

এই ভাবে, আপনাকে আবার লিঙ্ক ট্যাগটি পরিবর্তন করতে হবে না এবং ব্যবহারকারী সর্বদা সর্বশেষ CSS দেখতে পাবে। ব্রাউজারটি সিএসএস ফাইল ক্যাশে করতে সক্ষম হবে, কিন্তু যখন আপনি আপনার CSS এ কোনও পরিবর্তন করবেন তখন ব্রাউজার এটি একটি নতুন URL হিসাবে দেখতে পাবে, তাই এটি ক্যাশেড কপিটি ব্যবহার করবে না।

এটি ছবি, ফেভিকন এবং জাভাস্ক্রিপ্টের সাথেও কাজ করতে পারে। মূলত কিছু যে গতিশীলভাবে উত্পন্ন হয় না।


সহজ ক্লায়েন্ট-পার্শ্ব টেকনিক

সাধারণভাবে, ক্যাশিং ভাল .. সুতরাং আপনি একটি ওয়েবসাইট বিকাশ হিসাবে আপনি নিজের জন্য সমস্যার সমাধান করছেন কিনা তা নির্ভর করে কয়েকটি কৌশল রয়েছে, অথবা আপনি কোনও পরিবেশ পরিবেশে ক্যাশে নিয়ন্ত্রণ করার চেষ্টা করছেন কিনা তা নির্ভর করে।

আপনার ওয়েবসাইটের সাধারণ দর্শকদের একই অভিজ্ঞতা থাকবে না যখন আপনি সাইটটি তৈরি করছেন। যেহেতু গড় পরিদর্শক সাইটে কম ঘন ঘন আসে (সম্ভবত আপনি প্রতি মাসে কেবল কয়েক বারই, যদি না আপনি Google বা হাই 5 নেটওয়ার্ক না হন তবে) আপনার ক্যাশে ফাইলগুলি কম হওয়ার সম্ভাবনা কম, এবং এটি যথেষ্ট হতে পারে। যদি আপনি ব্রাউজারে একটি নতুন সংস্করণ জোর করতে চান তবে আপনি সর্বদা অনুরোধে একটি ক্যোয়ারী স্ট্রিং যোগ করতে পারেন এবং যখন আপনি বড় পরিবর্তনগুলি করেন তখন সংস্করণ নম্বরটি আপলোড করুন:

<script src="/myJavascript.js?version=4"></script>

এটি প্রত্যেককে নতুন ফাইল পায় তা নিশ্চিত করবে। এটি কাজ করে কারণ ব্রাউজারটি ক্যাশে একটি অনুলিপি আছে কিনা তা নির্ধারণ করতে ফাইলের URL টি দেখায়। যদি আপনার সার্ভারটি ক্যোয়ারী স্ট্রিংয়ের সাথে কিছু করার জন্য সেট আপ না করা থাকে তবে এটি উপেক্ষা করা হবে, তবে নামটি ব্রাউজারে একটি নতুন ফাইলের মতো দেখতে হবে।

অন্যদিকে, যদি আপনি কোনও ওয়েবসাইট তৈরি করেন তবে প্রতি সংস্করণে আপনার সংস্করণ পরিবর্তন করার সময় সংস্করণ নম্বরটি পরিবর্তন করতে চান না। যে ক্লান্তিকর হবে।

সুতরাং যখন আপনি আপনার সাইটটি তৈরি করছেন, তখন একটি ভাল কৌশল স্বয়ংক্রিয়ভাবে একটি ক্যোয়ারী স্ট্রিং প্যারামিটার তৈরি করবে:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

অনুরোধে একটি ক্যোয়ারী স্ট্রিং যোগ করা একটি সংস্থান সংস্করণের একটি ভাল উপায়, তবে একটি সহজ ওয়েবসাইটের জন্য এটি অপ্রয়োজনীয় হতে পারে। এবং মনে রাখবেন, ক্যাশিং একটি ভাল জিনিস।

ব্রাউজারটি ক্যাশে ফাইল রাখার বিষয়ে অপরিহার্য নয় বলে উল্লেখ করাও মূল্যবান। ব্রাউজারের এই ধরণের জিনিসগুলির জন্য নীতি রয়েছে এবং তারা সাধারণত HTTP স্পেসিফিকেশনে নির্ধারিত নিয়মগুলি দ্বারা বাজানো হয়। যখন একটি ব্রাউজার একটি সার্ভারের অনুরোধ করে তখন প্রতিক্রিয়া অংশটি একটি অতিরিক্ত শিরোনাম .. একটি তারিখ যা ব্রাউজারটিকে কতক্ষণ এটি ক্যাশে রাখা উচিত তা বলে। পরের বার যখন ব্রাউজার একই ফাইলের অনুরোধে আসে, এটি দেখে যে এটি একটি অনুলিপি ক্যাশে রয়েছে এবং এটি ব্যবহার করা উচিত কিনা তা নির্ধারণ করার জন্য EXPIRES তারিখটি দেখায়।

সুতরাং এটি বিশ্বাস করুন নাকি, এটি আসলে আপনার সার্ভার যা ব্রাউজার ক্যাশেটিকে এতটা স্থির করে তোলে। আপনি আপনার সার্ভার সেটিংস সামঞ্জস্য করতে পারেন এবং EXPIRES হেডারগুলি পরিবর্তন করতে পারেন, তবে উপরে লেখা ছোট্ট কৌশলটি সম্ভবত এটির জন্য যেতে আপনার পক্ষে আরও সহজ উপায়। যেহেতু ক্যাশিং ভাল, তাই আপনি সাধারণত ভবিষ্যতে এ তারিখটি সেট করতে চান (একটি "ফার-ভবিষ্যত শিরোনাম মেয়াদ শেষ করে"), এবং পরিবর্তনের জন্য উপরে বর্ণিত কৌশলটি ব্যবহার করুন।

যদি আপনি এইচটিএমএল সম্পর্কিত আরও তথ্যের জন্য আগ্রহী হন বা এই অনুরোধগুলি কীভাবে তৈরি করা হয়, তাহলে স্টিভ সোডার্সের "হাই পারফরমেন্স ওয়েব সাইটস" একটি ভাল বই। এটি বিষয় একটি খুব ভাল ভূমিকা।


আপনি কেবল CSS / JS url এর সাথে কিছু র্যান্ডম নম্বর যুক্ত করতে পারেন

example.css?randomNo=Math.random()

আমার বিকাশের জন্য, আমি ক্রোমের একটি দুর্দান্ত সমাধান খুঁজে পেয়েছি।

https://developer.chrome.com/devtools/docs/tips-and-tricks#hard-reload

বিকাশকারী সরঞ্জামগুলি খুললে, রিফ্রেশ বোতামটিতে কেবলমাত্র লম্বা ক্লিক করুন এবং একবার আপনি "খালি ক্যাশে এবং হার্ড লোড লোড" এর উপরে চলে যান।

এটি আমার সেরা বন্ধু, এবং আপনি কি চান তা পেতে একটি সুপার হালকা ওজন উপায়!


একটি মৃত থ্রেড ফিরে আনতে জন্য দুঃখিত।

@ TomA সঠিক।

"কোয়েরিস্ট্রিং" পদ্ধতি ব্যবহার করে স্টিভ সোডার্সের উদ্ধৃতি অনুসারে ক্যাশে করা হবে না :

... যে স্কুইড, একটি জনপ্রিয় প্রক্সি, একটি querystring সঙ্গে সম্পদ ক্যাশে না।

@ TomA ব্যবহার করার পরামর্শ। TIMEMEAMAM.c.css ভাল, তবে এমডি 5 আরও ভালো হবে যখন সামগ্রী প্রকৃতপক্ষে পরিবর্তিত হয়, এমডি 5 এছাড়াও পরিবর্তিত হয়।


ক্লায়েন্ট পার্শ্বযুক্ত DOM পন্থাটি গতিশীলভাবে স্ক্রিপ্ট নোড (বা CSS) উপাদান তৈরির কাছে পাওয়া যায় নি:

<script>
    var node = document.createElement("script"); 
    node.type = "text/javascript";
    node.src = 'test.js?'+Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>

আপনি যদি কোনও আধুনিক ব্রাউজার ব্যবহার করেন তবে আপনি কোন মেনিফেস্ট ফাইলটি ব্রাউজারকে অবহিত করতে পারেন যা ফাইলগুলি আপডেট করতে হবে। এটিতে কোন শিরোনাম, ইউআরএলগুলিতে কোন সংস্করণের প্রয়োজন নেই ...

আরো বিস্তারিত জানার জন্য দেখুন: https://developer.mozilla.org/nl/docs/Web/HTML/Applicatie_cache_gebruiken#Introduction


আমি এই উত্তরটিকে SilverRripe হিসাবে যুক্ত করছি http://www.silverstripe.org নির্দিষ্ট উত্তর যা আমি খুঁজছি এবং খুঁজে পাওয়া যায় নি কিন্তু পড়ার বাইরে কাজ করেছি: http://api.silverstripe.org/3.0/source-class-SS_Datetime.html#98-110

আশা করি এটি একটি SilverSripe টেম্পলেট ব্যবহার করে এবং প্রতিটি পৃষ্ঠা দর্শন / রিফ্রেশে একটি ক্যাশেড চিত্র পুনরায় লোড করার চেষ্টা করতে সহায়তা করবে। আমার ক্ষেত্রে এটি একটি gif অ্যানিমেশন যা কেবল একবার খেলে এবং এটি ক্যাশে হওয়ার পরে পুনরায় প্লে করে না। আমার টেমপ্লেটে আমি কেবল যোগ করেছি:

?$Now.Format(dmYHis)

একটি অনন্য টাইম স্ট্যাম্প তৈরি করার জন্য ফাইল পাথের শেষে এবং একটি নতুন ফাইল হিসাবে ব্রাউজারটিকে কার্যকর করার জন্য জোর করে।


আমি সম্প্রতি পাইথন ব্যবহার করে এই সমাধান। এখানে কোড (অন্যান্য ভাষায় গ্রহণ সহজ হওয়া উচিত):

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # this is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag("""<script type="text/javascript" """ +\
        """ %s src="/%s"></script>""", name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" ' +\
        """%s href="/%s">', name, **kw) 

এই কোড মূলত URL- এ একটি ক্যোয়ারী প্যারামিটার হিসাবে ফাইল টাইম-স্ট্যাম্প যুক্ত করে। নিম্নলিখিত ফাংশন কল

script("/main.css")

ফলাফল হবে

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

অবশ্যই সুবিধাটি হল যে আপনার আর কখনও আপনার এইচটিএমএল পরিবর্তন করতে হবে না, সিএসএস ফাইলটি স্পর্শ করলে স্বয়ংক্রিয়ভাবে একটি ক্যাশে অবৈধীকরণ ট্রিগার হবে। খুব ভাল কাজ করে এবং ওভারহেড লক্ষ্যনীয় নয়।


গুগল ক্রোম হার্ড লোড এবং সেইসাথে খালি ক্যাশ এবং হার্ড রিলোড লোড বিকল্প আছে। আপনি একটি নির্বাচন করতে পুনরায় লোড বাটন ক্লিক করুন (ইনস্পেক্ট মোডে)।







auto-versioning