javascript - যবহ - স্ক্রিপ্টিং ভাষা কি




জাভাস্ক্রিপ্ট আগে CSS অন্তর্ভুক্ত সুপারিশ হয়? (9)

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

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

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

অগণিত স্থানগুলিতে অনলাইন আমি জাভাস্ক্রিপ্টের আগে CSS অন্তর্ভুক্ত করার সুপারিশ দেখেছি। সাধারণত, এই ফর্মটি যুক্তি:

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

আমার প্রকৃত পরীক্ষার বেশ কিছু ভিন্ন প্রকাশ:

আমার পরীক্ষা জোতা

আমি বিভিন্ন সংস্থার জন্য নির্দিষ্ট বিলম্ব তৈরি করতে নিম্নলিখিত রুবি স্ক্রিপ্ট ব্যবহার করি:

require 'rubygems'
require 'eventmachine'
require 'evma_httpserver'
require 'date'

class Handler  < EventMachine::Connection
  include EventMachine::HttpServer

  def process_http_request
    resp = EventMachine::DelegatedHttpResponse.new( self )

    return unless @http_query_string

    path = @http_path_info
    array = @http_query_string.split("&").map{|s| s.split("=")}.flatten
    parsed = Hash[*array]

    delay = parsed["delay"].to_i / 1000.0
    jsdelay = parsed["jsdelay"].to_i

    delay = 5 if (delay > 5)
    jsdelay = 5000 if (jsdelay > 5000)

    delay = 0 if (delay < 0) 
    jsdelay = 0 if (jsdelay < 0)

    # Block which fulfills the request
    operation = proc do
      sleep delay 

      if path.match(/.js$/)
        resp.status = 200
        resp.headers["Content-Type"] = "text/javascript"
        resp.content = "(function(){
            var start = new Date();
            while(new Date() - start < #{jsdelay}){}
          })();"
      end
      if path.match(/.css$/)
        resp.status = 200
        resp.headers["Content-Type"] = "text/css"
        resp.content = "body {font-size: 50px;}"
      end
    end

    # Callback block to execute once the request is fulfilled
    callback = proc do |res|
        resp.send_response
    end

    # Let the thread pool (20 Ruby threads) handle request
    EM.defer(operation, callback)
  end
end

EventMachine::run {
  EventMachine::start_server("0.0.0.0", 8081, Handler)
  puts "Listening..."
}

উপরের মিনি সার্ভার আমাকে জাভাস্ক্রিপ্ট ফাইলগুলির (উভয় সার্ভার এবং ক্লায়েন্ট) এবং ইচ্ছাকৃত CSS বিলম্বের জন্য ইচ্ছাকৃত বিলম্বগুলি সেট করতে দেয়। উদাহরণস্বরূপ, http://10.0.0.50:8081/test.css?delay=500 আমাকে 500 এমএস বিলম্ব সিএসএস হস্তান্তর দেয়।

আমি পরীক্ষার জন্য নিম্নলিখিত পৃষ্ঠা ব্যবহার করুন।

<!DOCTYPE html>
<html>
  <head>
      <title>test</title>
      <script type='text/javascript'>
          var startTime = new Date();
      </script>
      <link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
      <script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&amp;jsdelay=1000"></script> 
  </head>
  <body>
    <p>
      Elapsed time is: 
      <script type='text/javascript'>
        document.write(new Date() - startTime);
      </script>
    </p>    
  </body>
</html>

যখন আমি প্রথমে সিএসএসটি অন্তর্ভুক্ত করি, পৃষ্ঠাটিকে রেন্ডার করতে 1.5 সেকেন্ড সময় লাগে:

যখন আমি প্রথমে জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করি, পৃষ্ঠাটিকে রেন্ডার করতে 1.4 সেকেন্ড সময় লাগে:

আমি ক্রোম, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারে অনুরূপ ফলাফল পেতে। তবে অপেরা ইন, ক্রম কেবল কোন ব্যাপার না।

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

আমি কি কিছু অনুপস্থিত করছি, জাভাস্ক্রিপ্টের পূর্বে CSS অন্তর্ভুক্ত করার সুপারিশটি কি সঠিক নয়?

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


আমি জাভাস্ক্রিপ্ট আগে একটি ভিন্ন কারণে সিএসএস ফাইল অন্তর্ভুক্ত।

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


