সিএসএস, এবং জাভাস্ক্রিপ্ট সংরক্ষণ করার জন্য এইচটিএমএল 5 স্থানীয় স্টোরেজ ব্যবহার করা কি বাস্তবসম্মত?

Question

ধারণাটি হ'ল এইচটিএমএল 5 স্থানীয় স্টোরেজটি প্রায়শই অ্যাক্সেস করা সিএসএস এবং জাভাস্ক্রিপ্ট সঞ্চয় করতে ব্যবহার করা।

উদাহরণস্বরূপ (সিউডো-কোড):

var load_from_cdn = সত্য;
যদি (স্থানীয় সঞ্চয়স্থান সনাক্ত করে)  
{
  যদি (সিএসএসের ক্যাশে, জেএস পাওয়া যায়)
  {
     স্থানীয় স্টোরেজ ক্যাশে লোড করুন
     load_from_cdn = মিথ্যা;
  }
}
যদি (লোড_ফর্ম_সিডিএন)
{
   document.write ( '<স্ক্রিপ্ট> ...');
}

এটি কি সম্ভব বা বাস্তববাদী?

আমি সচেতন ব্রাউজার ক্যাশে করি, এখনও কিছু শিরোনাম অ্যাক্সেস চেকিং থাকবে,
আমি ধরে নিচ্ছি যে কোনও এইচটিপি প্রবেশাধিকার ভাল নয় (আমার চিন্তায় )

পিএস: দেখে মনে হচ্ছে যে স্থানীয় সঞ্চয়স্থান কেবল কী-মূল্যের জোড়কে সমর্থন করে , কেউ কি এটি প্রমাণ করতে পারে?
(কিছু উদাহরণ সহ সেরা)

Comments

উইকিপিডিয়া স্পষ্টতই এটি দুর্দান্ত প্রভাব ফেলতে চেষ্টা করেছে: twitter.com/catrope/status/408018210529615872 twitter.com/catrope/status/408018210529615872/photo/1

— ডেভ

এটি আমার 2 বছর আগের ধারণা ... :)

— আজ্রিয়াল

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

— ডেভ

সেই ছবিটি বিভ্রান্তিকর। আপনি যদি আরও নীচে স্ক্রোল করে দেখেন যে বিশাল ড্রপ আসলে ছিল না কারণ লোকালস্টোরেজগুলি ক্যাশিংয়ের চেয়ে ভাল ছিল, বরং তাদের ক্যাশেড সেটআপের মধ্যে একটি বাগ ছিল: " কম দর্শনীয় হয়ে উঠেছে :( গ্রাফটি অভ্যন্তরীণ ট্র্যাফিকের কারণে ড্রপ হয়েছে স্থানীয় স্টোরেজে ক্যাচিং বাগ লুকিয়ে থাকা "- twitter.com/catrope/status/408110382599782400

— জেমি বার্কার

খুঁজে বার করো addyosmani.com/basket.js

— xhh

Answer 1

জেএস এবং সিএসএস সঞ্চয় করতে স্থানীয় সঞ্চয়স্থান ব্যবহার করা একেবারে ঠিক। তবে স্থানীয় স্টোরেজে প্রতি ডোমেন সীমাবদ্ধতা রয়েছে 5 এম। আপনাকে এই কৌশলটি পুনর্বিবেচনা করতে হতে পারে।

ডেস্কটপ ওয়েবের জন্য, কৌতুকটি করতে আপনি ডিফল্ট ব্রাউজার ক্যাশেটি উত্তোলন করতে পারেন। কেবল জেএস এবং সিএসএস এইচটিটিপি প্রতিক্রিয়াটিকে ক্যাশেযোগ্য হতে সেট করুন। এটা সহজ এবং সহজ।

মোবাইল ওয়েবের জন্য, বিলম্বিতা বেশি। সুতরাং, এইচটিটিপি অনুরোধ হ্রাস করা গুরুত্বপূর্ণ। সুতরাং, বাহ্যিক URL এর জেএস এবং সিএসএস থাকা সর্বোত্তম op জেএস এবং সিএসএসের ইনলাইন থাকা আরও ভাল। এটি এইচটিটিপি অনুরোধগুলি হ্রাস করে, তবে এইচটিএমএল বিষয়বস্তু স্ফীত করে। তারপর কি? যেমনটি আপনি বলেছিলেন, স্থানীয় সঞ্চয়স্থান ব্যবহার করুন!

