কীভাবে নিউজ ওয়েবসাইটগুলি উদাহরণস্বরূপ ফোর্বস / জেডডিনেট সম্পূর্ণরূপে এক ওয়েবপৃষ্ঠাকে অন্য একটিতে মার্জ করে?


14

আপনি যদি উদাহরণস্বরূপ যান:

আপনি যখন পৃষ্ঠার নীচে পৌঁছবেন, তখন একটি নতুন নিউজ স্টোরি লোড হয় এবং আমার ইন্টারনেট ব্রাউজারের ইউআরএল এই নেক্সট নিউজ স্টোরির URL এ পরিবর্তিত হয়। সুতরাং আমি ভাবছিলাম যে কোনও ওয়েবপৃষ্ঠা কীভাবে পৃষ্ঠাগুলির মধ্যে প্রায় নগণ্য দেরি করে তাত্ক্ষণিকভাবে পরবর্তী ওয়েবপৃষ্ঠাটি লোড করতে পারে। তারা কি উদাহরণস্বরূপ গল্পের ওয়েবপৃষ্ঠাটি প্রাক-ডাউনলোড করা এবং ওয়েবপৃষ্ঠাটি সত্যিই দ্রুত লোড করা?


1
Endকী টিপুন এবং ধরে রাখুন এবং আপনি লোডিং প্রক্রিয়াটির বিলম্ব দেখতে পাবেন।
MonkeyZeus

5
আরও গুরুত্বপূর্ণ প্রশ্ন হল তারা কেন এটি করে।

উত্তর:


25

সংক্ষিপ্ত উত্তরটি হ'ল পৃষ্ঠার ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট কোডটি যখন আপনি পৃষ্ঠার নীচে "খুব কাছাকাছি" পেয়ে যান এবং সনাক্ত করে এবং সার্ভারকে আরও ডেটা জিজ্ঞাসা করা হয় that

খুব প্রযুক্তিগত না পেয়ে তারা পুরো ওয়েব পৃষ্ঠাটি পুনরায় লোড করছে না। পরিবর্তে page পৃষ্ঠার জাভাস্ক্রিপ্ট কোডটি সার্ভার থেকে আরও ডেটা অনুরোধ করছে, তারপরে এটি যখন নতুন ডেটা পায়, এটি সেই তথ্যটিকে বর্তমান পৃষ্ঠায় যুক্ত করে। পৃষ্ঠার যে অংশগুলি পরিবর্তন করার দরকার নেই সেগুলি সম্পূর্ণ অপরিবর্তিত রয়েছে।

এটি করার সর্বাধিক আধুনিক উপায় হ'ল এইচটিএমএল 5 ইতিহাস-সংশোধন বৈশিষ্ট্যগুলি ব্যবহার করা , যা সেই সাইটগুলি কী ব্যবহার করছে তা প্রদর্শিত হয়।


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

তাহলে ইউআরএল পরিবর্তন সম্পর্কে কী হবে, পুনরায় লোড না করে কীভাবে তা ঘটে? কারণ আপনার লিঙ্কটিতে, আপনি যদি কোনও 'পরিবর্তিত পৃষ্ঠা' পুনরায় লোড করেন (উদাঃ /second), এটি ত্রুটিযুক্ত। ওপির নিউজ সাইটের সাথে এটি ঘটে না - তারা ইউআরএল যথাযথভাবে পরিবর্তন করে যাতে আপনি এটি ভাগ করতে পারেন।
ওজেফোর্ড

@ অলিফোর্ড এটি হিস্ট্রি এপিআই স্টাফগুলির জন্য। history.pushStateএবং history.replaceStateআপনাকে বর্তমান পৃষ্ঠা থেকে দূরে নেভিগেশন ছাড়াই ঠিকানা বারে URL টি পরিবর্তন করতে দেয়। এটি ইউআরএল টুকরা ( #something) পরিবর্তন করার পুরানো কৌশলটির আরও আধুনিক প্রতিস্থাপন, এর একটি বড় সুবিধা হ'ল ইতিহাস এপিআই আপনাকে "আসল" ইউআরএলগুলিকে চাপ দিতে দেয় যা সার্ভার তৈরিতে অংশ নিতে পারে, যখন খণ্ডের জিনিসটি সম্পূর্ণ সমর্থন করতে হয় ক্লায়েন্ট পক্ষ থেকে।
hobbs

আহ ঠিক আছে. তবে আমি যেমন বলেছি, ডেমোটি ভেঙে গেছে, যা বিভ্রান্ত করছে।
ওজেফোর্ড

এই প্রশ্নটি সামনে আসার সাথে আমি যে ইতিহাসের ডেমোটির সাথে পরিচিত ছিল তা সম্পূর্ণরূপে ভেঙে গিয়েছিল, তাই সেই লিঙ্কটিই আমি খুঁজে পেলাম যেটি কাজ করতে দেখা গিয়েছিল। একটি ভাল লিঙ্ক প্রস্তাব নির্দ্বিধায়।
Ixrec

20

যা ঘটছে তা বোঝার একটি বড় কী: জাভাস্ক্রিপ্টের মাধ্যমে, ব্যবহারকারীকে আসলে পুনর্নির্দেশ না করে অ্যাড্রেসবারে URL সেট করা সম্ভব। এটি কার্যকরভাবে দেখতে, নীচের কোডটি সমর্থিত ব্রাউজারের কনসোলটিতে পেস্ট করুন। লক্ষ্য করুন যে এটি আপনার ঠিকানা বারে পরিবর্তন করে http://programmers.stackexchange.com/yay.html

history.pushState(null,null,'/yay.html')

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


অপেক্ষা করুন, ডিভায়ান্টআর্ট তার অনুসন্ধান ফলাফলগুলিতে ইতিহাস-পরিবর্তনটি কার্যকর করেছে, তাই আপনি আসলে / বুকমার্কের সাথে লিঙ্ক করতে পারেন / অন্যথায় কোনও নির্দিষ্ট পৃষ্ঠা রেকর্ড করতে পারেন? এটা ... বেশ কিছু। যদিও কোনও নির্দিষ্ট প্রশ্নের জন্য কোনও নির্দিষ্ট পৃষ্ঠায় কতক্ষণ নির্দিষ্ট ফলাফল থাকবে? আপনি যদি বুকমার্ক করেন, আমি কাল সেই নির্দিষ্ট পৃষ্ঠায় একই ফলাফল দেখার আশা করব না ... আমাকে অবশ্যই এটি তদন্ত করতে হবে।
কেআরয়ান

@ কেআরয়ান এটি কেবলমাত্র প্যারামটি পরিবর্তন করে offsetযা ফলাফলসীমাটিতে একটি নির্দিষ্ট দূরত্ব এড়িয়ে যায়। যেহেতু ডিফল্ট সাজানোর ক্রমটি "সর্বকালের জনপ্রিয়" বলে মনে হয় ফলাফল সম্ভবত কিছুটা স্থিতিশীল, তবে আপনি যদি সাজানোর ক্রমটিকে "সর্বাধিক" স্যুইচ করেন এবং জনপ্রিয় কিছু সন্ধান করেন তবে অবশ্যই তা নয়।
hobbs
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.