এখানে উপরের সব প্রধান উত্তরগুলির একটি সারসংক্ষেপ (অথবা পরে হয়তো নীচে :)

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

পুরানো ব্রাউজারগুলির জন্য CSS উপরে রাখুন (যদি আপনি প্রথমে নগ্ন কিন্তু ইন্টারেক্টিভ পৃষ্ঠা দেখান না চান তবে)।

সমস্ত ব্রাউজারের জন্য, যতটা সম্ভব পৃষ্ঠাতে জাভাস্ক্রিপ্টটিকে আরও নিচে রাখুন, যেহেতু এটি আপনার HTML এর পার্সিং বন্ধ করবে। পছন্দসইভাবে, এটি অ্যাসিঙ্ক্রোনাসটি ডাউনলোড করুন (অর্থাৎ, অজ্যাক কল)

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

সুতরাং, প্রশ্নের উত্তর দিতে: হ্যাঁ। JS এর ​​আগে CSS অন্তর্ভুক্ত করার সুপারিশ আধুনিক ব্রাউজারগুলির জন্য অবৈধ। যেখানেই আপনি চান সিএসএস রাখুন এবং যত তাড়াতাড়ি সম্ভব জেএস রাখুন।


এটি একটি খুব আকর্ষণীয় প্রশ্ন। আমি সবসময় আমার CSS <link href="..."> আমার JS <script src="..."> এর আগে রেখেছি কারণ "আমি একবার ভাল পড়ি যে এটি ভাল।" সুতরাং, আপনি ঠিক আছেন; এটা উচ্চ সময় আমরা কিছু প্রকৃত গবেষণা না!

আমি নোড (নীচের কোড) আমার নিজের পরীক্ষা জোতা সেট আপ। মূলত, আমি:

  • কোনও HTTP ক্যাশিং ছিল না তা নিশ্চিত করে যাতে ব্রাউজারটি প্রতিটি সময় একটি পৃষ্ঠা লোড হওয়ার সময় সম্পূর্ণ ডাউনলোড করতে পারে।
  • বাস্তবতা অনুকরণ করার জন্য, আমি jQuery এবং H5BP CSS অন্তর্ভুক্ত করেছি (সুতরাং পার্স করার জন্য স্ক্রিপ্ট / সিএসএসের একটি উপযুক্ত পরিমাণ আছে)
  • দুটি পৃষ্ঠা সেট করুন - স্ক্রিপ্টের আগে CSS সহ এক, স্ক্রিপ্টের পরে CSS সহ এক।
  • বাহ্যিক স্ক্রিপ্টের <head> কার্যকর করার জন্য এটি কতক্ষণ সময় নেয় তা রেকর্ড করা হয়েছে
  • <body> DOMReady <body> চালানোর জন্য ইনলাইন স্ক্রিপ্টের জন্য এটি কতক্ষণ সময় নেয় তা রেকর্ড করা, যা DOMReady সমান।
  • 500ms দ্বারা ব্রাউজারে সিএসএস এবং / অথবা স্ক্রিপ্ট প্রেরণ বিলম্বিত।
  • 3 প্রধান ব্রাউজারে পরীক্ষার 20 বার রান করুন।

ফলাফল

প্রথমত, সিএসএস ফাইলটি 500 মিঃ দ্বারা বিলম্বিত হয়েছে:

     Browser: Chrome 18    | IE 9         | Firefox 9
         CSS: first  last  | first  last  | first last
=======================================================
Header Exec |              |              |
Average     | 583ms  36ms  | 559ms  42ms  | 565ms 49ms
St Dev      | 15ms   12ms  | 9ms    7ms   | 13ms  6ms
------------|--------------|--------------|------------
Body Exec   |              |              |
Average     | 584ms  521ms | 559ms  513ms | 565ms 519ms
St Dev      | 15ms   9ms   | 9ms    5ms   | 13ms  7ms

পরবর্তীতে, আমি CSS এর বদলে 500ms দ্বারা বিলম্বিত করে jQuery সেট করেছি:

     Browser: Chrome 18    | IE 9         | Firefox 9
         CSS: first  last  | first  last  | first last