কোনও ব্রাউজার যখন প্রথমবার সাইটটিতে যায় তখন জেএস এবং সিএসএসকে ইনলাইন করা হয়। জেএসের আরও দুটি কাজ রয়েছে: 1) স্থানীয় স্টোরেজে জেএস এবং সিএসএস সংরক্ষণ করুন; 2) জেএস এবং সিএসএস স্থানীয় স্টোরেজে রয়েছে তা পতাকাঙ্কিত করতে কুকি সেট করুন।

যখন দ্বিতীয়বার ব্রাউজারটি সাইটে অ্যাক্সেস করে, সার্ভারটি কুকি পায় এবং জেনে থাকে যে ব্রাউজারটি ইতিমধ্যে সম্পর্কিত জেএস এবং সিএসএস রয়েছে। সুতরাং রেন্ডার এইচটিএমএলকে স্থানীয় স্টোরেজ থেকে জেএস এবং সিএসএস পড়তে এবং ডিওএম ট্রিতে toোকানোর জন্য ইনলাইন জেএস রয়েছে।

এটি কীভাবে বিং ডট কম মোবাইল সংস্করণ তৈরি হয় তা প্রাথমিক ধারণা। উত্পাদনে এটি প্রয়োগ করার সময় আপনার জেএস এবং সিএসএস সংস্করণ নিয়ন্ত্রণ বিবেচনার প্রয়োজন হতে পারে।

ধন্যবাদ

Comments

হ্যাঁ, আমি যা ভাবছি তার খুব কাছে।

— আজ্রিয়াল

গুগল পেজ স্পিড মোডের জন্য একটি মডিউল তৈরি করেছে যা খুব একই কাজ করে। এখানে পৃষ্ঠা যেখানে তারা পণ্য, bads এবং dontknows সম্পর্কে কথা বলতে এর developers.google.com/speed/pagespeed/module/...

— tacone

upvated, কিন্তু ডাব্লুটিএফএফ এই ক্ষেত্রে "ইনলাইন" মানে না। "ইনলাইন" এর 5 টি পৃথক অর্থ রয়েছে।

— আলেকজান্ডার মিলস

এটি আসলে ডেস্কটপের জন্য 10 এমবি এবং মোবাইলের জন্য 5 এমবিতে উন্নীত হয়েছে

— রোকো সি বুলজান

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

— vsync

Answer 2

ব্রাউজারটি ইতিমধ্যে আপনার জন্য এটি করে না এবং সম্ভবত আরও ভাল?

Comments

এক আশা

— আলেকজান্ডার মিলস

Answer 3

আলোচ্য বিষয়টি কি?

ইতিমধ্যে ক্লায়েন্ট-সাইড ক্যাচিং নামে একটি সুপ্রতিষ্ঠিত প্রযুক্তি রয়েছে। এইচটিএমএল 5 স্থানীয় স্টোরেজ কী ক্ষেত্রে ক্যাচিংয়ের অনুপস্থিত তা এনে দেয়?

আপনার কিছু ধরণের অদ্ভুত অ্যাপ্লিকেশন থাকতে পারে যা অবশ্যই জাভাস্ক্রিপ্ট কোডের অংশগুলি গতিশীলভাবে লোড করতে হবে যাতে আপনি কার্যকরভাবে ক্যাশে ব্যবহার করতে পারবেন না, তবে এটি অত্যন্ত বিরল ঘটনা।

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

---

আপনার প্রথম সম্পাদনার প্রতিক্রিয়াতে (আপনার দ্বিতীয় সম্পাদনাটি অফ-টপিক হচ্ছে):

আমি সচেতন ব্রাউজার ক্যাশে করি, এখনও কিছু শিরোনাম অ্যাক্সেস চেকিং থাকবে

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

HTTP- র মাধ্যমে কিছু ডেটা সরবরাহ করার সময়, আপনি ক্যাশে সম্পর্কিত কয়েকটি শিরোনাম নির্দিষ্ট করতে পারেন:

• Last-Modified বিষয়বস্তু পরিবর্তন করা হয়েছে যখন নির্দিষ্ট করে,
• Expiresসামগ্রীটি পরিবর্তিত হলে ব্রাউজারকে সার্ভারের কাছে কখন জিজ্ঞাসা করতে হবে তা নির্দিষ্ট করে ।

