การแสดงไอที

รวมทั้งมีของที่ด้านล่างของเอกสาร HTML

หากคุณไม่ได้มี document.write (หรือสร้างแบบไดนามิกของเนื้อหาหน้าโดยใช้ javascripts) เพื่อแทรกเป็นส่วนหนึ่งของเนื้อหาของหน้าเว็บในสคริปต์ของคุณให้ย้ายสคริปต์รวมคำสั่งที่ด้านล่างของหน้าก่อนที่จะสิ้นสุดของแท็กร่างกาย
HTTP/1.1 สเปคแสดงให้เห็นว่าเบราว์เซอร์ดาวน์โหลดไม่เกินสององค์ประกอบในแบบคู่ขนานต่อโฮสต์ หากคุณเป็นภาพของคุณจากชื่อโฮสต์หลายท่านจะได้รับมากกว่าสองการดาวน์โหลดจะเกิดขึ้นในแบบขนาน ในขณะที่สคริปต์จะถูกดาวน์โหลด แต่เบราว์เซอร์จะไม่เริ่มการดาวน์โหลดอื่​​น ๆ แม้ในชื่อโฮสต์ที่แตกต่างกัน
นอกจากนี้ยังมีวิธีการสร้างแบบไดนามิกโหนด SCRIPT และโหลดสคริประยะไกลหลังจากที่โหลดหน้าเว็บแล้วใช้ AJAX

Externalise คุณมีของ

การใช้ไฟล์ JavaScript ภายนอกจะมีผลในการโหลดได้เร็วขึ้นจากหน้าเว็บเพราะเป็นไฟล์ JavaScript เก็บไว้โดยเบราว์เซอร์ Inline JavaScript ของ 'ในเอกสาร HTML ได้รับการดาวน์โหลดเวลาเอกสาร HTML มีการร้องขอทุก นี้ที่จริงอาจจะลดจำนวนการร้องขอ HTTP ทำ แต่มันก็เพิ่มขนาดของเอกสาร HTML ภายนอกมีของที่เก็บไว้โดยเบราว์เซอร์; ขนาดของเอกสาร HTML จะลดลงได้โดยไม่ต้องเพิ่มจำนวนของการร้องขอ HTTP
โปรดทราบว่าหากผู้ใช้บนเว็บไซต์ของคุณมีมุมมองที่หน้าหลายต่อหลายเซสชั่นและหน้าเว็บของคุณกลับมาใช้สคริปเดียวกันและ stylesheets มีผลประโยชน์ที่อาจเกิดขึ้นได้มากขึ้นจากไฟล์ภายนอกแคช

แพ็คไฟล์ JavaScript ของคุณ

ในกรณีที่ JavaScripts ซึ่งแตกต่างจาก CSS, ไฟล์อาจ crunched โดยใช้กลไกมาตรฐานบางอย่างที่จะให้ขนาดไฟล์ที่ลดลงกว่าเพียงแค่การลบช่องว่างหรือแท็บ ตัวอย่างของการบรรจุหีบห่อจาวาสคริปต์ที่สามารถพบได้ที่นี่ http://dean.edwards.name/packer/

รับกำจัดของสคริปซ้ำ ๆ

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

ลดการเข้าถึงองค์ประกอบ DOM ที่เป็นไปได้

การเข้าถึงองค์ประกอบ DOM กับ JavaScript ช้าดังนั้นเพื่อให้มีการตอบสนองมากขึ้นหน้าคุณควรจะ:
•ลำดับที่แคชองค์ประกอบเข้าถึงได้
•โหนดปรับปรุง "ออฟไลน์" แล้วเพิ่มเข้าไปในต้นไม้
•หลีกเลี่ยงการแก้ไขเค้าโครงด้วย JavaScript

พฤติกรรมการแยกต่างหากจากเนื้อหาและการนำเสนอ

เช่นเดียวกับที่เรานำเสนอที่แยกต่างหาก (CSS / XSLT) จากเนื้อหา (XHTML / XML) เรายังควรแยกพฤติกรรม (Javascript) นี้เรียกว่าจาวาสคริปต์ไม่เป็นการรบกวน เช่นเดียวกับที่เราเชื่อมโยงไปยังไฟล์ CSS ภายนอกเราควรเชื่อมโยงไปยังไฟล์จาวาสคริปต์ภายนอก