=======================================================
Header Exec |              |              |
Average     | 597ms  556ms | 562ms  559ms | 564ms 564ms
St Dev      | 14ms   12ms  | 11ms   7ms   | 8ms   8ms
------------|--------------|--------------|------------
Body Exec   |              |              |
Average     | 598ms  557ms | 563ms  560ms | 564ms 565ms
St Dev      | 14ms   12ms  | 10ms   7ms   | 8ms   8ms

অবশেষে, আমি 500ms দ্বারা বিলম্বিত jQuery এবং CSS উভয় সেট করে:

     Browser: Chrome 18    | IE 9         | Firefox 9
         CSS: first  last  | first  last  | first last
=======================================================
Header Exec |              |              |
Average     | 620ms  560ms | 577ms  577ms | 571ms 567ms
St Dev      | 16ms   11ms  | 19ms   9ms   | 9ms   10ms
------------|--------------|--------------|------------
Body Exec   |              |              |
Average     | 623ms  561ms | 578ms  580ms | 571ms 568ms
St Dev      | 18ms   11ms  | 19ms   9ms   | 9ms   10ms

উপসংহার

প্রথমত, এটি মনে রাখা গুরুত্বপূর্ণ যে আমি আপনার দস্তাবেজের <head> ( <body> এর শেষের বিপরীতে) তে অবস্থিত স্ক্রিপ্টগুলি অনুমানের অধীনে কাজ করছি। আপনি কেন আপনার স্ক্রিপ্টগুলির সাথে <head> লিঙ্কে বনাম ডকুমেন্টের শেষে লিঙ্ক করতে পারেন সে সম্পর্কে বিভিন্ন আর্গুমেন্ট রয়েছে তবে এটির উত্তরটির বাইরেও রয়েছে। এটি <script> এর <link> এর আগে <script> এর আগে যাওয়া উচিত কিনা তা সম্পর্কে কঠোরভাবে।

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

সর্বশেষ CSS সম্পর্কিত লিঙ্কটি কার্যকারিতাকে ক্ষতিগ্রস্ত বলে মনে হচ্ছে না তবে নির্দিষ্ট পরিস্থিতিতে লাভগুলি সরবরাহ করতে পারে, যদি পুরানো ব্রাউজারের কার্যকারিতা উদ্বেগ না থাকে তবে কেবলমাত্র ডেস্কটপ ব্রাউজারে বাইরের স্ক্রিপ্টগুলি লিঙ্ক করার পরে আপনাকে বাহ্যিক স্টাইলশীটগুলির সাথে লিঙ্ক করা উচিতমোবাইল অবস্থা জন্য পড়ুন।

কেন?

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

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

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

ফটকাবাজি প্যারিসিং ছাড়াই পুরানো ব্রাউজারগুলিতে, স্ক্রিপ্টগুলিকে প্রথমে সম্পাদন প্রভাবিত করবে কারণ তারা সমান্তরাল ডাউনলোড করবে না।

ব্রাউজার সমর্থন

ফটিকুলিটি পার্সিং প্রথম প্রয়োগ করা হয়েছিল: (২01২ সালের জানুয়ারী অনুসারে এই সংস্করণটি ব্যবহার করে বিশ্বব্যাপী ডেস্কটপ ব্রাউজার ব্যবহারকারীদের শতাংশ সহ)

  • ক্রোম 1 (ওয়েবকিট 525) (100%)
  • IE 8 (75%)
  • ফায়ারফক্স 3.5 (96%)
  • সাফারি 4 (99%)
  • অপেরা 11.60 (85%)

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

মোবাইল ব্রাউজারে, মোবাইল ব্রাউজার ও ওএস ল্যান্ডস্কেপের বৈচিত্র্যের কারণে কেবলমাত্র সহজ সংখ্যাগুলি পেতে কিছুটা কঠিন। ওয়েবকিট 525 (২008 সালের মার্চ মাসে প্রকাশিত) থেকে ফটকাবাচক রেন্ডারিং কার্যকর করা হয়েছিল এবং কেবলমাত্র প্রতি উপযুক্ত মোবাইল ব্রাউজার ওয়েবকিট ভিত্তিক, আমরা এই উপসংহারে আসতে পারি যে "সর্বাধিক" মোবাইল ব্রাউজারকে এটি সমর্থন করা উচিতquirksmode অনুযায়ী, আইওএস 2.2 / অ্যান্ড্রয়েড 1.0 ওয়েবকিট quirksmode ব্যবহার করুন। উইন্ডোজ ফোন কেমন দেখতে quirksmode তা আমি জানি না।