এই দুটি শিরোলেখ ব্রাউজারটিকে অনুমতি দেয়:

• বারবার সামগ্রী ডাউনলোড করা থেকে বিরত থাকুন। যদি Last-Modifiedগত মাসে সেট করা থাকে এবং কন্টেন্টটি আজ কয়েক ঘন্টা আগেই ডাউনলোড হয়ে গিয়েছিল, আবার এটি ডাউনলোড করার দরকার নেই।
• যে তারিখে ফাইলটি সর্বশেষ সংশোধন করা হয়েছিল তার জন্য জিজ্ঞাসা করা থেকে বিরত থাকুন। যদি Expiresএকটি ক্যাশে সত্তা মে 5 ^ম 2014, আপনি যে কোনো পেতে অনুরোধ ইস্যু হবে না তন্ন তন্ন 2011 সালে, কিংবা 2012 বা 2013 সালে, যেহেতু আপনি কি জানেন যে ক্যাশে আপ-টু-তারিখ।

দ্বিতীয়টি সিডিএনগুলির জন্য প্রয়োজনীয়। যখন Google তোলে JQuery স্ট্যাক ওভারফ্লো একটি পরিদর্শক অথবা cdn.sstatic.netচিত্র বা স্টাইলশীট স্ট্যাক ওভারফ্লো দ্বারা ব্যবহৃত তোলে, তারা একটি নতুন সংস্করণ প্রত্যেক সময় জন্য প্রশ্নের ব্রাউজার চাই না। পরিবর্তে, তারা একবার এই ফাইলগুলি পরিবেশন করছে, মেয়াদোত্তীকরণের তারিখটি দীর্ঘ পর্যাপ্ত কিছুতে সেট করুন এবং এগুলি সবই।

উদাহরণস্বরূপ, আমি যখন স্ট্যাক ওভারফ্লো হোম পৃষ্ঠাতে আসি তখন কী ঘটছে এর একটি স্ক্রিনশট:

পরিবেশন করার জন্য 15 টি ফাইল রয়েছে। কিন্তু এই সব 304 Not Modifiedপ্রতিক্রিয়া কোথায়? আপনার কাছে কেবল তিনটি সামগ্রীর অনুরোধ রয়েছে যা পরিবর্তিত হয়েছে। অন্য কিছুর জন্য, ব্রাউজারটি কোনও সার্ভারে কোনও অনুরোধ না করে ক্যাশেড সংস্করণ ব্যবহার করে ।

---

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

• মানক ক্যাশে কৌশলগুলি ব্যবহার করে আরও কার্যকর বা
• বজায় রাখা সহজ।

Comments

এটির জন্য +1। একেবারেই অর্থহীন is প্রায় সব ক্ষেত্রে একেবারে। কিছু অনন্য, হ্যাশ-ভিত্তিক কী দ্বারা ক্যাচিং করা ভাল।

— shabunc

আপনি ব্রাউজার ক্যাশে সম্পর্কে পুরোপুরি ঠিক না। একটি শক্ত রিফ্রেশ সমস্ত ব্রাউজার ক্যাশে চেকিং পাস করবে।

— আজরিয়াল

লিঙ্কটি reinventing the wheel and not regretting itমারা গেছে: '(

— ইসাইলাইজা

বোজার ক্যাচিং আপনার ভাবার মত সোজা সামনের দিকে নয়, বা সমস্ত ব্রাউজারে এটি সামঞ্জস্য নয়। উদাহরণস্বরূপ, কিছু ব্রাউজারগুলি এলোমেলোভাবে ওয়েব ফন্টগুলি লোড করার সিদ্ধান্ত নেয় (শিরোনাম নির্বিশেষে - এই মুহুর্তে নিবন্ধটি খুঁজে পাচ্ছে না তবে আমি মনে করি এটি ডেভ রুপার্ট যিনি এটি আবিষ্কার করেছিলেন)। এছাড়াও, ETAGs ব্রাউজারগুলিকে কোনও উত্স আপডেট হয়েছে কিনা তা যাচাই করতে বাধ্য করে ... এবং কখনও কখনও আপনি ETAG (উদাঃ অ্যামাজন এস 3) সরাতে পারবেন না - সুতরাং আপনার সিএসএস ফাইল যদি কোনও ETAG শিরোনাম প্রেরণ করে তবে সর্বদা আপডেটের জন্য পরীক্ষা করা হবে (304 সেপ্টেম্বর) এখনও পেডলোড)। অপ্রয়োজনীয় অনুরোধগুলি রোধ করার জন্য, কাস্টম ক্যাচিং প্রয়োজন।

