การแสดงไอที

เพิ่มประสิทธิภาพของภาพ

การเพิ่มประสิทธิภาพนั้นหมายถึงว่าการรักษาขนาดของภาพที่มีขนาดเล็กทำให้คุณภาพของภาพให้อยู่ในระดับที่ต้องการ มีโหลดของขั้นตอนว่าเมื่อสามารถดำเนินการเพื่อเพิ่มประสิทธิภาพของภาพก่อนที่พวกเขาจะถูกโหลดไปยังเซิร์ฟเวอร์สำหรับการจัดส่ง เครื่องมือที่เราใช้สำหรับการสร้างภาพเหล่านี้ (Photoshop, Fireworks ฯลฯ ) มักจะมีเครื่องมือที่ช่วยให้ผู้ใช้เพื่อเพิ่มประสิทธิภาพของภาพสำหรับการใช้งานบนเว็บ
•ตรวจสอบ GIF เพื่อดูว่าพวกเขาจะใช้จานขนาดที่สอดคล้องกับจำนวนของสีในภาพ เมื่อภาพถูกใช้ 4 ส​​ีและจานสีสี 256 แล้วภาพอาจจะเพิ่มประสิทธิภาพต่อไป

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

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

•หากคุณกำลังใช้ favicon.ico ให้มันมีขนาดเล็กควรอยู่ภายใต้ 1K

ใช้ภาพขนาดที่เหมาะสม / การปรับขนาด

เคยลองและใช้ปรับขนาดภาพคือไม่ได้ใช้ภาพที่มีขนาดใหญ่กว่าที่คุณต้องการเพียงเพราะคุณสามารถกำหนดความกว้างและความสูงในรูปแบบ HTML ถ้าคุณต้องการที่จะแสดง 100px X 100px ภาพบนหน้าเว็บแล้วไม่ได้ใช้ลดขนาดภาพลง 200x200px

ใช้ภาพ Progressive

เว็บเบราเซอร์แล้วทำให้ภาพมีความก้าวหน้า ให้ทำดียิ่งขึ้นเพียงบันทึกของคุณ GIF หรือ PNG ภาพที่มีตัวเลือก "แบบ interlaced" หรือภาพ JPEG ของคุณด้วยตัวเลือกที่ "ก้าวหน้า"

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

รวมทั้งมีของที่ด้านล่างของเอกสาร 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 ลดนี้สามารถสร้างเงินออมที่สำคัญเกี่ยวกับค่าบริการแบนด์วิดธ์

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

หาก XML / XSL แปลงเป็น domian ของคุณแล้วมีเวลาเมื่อเราต้องการชิ้นส่วนของรหัสแบบไดนามิกที่จะใช้รายการที่ห้องสมุด (ที่จะทำใหม่ใช้งาน) สิ่งที่ฉันหมายความอาจอาจจะทำให้ชัดเจนมากขึ้นกับสถานการณ์เช่นนี้

ลองนึกภาพคุณกำลังสร้างเว็บไซต์ (และใช้ XML, XSL transfroms ofcourse) และมากที่สุดของหน้าเว็บจะมีโมดูลความเห็น ดี! แล้วทั้งคุณคัดลอกหรือวางรหัสนี้เป็นแม่แบบในทุกหน้า (ซึ่งผมได้ขอพูด แต่ทำให้การบำรุงรักษาและการทำงานซ้ำฝันร้าย) หรือดียิ่งขึ้นคุณจะสร้างแฟ้มรวมซึ่งอาจจะทำลายในที่ที่คุณต้องการได้ในหน้าเว็บของคุณ ( s) ...
ดังนั้นเราจะสร้างไฟล์ XSL รวมถึงวิธีการและรวมไว้ภายในไฟล์อื่น XSL? นี่คือวิธีการ ...

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

1 food.xml - XML​​ แฟ้มข้อมูลที่เปลี่ยนแปลงจะถูกนำไปใช้
2 food.xsl - ไฟล์ XSL หลักซึ่งจะเปลี่ยน food.xml ของเรา
3 inc_fruits.xsl - XSL รวมไฟล์ที่จะแสดงข้อมูลผลไม้
4 inc_vegtables.xsl - XSL รวมไฟล์ที่จะแสดงผลข้อมูล vetetables

ฉันไม่คิดว่าฉันมีอธิบายมากรหัสสำหรับองค์ประกอบข้างต้นจะเป็นตัวอธิบาย ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ body>
</ html>
</ xsl: template>
</ xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

ดาวน์โหลดไฟล์ทั้งหมดข้างต้นที่นี่ (252 ดาวน์โหลด)