যাইহোক, আমি আমার অ্যান্ড্রয়েড 4 ডিভাইসে পরীক্ষা চালাচ্ছিলাম, এবং যখন আমি ডেস্কটপ ফলাফলের মতো সংখ্যক দেখেছি, তখন আমি এটি Android এর জন্য Chrome এর চমত্কার নতুন রিমোট ডিবাগারে ঢোকালাম , এবং নেটওয়ার্ক ট্যাব দেখায় যে ব্রাউজার আসলে ডাউনলোড করার জন্য অপেক্ষা করছে জাভাস্ক্রিপ্ট সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত সিএসএস - অন্য কথায়, Android এর জন্য ওয়েবকিট এর সর্বশেষ সংস্করণটিও ফটকাবাচক পার্সিং সমর্থন করে না। আমি CPU ডিভাইস, মেমরি, এবং / বা মোবাইল ডিভাইসের মধ্যে অন্তর্গত নেটওয়ার্ক সীমাবদ্ধতার কারণে এটি বন্ধ করা হতে পারে সন্দেহ।

কোড

Sloppiness ক্ষমা - এই প্রশ্ন & ডি ছিল।

app.js

var express = require('express')
, app = express.createServer()
, fs = require('fs');

app.listen(90);

var file={};
fs.readdirSync('.').forEach(function(f) {
    console.log(f)
    file[f] = fs.readFileSync(f);
    if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
        res.contentType(f);
        res.send(file[f]);
    });
});


app.get('/jquery.js', function(req,res) {
    setTimeout(function() {
        res.contentType('text/javascript');
        res.send(file['jquery.js']);
    }, 500);
});

app.get('/style.css', function(req,res) {
    setTimeout(function() {
        res.contentType('text/css');
        res.send(file['style.css']);
    }, 500);
});


var headresults={
    css: [],
    js: []
}, bodyresults={
    css: [],
    js: []
}
app.post('/result/:type/:time/:exec', function(req,res) {
    headresults[req.params.type].push(parseInt(req.params.time, 10));
    bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
    res.end();
});

app.get('/result/:type', function(req,res) {
    var o = '';
    headresults[req.params.type].forEach(function(i) {
        o+='\n' + i;
    });
    o+='\n';
    bodyresults[req.params.type].forEach(function(i) {
        o+='\n' + i;
    });
    res.send(o);
});

css.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS first</title>
        <script>var start = Date.now();</script>
        <link rel="stylesheet" href="style.css">
        <script src="jquery.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
        <script>document.write(jsload - start);bodyexec=Date.now()</script>
    </body>
</html>

js.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS first</title>
        <script>var start = Date.now();</script>
        <script src="jquery.js"></script>
        <script src="test.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script>document.write(jsload - start);bodyexec=Date.now()</script>
    </body>
</html>

test.js

var jsload = Date.now();


$(function() {
    $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
});

jquery.js ছিল jquery-1.7.1.min.js


জাভাস্ক্রিপ্ট আগে CSS অন্তর্ভুক্ত সুপারিশ হয়?

আপনি কেবল একটি সুপারিশ হিসাবে এটি আচরণ না। কিন্তু যদি আপনি এটি একটি কঠোর এবং দ্রুত শাসন হিসাবে আচরণ করেন ?, হ্যাঁ, এটি অবৈধ।

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded থেকে

স্টাইলশীট ব্লক স্ক্রিপ্ট এক্সিকিউশন লোড করে, তাই যদি আপনার <link rel="stylesheet" ...> <script> একটি <link rel="stylesheet" ...> পরে <script> <link rel="stylesheet" ...> পৃষ্ঠাটি পার্সিং শেষ করবে না - এবং স্টাইলশীটটি লোড না হওয়া পর্যন্ত DOMContentLoaded আগুন হবে না।

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

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

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

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

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

জাভাস্ক্রিপ্ট আগে CSS স্থাপন দুটি প্রধান কারণ আছে।

  1. পুরানো ব্রাউজার (ইন্টারনেট এক্সপ্লোরার 6-7, ফায়ারফক্স ২, ইত্যাদি) সমস্ত স্ক্রিপ্ট ডাউনলোড করার পরে পরবর্তী ডাউনলোডগুলিকে অবরোধ করবে। সুতরাং যদি আপনার a.js অনুসরণ করে তবে b.css ক্রমান্বয়ে ডাউনলোড করা হবে: প্রথমটি তারপর b। যদি আপনি b.css অনুসরণ করে a.js তারা সমান্তরাল ডাউনলোড করে যাতে পৃষ্ঠাটি আরও দ্রুত লোড হয়।

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