— রায়ান হুইল

Answer 4

ক্লায়েন্ট-সাইড লোকাল ক্যাচিং HTML5 স্থানীয় স্টোরেজ ব্যবহারের চেয়ে আরও বেশি অনুকূলিত হওয়া উচিত। আপনার জাভাস্ক্রিপ্ট এবং সিএসএস বহিরাগত ক্যাচযোগ্য ফাইলগুলিতে রয়েছে এবং স্থানীয় পৃষ্ঠাগুলি থেকে সেগুলি বের করে নেওয়ার চেষ্টা করার চেয়ে আপনার পৃষ্ঠাটি ব্রাউজার ক্যাশে দিয়ে আরও দ্রুত লোড করা উচিত তা নিশ্চিত করুন।

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

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

Answer 5

চাকাটি পুনরায় উদ্ভাবন করার পরিবর্তে কেবল HTML5 অফলাইন কার্যকারিতাটি ব্যবহার করুন : http : //www .पातwg.org/specs/web-apps/current-work/multipage/offline.html

Answer 6

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

আপনি সর্বদা আপনার হাতের ঘূর্ণিত এইচটিএমএল 5 সমাধানের তুলনায় ব্রাউজারের ক্যাচিং করতে পারেন। তবে আমার বাজি হ'ল নেটিভ ক্যাচিংটি প্যান্টটি খুলে ফেলবে।

Answer 7

লোকালস্টোরেশন ব্যবহার দ্রুত (এর)! আমার পরীক্ষা দেখিয়েছে

• সিডিএন থেকে জিকুয়েরি লোড হচ্ছে: ক্রোম 268 মিমি , ফায়ারফক্স: 200 মিমি
• স্থানীয় স্টোরেজ থেকে jQuery লোড হচ্ছে: Chrome 47ms , ফায়ারফক্স 14 মিমি

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

আপনি যদি আমার ফলাফলগুলি পরীক্ষা করতে চান তবে আমি একটি ছোট্ট লাইব্রেরি তৈরি করেছি যা লোকালস্টোরারেজে স্ক্রিপ্টগুলিকে ক্যাশে করে। এটি গিথুব https://github.com/webpgr/cached-webpgr.js এ দেখুন বা নীচের উদাহরণ থেকে কেবল এটি অনুলিপি করুন।

সম্পূর্ণ গ্রন্থাগার:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

লাইব্রেরি কল করছি

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

Comments

আপনার পদক্ষেপগুলি অপ্রাসঙ্গিক। (1) ব্যবহারকারী যদি ওয়েবসাইটে নতুন হন তবে স্থানীয় স্টোরেজে তার কোনও jQuery নেই। (২) অন্যদিকে, ব্যবহারকারী ইতিমধ্যে আপনার ওয়েবসাইটটি পরিদর্শন করেছেন, তার ক্যাশে jQuery রয়েছে, যার অর্থ এটি সিডিএন থেকে লোড হবে না। এটি তৃতীয় বিন্দুতেও পৌঁছায়: (৩) স্থানীয় স্টোরেজ কোনও নির্দিষ্ট সাইটের জন্য উপযুক্ত, যখন গুগলের সিডিএন-তে jQuery অনেকগুলি সাইট শেয়ার করেছে, যার অর্থ এমন একজন ব্যবহারকারী যা বলেছিলেন, স্ট্যাক ওভারফ্লো কিন্তু আপনার সাইটে নতুন জিতেছে আপনি যদি jQuery এর একই সংস্করণ ব্যবহার করেন তবে সিডিএন থেকে জিকুয়েরি পুনরায় লোড করা দরকার না।

— আর্সেনী মোরজেঙ্কো

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

— নির্বাচন করুন

@ মাইনমা ​​দয়া করে মন্তব্যগুলি দেখুন প্রোগ্রামারদের ক্যাশে নিয়ে আরও সমস্যা রয়েছে যেমন ইটিএল তুলনা যা এই কাস্টমটিকে দ্রুততর করে তোলে

— নির্বাচন করুন