CSS ภายนอกเทียบกับความแตกต่างของประสิทธิภาพสไตล์อินไลน์?

Question 1

เพื่อนของฉันบอกว่าการใช้<div style=""></div>แทนการบีบอัดไฟล์ css ที่วางไว้link hrefที่ส่วนหัวช่วยเพิ่มประสิทธิภาพ เป็นเช่นนั้นจริงหรือ?

Question 2

การเพิ่มประสิทธิภาพที่เพื่อนของคุณพูดถึงอาจเป็นเรื่องเล็กน้อยเมื่อเทียบกับจำนวนของการเพิ่มประสิทธิภาพ (ผ่านปัจจัยอื่น ๆ ) โดยใช้ไฟล์ CSS

การใช้แอตทริบิวต์ style เบราว์เซอร์จะวาดกฎสำหรับองค์ประกอบนั้น ๆ เท่านั้นซึ่งในกรณีนี้คือ<div>องค์ประกอบ ซึ่งจะช่วยลดระยะเวลาในการค้นหาสำหรับเครื่องมือ CSS เพื่อค้นหาว่าองค์ประกอบใดตรงกับตัวเลือก CSS (เช่นa.hoverหรือ#someContainer li)

อย่างไรก็ตามการวางสไตล์ที่ระดับองค์ประกอบหมายความว่าคุณไม่สามารถแคชกฎสไตล์ CSS แยกกันได้ โดยปกติแล้วการใส่สไตล์ในไฟล์ CSS จะช่วยให้สามารถแคชได้ซึ่งจะช่วยลดปริมาณการโหลดจากเซิร์ฟเวอร์ในแต่ละครั้งที่คุณโหลดหน้าเว็บ

การวางกฎสไตล์ที่ระดับองค์ประกอบจะทำให้คุณไม่สามารถติดตามได้ว่าองค์ประกอบใดมีสไตล์อย่างไร นอกจากนี้ยังอาจย้อนกลับไปที่การเพิ่มประสิทธิภาพของการวาดภาพองค์ประกอบเฉพาะซึ่งคุณสามารถทาสีหลายองค์ประกอบเข้าด้วยกัน การใช้ไฟล์ CSS จะแยก CSS ออกจาก HTML ดังนั้นคุณจึงมั่นใจได้ว่าสไตล์ของคุณถูกต้องและง่ายต่อการแก้ไขในภายหลัง

ดังนั้นหากคุณดูการเปรียบเทียบคุณจะเห็นว่าการใช้ไฟล์ CSS มีประโยชน์มากกว่าการจัดแต่งทรงผมที่ระดับองค์ประกอบ

อย่าลืมเมื่อคุณมีไฟล์สไตล์ชีท CSS ภายนอกเบราว์เซอร์ของคุณสามารถแคชไฟล์ซึ่งจะเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ!

Question 3

หน้านี้จะโหลดเร็วขึ้นหากคุณใช้สไตล์อินไลน์เทียบกับสไตล์ชีต ในบางกรณีจะต้องเร็วขึ้น

เมื่อคุณใช้สไตล์ชีตโดยใช้ href จำเป็นต้องมีการร้องขออื่นไปยังเซิร์ฟเวอร์จากนั้นจึงแยกวิเคราะห์ไฟล์หลังจากการตอบสนอง ด้วยรูปแบบอินไลน์จะไม่มีเลยเพียงแค่แยกวิเคราะห์โดยตรง

หากไคลเอนต์มีอินเทอร์เน็ตที่ช้าคำขอเดียวนั้นอาจช้ามากโดยปล่อยให้สไตล์เพจน้อยลงจนกว่าสไตล์ชีตจะได้รับการส่งมอบ อีกครั้งหากเป็นแบบอินไลน์จะไม่มีความล่าช้าเลย

เหตุผลเดียวที่เราใช้สไตล์ชีตคือการจัดระเบียบ มีหลายครั้งที่ไม่จำเป็นดังนั้นสไตล์อินไลน์หรือสไตล์ชีตในเอกสารก็เพียงพอแล้ว

Question 4

ไม่ใช่คำถามที่ง่ายที่จะตอบเพราะความสมบูรณ์แบบในกรณีนี้ขึ้นอยู่กับหลายปัจจัย (ความซับซ้อนของตัวเลือก CSS ขนาดเอกสาร ฯลฯ ) อย่างไรก็ตามหากเราใช้กรณีแยกเราจะเห็นว่าคลาส CSS โดยทั่วไปเร็วกว่าสไตล์อินไลน์:
สไตล์อินไลน์เทียบกับคลาส CSS

Question 5

มันทำได้ แต่เหตุผลของสไตล์ชีตที่เชื่อมโยงหรือภายนอกจึงสามารถแคชในเบราว์เซอร์ได้โดยเฉพาะเมื่อคุณใช้ div เดียวกันในหลาย ๆ หน้าสำหรับไซต์ ซึ่งหมายความว่าเบราว์เซอร์จะต้องโหลดสไตล์ชีตเพียงครั้งเดียวแทนที่จะต้องโหลดโค้ดซ้ำทุกครั้งที่เบราว์เซอร์โหลดหน้าซ้ำ นอกจากนี้ยังสร้างรหัสที่สะอาดขึ้นซึ่งทำให้การเปลี่ยนแปลงหรือการดีบักง่ายขึ้น

Question 6

ความจริงคือ 'ใช่'

มีความแตกต่างกันอย่างมาก โดยเฉพาะอย่างยิ่งเมื่อคุณใช้งานอินเทอร์เฟซผู้ใช้โดยอัตโนมัติ ลองใช้รหัสต่อไปนี้ ฉันใช้ IE10 และ notepad ในการพัฒนา ฉันกำลังเรียนรู้ขณะไปและทำการทดสอบนี่คือการทดสอบเวอร์ชันสั้นลง (อาจมีข้อผิดพลาดขณะที่ฉันลดรหัสเพื่อแสดงคำตอบของคุณ)

คลิกที่ภาพที่คุณอ้างอิงและอ่านข้อความแจ้งเตือน คำแนะนำ: บันทึกไฟล์นี้บันทึกอีกครั้งเป็นการแก้ไขก่อนแก้ไข (ทดสอบ)

ด้วยความปรารถนาดีดอน

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>

Question 7

ไม่มีคำตอบตายตัวในความคิดของฉัน

inline CSSจะโหลดได้เร็วขึ้นถ้าการดาวน์โหลดขนาดเนื้อหา CSS เร็วกว่าเซิร์ฟเวอร์ของคุณจะตอบสนองต่อexternal CSS fileการร้องขอ (พิจารณาจากเวลา DNS แฝงเซิร์ฟเวอร์ ฯลฯ )

สำหรับ CSS ขนาดปกติฉันจะใส่ไว้ในหน้าสำหรับบางอย่างที่มีน้ำหนักเกิน 15-20KB ฉันอาจจะใส่ไว้ในไฟล์ภายนอกและตรวจสอบให้แน่ใจว่าสามารถแคชได้

ฉันแน่ใจว่ามีข้อควรพิจารณาอื่น ๆ อีกมากมายที่ฉันขาดหายไปในตอนนี้ แต่ไม่มีคำตอบที่ตายตัวสำหรับอินไลน์กับภายนอก

Question 8

การใช้สไตล์ชีตภายนอกเป็นตัวเลือกที่ดีกว่าอย่างแน่นอนเพราะจะช่วยให้คุณจำสไตล์ที่คุณใช้กับ div ได้ ช่วยลดเวลาในการโหลดหน้าเว็บเนื่องจากโค้ด HTML ยิ่งน้อยก็จะโหลดเร็วขึ้น

แต่ในบางกรณีคุณอาจต้องเปลี่ยนคุณสมบัติบางอย่างของ div เฉพาะดังนั้นสไตล์อินไลน์จึงเป็นตัวเลือกที่ดีที่สุด และพูดตามจริงสไตล์อินไลน์หนึ่งหรือสองแบบจะไม่เปลี่ยนแปลงเวลาในการโหลดหน้าเว็บ

มีอีกทางเลือกหนึ่งของสไตล์ชีตภายใน แต่จะใช้เฉพาะเมื่อคุณมีเว็บไซต์หน้าเดียวเช่นคุณกำลังสร้างเทมเพลต เนื่องจากคุณต้องเขียน CSS ในทุกหน้า HTML

Question 9

ฉันชอบใช้ CSS แบบอินไลน์มากกว่า CSS ภายนอกซึ่งมีไฟล์ CSS ขนาดเล็กหลายไฟล์สำหรับองค์ประกอบหรือรูปภาพอื่น ๆ ไม่มีประเด็นในการดาวน์โหลดไฟล์ CSS หลาย ๆ ไฟล์ด้วยโค้ด 5-10 บรรทัดในแต่ละไฟล์ หากองค์ประกอบของคุณมีคุณสมบัติเช่นโฮเวอร์แอ็คทีฟตรวจสอบ ฯลฯ คุณควรใช้ไฟล์ CSS ภายนอกเนื่องจากจะหลีกเลี่ยงไม่ให้กระบวนการพัฒนาของคุณยุ่งยาก