Cuzillion সঙ্গে উদাহরণ তৈরি মজা। উদাহরণস্বরূপ, এই পৃষ্ঠায় HEAD এ একটি স্ক্রিপ্ট রয়েছে যাতে এটি সম্পূর্ণ ডাউনলোড না হওয়া পর্যন্ত সম্পূর্ণ পৃষ্ঠাটি ফাঁকা। যাইহোক, যদি আমরা স্ক্রিপ্টটিকে বডি ব্লকের শেষে স্থানান্তরিত করি তবে পৃষ্ঠা শিরোনামটি রেন্ডার করে যেহেতু সেই DOM উপাদানগুলি SCRIPT ট্যাগের উপরে ঘটে, যেমন আপনি এই পৃষ্ঠায় দেখতে পারেন।


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

আমি বহিরাগত স্ক্রিপ্টের রেফারেন্স সহ, নথির "মাথার" অংশে CSS রেফারেন্সগুলি রাখব। (কিছু স্ক্রিপ্ট শরীরের মধ্যে স্থাপন করা হতে পারে, এবং যদি তাই, তাদের oblige।)

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


2017-12-16 আপডেট

আমি ওপিতে পরীক্ষার ব্যাপারে নিশ্চিত নই। আমি একটু পরীক্ষা করার সিদ্ধান্ত নিলাম এবং পৌরাণিক কাহিনীর কিছুটা শেষ করে ফেললাম।

সিঙ্ক্রোনাস <script src...> এটি ডাউনলোড এবং নির্বাহ না হওয়া পর্যন্ত এটি নীচের সংস্থানগুলির ডাউনলোড করা অবরুদ্ধ করবে

এই আর সত্য হয় । ক্রোম 63 দ্বারা উত্পন্ন জলপ্রপাত তাকান:

<head>
<script src="//alias-0.redacted.com/payload.php?type=js&amp;delay=333&amp;rand=1"></script>
<script src="//alias-1.redacted.com/payload.php?type=js&amp;delay=333&amp;rand=2"></script>
<script src="//alias-2.redacted.com/payload.php?type=js&amp;delay=333&amp;rand=3"></script>
</head>

<link rel=stylesheet> ডাউনলোড এবং এটি নীচের স্ক্রিপ্ট নির্বাহ অবরোধ করা হবে না

এটা ভুল । স্টাইলশীট ডাউনলোড বন্ধ করবে না তবে এটি স্ক্রিপ্টটি কার্যকর করবে ( এখানে সামান্য ব্যাখ্যা )। ক্রোম 63 দ্বারা উত্পন্ন কর্মক্ষমতা চার্ট একটি বর্ণন আছে:

<link href="//alias-0.redacted.com/payload.php?type=css&amp;delay=666" rel="stylesheet">
<script src="//alias-1.redacted.com/payload.php?type=js&amp;delay=333&amp;block=1000"></script>

মনে রাখা উপরে, OP মধ্যে ফলাফল নিম্নরূপ ব্যাখ্যা করা যেতে পারে:

সিএসএস প্রথম:

CSS Download  500ms:<------------------------------------------------>
JS Download   400ms:<-------------------------------------->
JS Execution 1000ms:                                                  <-------------------------------------------------------------------------------------------------->
DOM Ready   @1500ms:                                                                                                                                                      

জেএস প্রথম:

JS Download   400ms:<-------------------------------------->
CSS Download  500ms:<------------------------------------------------>
JS Execution 1000ms:                                        <-------------------------------------------------------------------------------------------------->
DOM Ready   @1400ms:                                                                                                                                            

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

একক CSS থাকার পরিবর্তে, 2 বা 3 CSS ফাইলগুলি গ্রহণ করুন এবং এই উপায়ে চেষ্টা করুন,

1) css..css..js 2) css..js..css 3) js..css..css

আমি নিশ্চিত css..css..js সব অন্যদের তুলনায় ভাল ফলাফল দিতে হবে।








performance