הבעת IT

מטב תמונות

אופטימיזציה פירושה שמירה על גודל קטן של התמונה שמירה על איכות התמונה לרמה הנדרשת. יש המון פרוצדורות פעם יכול לבצע על מנת לייעל את התמונות לפני שהם נטענים לשרת למסירה. הכלים בהם אנו משתמשים ליצירת תמונות אלה (Photoshop, זיקוקים וכו ') יש בדרך כלל כלים המאפשרים למשתמשים לייעל את התמונה לשימוש באינטרנט.
• בדוק של GIF כדי לראות אם הם משתמשים לוח בגודל המתאים למספר של הצבעים בתמונה. כאשר התמונה היא באמצעות 4 צבעים צבעים 256 צבעים, ואז התמונה יכול להיות מותאם יותר

• המר GIF זה למקום של PNG אפשרי לראות אם יש חיסכון. ברוב המקרים, אין. אל תהססו להשתמש של PNG, כפי שהם נתמכים באופן מלא על ידי רוב הדפדפנים הנפוצים. מצפים את יכולות אנימציה PNG יכול לעשות מה GIF עושה, כולל שקיפות.

• עבור תמונות בשימוש שדונים CSS, לארגן את התמונות ספרייט אופקית בניגוד אנכית בדרך כלל גורמת לגודל קובץ קטן יותר. כמו כן, לשלב תמונות עם צבעים דומים ספרייט. זה עוזר לך לשמור על מספר צבעים נמוך, באופן אידיאלי תחת 256 צבעים כדי להשתלב PNG8.

• אם אתה משתמש favicon.ico, לשמור את זה קטן, רצוי תחת 1K.

השתמש בקנה מידה כראוי / לשנות את הגודל של התמונה.

תמיד לנסות להשתמש בתמונות גודל, כלומר לא משתמשים תמונה גדולה יותר ממה שאתה צריך רק בגלל שאתה יכול להגדיר את הרוחב והגובה ב-HTML. אם אתה צריך להציג את התמונה 100px X 100px על הדף, אז לא משתמשים scaled למטה תמונה 200x200px.

השתמש תמונות מתקדמת

דפדפן האינטרנט כבר הופך תמונות בהדרגה. כדי לעשות עוד יותר טוב, פשוט לשמור GIF או תמונות PNG עם אפשרות "שילב", או תמונות JPEG שלך עם האפשרות "מתקדמת".

יש דיון מתמשך בין הגולשים בשאלה אם השימוש בתמונה מתקדמת היא ברכה או מכשול. גם תמונה פרוגרסיבית שוקל כ 20% יותר מאשר עמיתו מתקדמת לא שלה. לכן, אם אתה חושב שאתה עושה שימוש פריסת תמונות שלא תפגעו למשתמש חוויה ידי זה להיות פרוגרסיבי, אתה מוזמן לעשות זאת.

כלול של JavaScript בתחתית של מסמך ה-HTML

אם אין לך document.write (או כל הדור דינמית של תוכן הדף באמצעות javascripts) להכניס חלק התוכן של דף הסקריפטים, להעביר את התסריט כולל הצהרה בתחתית העמוד, לפני סוף תג BODY.
מפרט HTTP/1.1 מציעה דפדפנים להוריד לא יותר משני רכיבים במקביל לכל המארח. אם אתם מגישים את התמונות מ שמות מארחים מרובים, אתה יכול לקבל יותר משתי הורדות להתרחש במקביל. בעוד התסריט מוריד, לעומת זאת, הדפדפן לא יתחיל כל הורדה אחרות, גם על שמות מארחים שונים.
יש גם דרכים באופן דינמי ליצור צמתים סקריפט וטען תסריטים מרחוק אחרי העמוד נטען באמצעות AJAX.

החצנה של JavaScript לך

שימוש חיצוני קובצי JavaScript תגרום הטעינה מהירה יותר של דפים, כי את קובצי JavaScript מאוחסנים במטמון של הדפדפן. "בשורה של JavaScript במסמכי HTML לקבל כל פעם להוריד מסמך HTML מתבקש. זה באמת עשוי לצמצם את מספר בקשות HTTP שנעשו לאחר מכן אבל זה מגדיל את הגודל של מסמך ה-HTML. חיצוני של JavaScript מאוחסנים במטמון של הדפדפן, בגודל של מסמך ה-HTML הוא מופחת מבלי להגדיל את מספר בקשות HTTP.
שימו לב, אם משתמשים באתר שלך יש מספר רב של דפים נצפים בכל הפעלה ורבים הדפים לשימוש מחדש את הסקריפטים ואותו גיליונותסגנון, יש תועלת פוטנציאלית גבוהה יותר מקבצים חיצוניים המאוחסנים במטמון.

לארוז קבצים JavaScript שלך

במקרה של JavaScripts, שלא כמו CSS, הקבצים יכול חרק בעזרת כמה אלגוריתמים סטנדרטיים שייתנו גודל הקובץ מופחת יותר פשוט להסיר רווחים או טאבים. דוגמה JavaScript פקר ניתן למצוא כאן http://dean.edwards.name/packer/

להיפטר בשום סקריפטים כפולים

זה מאוד יוצא דופן, כי תסריטים שלמים עשוי להיות מועתק, אבל סקירה של עשרת האתרים המובילים בארה"ב האינטרנט מראה כי שניים מהם מכילים תסריט כפולות. שכפל סקריפטים אבל ללא ספק מקטינה את הביצועים על ידי יצירת מיותרים בקשות HTTP ו מבוזבז ביצוע JavaScript.
כמו כן, במקרים רבים, אם כי שמות סקריפטים שונים, יש סבירות של סקריפטים כפולות בתוך אותו דף בשל גודל הקבוצה ומספר תסריטים.

מזעור גישה אלמנטים DOM במידת האפשר

גישה אלמנטים DOM עם JavaScript הוא כל כך איטי כדי שיהיה דף תגובה יעילה יותר, עליך:
• מטמון הפניות לגורמי גישה
• צמתים עדכון "מחובר" ולאחר מכן להוסיף אותם לעץ
• הימנע תיקון הפריסה באמצעות JavaScript

התנהגות נפרדת תוכן מצגת

בדיוק כפי שאנו הצגה נפרדת (CSS / XSLT) מהתוכן (XHTML / XML), כדאי גם להפריד בין התנהגות (JavaScript). זה נקרא Javascript מתבלט. בדיוק כפי שאנו לקשר קבצי CSS חיצוניים, עלינו לקשר חיצוניים קבצים JavaScript.

במקום התנהגות קידוד קשה אל התוכן (למשל onMouseOver, onclick, וכו '), התנהגות יש להוסיף באופן דינמי לגורמים, מחלקות, ואלמנטים ייחודיים (IDS) באמצעות DOM. המסמך המכונן, את התוכן, צריך להכיל רק בתקן XHTML / XML ולא JavaScript.
Javascript צריך להגדיל את התוכן על ידי הוספת התנהגות. התוכן צריך להישאר יעיל ושימושי ללא javascript (או בלי תמיכה מלאה JavaScript).

שמרתי את זה הגילאים המאמר בחזרה, כל כך מצטערת! אני לא זוכר את המקור ... אבל זה נראה שימושי, לנו מי צריך להיות מודע על הקהל שבשבילם אנו מפתחים את האתר ... אז הנה אני הוא

משקל עמוד ניתן להשתמש כדי לקבוע את זמן ההורדה של דף מסוים על מגוון של מהירויות חיבור אינטרנט. כדוגמה, הטבלה הבאה מציגה את זמני ההורדה של שלושה עמודים שונים בו מספר מהירויות חיבור פופולריים.

היתרונות של הפחתת משקל הדף?

השפעה חיובית של הפחתת משקל היתרונות את שני הדפים בעלי האתר וצרכנים. היתרונות הפוטנציאליים כוללים:

1. הדפים נטענים מהר יותר. ההשפעה הבולטת ביותר של הפחתת משקל הדף הוא דפי האתר שלך יהיה לטעון מהר יותר עבור המבקרים, ללא קשר למהירות החיבור שלהם.
2. נמוכות יותר זמני הטעינה של דפים ליצור מבקרים נוחים יותר. המבקרים נוטים פחות להיות מתוסכל ללכת למקום אחר אם הדפים לטעון מהר. מצד שני, לאט טעינת הדפים אחת הדרכים הבטוחה ביותר לאבד מבקרים ולקוחות פוטנציאליים.
3. מהר יותר עומס פעמים יתרום ההמרה גדל. יותר מבקרים יישאר באתר שלך זמן רב יותר. יותר מהם בסופו של דבר מבצע רכישה, הרשמה לקבלת הידיעון, או ספר, סימון האתר שלך.
4. תפיסת המותג שלך תהיה משופרת. לקוחות חוזרים ו לראשונה המבקרים כאחד יהיה נוטה יותר לתאר את האתר שלך (עסקי), כמו "מקצועי" אם הדפים לטעון מהר.
5. דפים עם קוד נקי, סולידי בדרך כלל באינדקס בצורה יעילה יותר על ידי מנועי החיפוש הטבעיות.
6. דפים אופטימיזציה עבור משקל יכול למעשה להציל את ההאשמות על רוחב פס גבוה תנועה באתרים. 100,000 עמודים כל אחד במשקל של 150 KB יחייב רוחב פס כפליים מספק שירותי האינטרנט מ -100,000 עמודים כל אחד במשקל 75 KB. עבור ספקי שירותי אינטרנט כי תשלום עבור רוחב פס בשימוש או overages, צמצום זה יכול ליצור חיסכון משמעותי באשמת רוחב פס.

קחו את הנתונים הבאים, שפורסמו בדוח

אם XML / XSL הופך הוא domian שלך, אז יש פעמים שאנחנו רוצים peice של קוד דינמי לשמש פריט בספריה (להיעשות מחדש שמיש). למה אני מתכוון, מן הסתם יכול להיות ברור יותר עם התרחיש הזה למשל.

תאר לעצמך שאתה יוצר אתר אינטרנט (באמצעות XML, XSL transfroms ofcourse) ורוב הדפים יהיה מודול תגובות. טוב! אז אם אתה מעתיק או להדביק את הקוד הזה לתוך התבנית כל דף (שבו אני לא צריך להגיד, אבל לעשות תחזוקה חוזרת סיוט) או אפילו טוב יותר, אתה יוצר קובץ לכלול שניתן נעצרה בכל מקום שבו אתה רוצה את זה בדף שלך ( ים) ...
אז איך אנחנו יוצרים קובץ 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: תבנית>
</ 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>

להוריד את כל הקבצים הנ"ל כאן (248 הורדות)