แทนการเข้ารหัสพฤติกรรมอย่างหนักในเนื้อหา (เช่น onmouseover, OnClick, ฯลฯ ), พฤติกรรมที่ควรจะเพิ่มแบบไดนามิกไปยังองค์ประกอบชั้นเรียนและองค์ประกอบที่ไม่ซ้ำกัน (IDS) ใช้ DOM เอกสารพื้นฐานเนื้อหาที่ควรมีเพียงที่ถูกต้อง XHTML / XML และจาวาสคริปต์ไม่มี
Javascript ควรเพิ่มเนื้อหาได้โดยการเพิ่มพฤติกรรม เนื้อหาจะยังคงมีประโยชน์และสามารถใช้งานได้โดยไม่ต้องใช้จาวาสคริปต์ (หรือโดยการสนับสนุนจาวาสคริปต์เต็ม)

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

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

ประโยชน์ของการลดน้ำหนักหน้า?

ผลกระทบเชิงบวกของการลดน้ำหนักผลประโยชน์หน้าทั้งเจ้าของเว็บไซต์และผู้บริโภค ผลประโยชน์ที่อาจเกิดขึ้นรวมถึง:

1. หน้าโหลดได้เร็วขึ้น ผลกระทบที่ชัดเจนที่สุดของการลดน้ำหนักก็คือหน้าเพจของเว็บไซต์ของคุณจะโหลดได้เร็วขึ้นสำหรับผู้เข้าชมโดยไม่คำนึงถึงความเร็วในการเชื่อมของพวกเขา
2. ครั้ง Lower การโหลดหน้าเว็บสร้างผู้เข้าชมสะดวกสบายมากขึ้น ผู้เข้าชมมีโอกาสน้อยที่จะกลายเป็นความผิดหวังและไปที่อื่นถ้าโหลดหน้าเว็บของคุณได้อย่างรวดเร็ว ในขณะที่ช้าโหลดหน้าเว็บที่เป็นหนึ่งในวิธีที่ surest ที่จะสูญเสียผู้เข้าชมและลูกค้าที่มีศักยภาพ
3. ได้เร็วขึ้นเวลาในการโหลดจะนำไปสู่​​การแปลงที่เพิ่มขึ้น ผู้เข้าชมเพิ่มเติมจะอยู่ในเว็บไซต์ของคุณอีกต่อไป เพิ่มเติมของพวกเขาจะสิ้นสุดการซื้อสินค้า, การลงทะเบียนสำหรับจดหมายข่าวของคุณหรือหนังสือเครื่องหมายเว็บไซต์ของคุณ
4. การรับรู้ตราสินค้าของคุณจะถูกปรับปรุงให้ดีขึ้น ลูกค้าที่กลับมาและผู้เข้าชมครั้งแรกเหมือนกันจะกินมากขึ้นเพื่ออธิบายเว็บไซต์ของคุณ (และธุรกิจ) เป็น "มืออาชีพ" ถ้าหน้าเว็บของคุณโหลดได้อย่างรวดเร็ว
5. หน้าเว็บที่มีการทำความสะอาดโค้ดที่เป็นของแข็งจะมักจะมีประสิทธิภาพมากขึ้นการจัดทำดัชนีโดยเครื่องมือค้นหาตามธรรมชาติ
6. หน้าเหมาะสำหรับน้ำหนักจริงสามารถประหยัดค่าใช้จ่ายแบนด์วิดธ์ในเว็บไซต์สูงการจราจร 100.000 แต่ละหน้าน้ำหนัก 150 Kb จะต้องใช้แบนด์วิธสองเท่าจาก ISP ของคุณกว่า 100,000 หน้าน้ำหนัก 75 Kb แต่ละ สำหรับผู้ให้บริการอินเทอร์เน็ตที่คิดค่าบริการสำหรับแบนด์วิดธ์ที่ใช้หรือสำหรับ overages ลดนี้สามารถสร้างเงินออมที่สำคัญเกี่ยวกับค่าบริการแบนด์วิดธ์

พิจารณาข้อมูลต่อไปนี้ตีพิมพ์ในรายงาน

ใส่ stylesheets ที่ยอดนิยม

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

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

W3 จำเพาะ HTML 'ยังระบุว่า CSS ฉันจะต้องมีในส่วนหัวของหน้า HTML at the bottom of the page, so it's best not to use it. นอกจากนี้ยังทราบว่าใน IE @import พฤติกรรมเดียวกับการใช้ <link> ที่ด้านล่างของหน้าดังนั้นจึงเป็นเรื่องที่ดีที่สุดที่จะไม่ใช้มัน

หลีกเลี่ยงการใช้คุณลักษณะเฉพาะเบราว์เซอร์

กรอง: การใช้ตัวกรอง เพิ่มการบริโภคหน่วยความจำและถูกนำไปใช้ต่อองค์ประกอบที่ไม่ต่อภาพเพื่อให้ปัญหาได้รับการคูณ นอกจากนี้กรองเป็นกรรมสิทธิ์ของ IE จึงจะไม่ทำงานตามที่ตั้งใจไว้ในเบราว์เซอร์อื่น ๆ ถ้าคุณต้องการให้พื้นหลังโปร่งใสหรือการไล่ระดับสีใช้ 1Pixel ด้วยภาพ
นิพจน์: นิพจน์ CSS มีคุณลักษณะที่ดีที่จะมีใน CSS แต่ยังคงเป็นคุณลักษณะเฉพาะของ IE นอกจากนี้ก็เป็นสิ่งสำคัญที่จะทราบว่าการแสดงออกเหล่านี้ ประเมินเมื่อเพจที่มีการแสดงผลและปรับขนาดเลื่อนและแม้เมื่อผู้ใช้เลื่อนเมาส์มากกว่าหน้า จำเป็นที่จะกล่าวนี้อาจส่งผลกระทบต่อประสิทธิภาพการทำงานของหน้าเว็บของคุณ ดังนั้นในคำง่ายหลีกเลี่ยงการใช้สำนวน CSS, จนกว่าคุณจะรู้สึกข้อดีของมันจะมีน้ำหนักมากกว่าข้อเสียของ '

Externalise คุณ CSS

การใช้ CSS ภายนอกจะมีผลในการโหลดได้เร็วขึ้นจาก เพราะหน้าเว็บ JavaScript และ CSS ไฟล์ที่เก็บไว้โดยเบราว์เซอร์ Inline CSS ในเอกสาร HTML ได้รับการดาวน์โหลดเวลาเอกสาร HTML มีการร้องขอทุก นี้ที่จริงอาจจะลดจำนวนการร้องขอ HTTP ทำ แต่มันก็เพิ่มขนาดของเอกสาร HTML CSS ภายนอกจะเก็บไว้โดยเบราว์เซอร์; ขนาดของเอกสาร HTML จะลดลงได้โดยไม่ต้องเพิ่มจำนวนของการร้องขอ HTTP

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

แพ็คไฟล์ CSS ของคุณ

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

ฉันสามารถ CSS crunched โดยการลบความคิดเห็นทั้งหมดและอักขระที่ไม่พึงประสงค์เช่นช่องว่างสีขาว, newlines ฯลฯ

สำหรับทุกเพศทุกวัยฉันได้คิดที่จะรวมทั้งหมดปฏิบัติที่ดีที่สุดผมได้อ่านทุกตอนแล้ว ในที่สุด! ผมไม่ได้ลงไปวางไว้เพื่อปากกา ฉันตระหนักว่ามันเป็นไปได้งานมหึมาการสร้างเอกสารนี้มหึมาดังนั้นฉันตัดสินใจที่จะอุทิศหมวดหมู่ทั้งหมดกับมันดังนั้นฉันสามารถเก็บเพิ่มสิ่งที่เกี่ยวกับวิธีปฏิบัติที่ดีที่สุดเป็นและเมื่อฉันพบพวกเขา ...

ดี! เนื้อหาที่นี่จะมีการควบรวมของ UI การปฏิบัติของฉันที่ดีที่สุดสำหรับการพัฒนาส่วนบุคคลกับผู้ที่เขียนขึ้นโดยนักพัฒนามาตรฐานเช่น Yahoo, Google ฯลฯ

ดูพื้นที่นี้และให้ browing หมวดปฏิบัติที่ดีที่สุด

พูดง่าย (สำหรับผู้ที่ไม่เคยได้ยินเกี่ยวกับ doctype ก่อนวันนี้)! คือการประกาศ DOCTYPE ในเอกสาร HTML ที่มาพร้อมก่อนที่จะแท็ก <HTML> ที่มีลักษณะเช่นนี้ (วางจากแหล่งที่มาของหน้านี้มาก)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

วิธีการแก้ปัญหาจึงจะแก้ไขปัญหานี้คือการ

• ช่วยให้นักพัฒนาเว็บที่รู้มาตรฐานของพวกเขาที่จะเลือกที่โหมดการใช้งาน
• ยังคงแสดงหน้าเก่าตามกฎ (quirks) เก่า

และ DOCTYPE เกิด

ดังนั้นขึ้นอยู่กับว่าหน้าเว็บที่คุณได้รับการออกแบบให้ได้มาตรฐานหรือไม่คุณเลือก doctype ที่เหมาะสม

หน้าเก่าที่เขียนก่อนที่มาตรฐานเหล่านี้ได้ถูกนำมาไม่ได้มี doctype ดังนั้นเมื่อมี DOCTYPE ไม่มีใน HTML ของคุณแล้วเบราว์เซอร์อยู่ในโหมด quirks
แต่ถ้า DOCTYPE ถูกกำหนดให้เป็นหนึ่งต่อไปนี้แล้วเบราว์เซอร์กล่าวจะอยู่ในโหมดเข้มงวด

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">