Bày tỏ IT

Tối ưu hóa hình ảnh

Tối ưu hóa đơn giản có nghĩa là giữ cho kích thước nhỏ hình ảnh giữ chất lượng của hình ảnh đến mức độ cần thiết. Có rất nhiều các thủ tục một lần có thể thực hiện để tối ưu hóa hình ảnh trước khi chúng được nạp vào máy chủ để giao hàng. Các công cụ mà chúng tôi sử dụng để tạo những hình ảnh (Photoshop, chụp pháo hoa, vv) thường có các công cụ cho phép người dùng để tối ưu hóa hình ảnh để sử dụng web.
• Kiểm tra của GIF để xem họ đang sử dụng một kích thước bảng tương ứng với số lượng màu sắc trong hình ảnh. Khi một hình ảnh được sử dụng 4 màu sắc và một bảng màu 256, sau đó hình ảnh có thể được tiếp tục tối ưu hóa

• Chuyển đổi GIF PNG của có thể và xem nếu có tiết kiệm. Thường xuyên hơn không, có. Đừng ngần ngại sử dụng của PNG, khi họ được hỗ trợ đầy đủ bởi hầu hết các trình duyệt thường được sử dụng. Mong đợi của các khả năng hoạt hình PNG có thể làm những gì GIF một, bao gồm minh bạch.

• Đối với những hình ảnh được sử dụng trong CSS sprites, sắp xếp các hình ảnh trong sprite theo chiều ngang như trái ngược theo chiều dọc thường là kết quả trong một kích thước file nhỏ hơn. Ngoài ra, kết hợp hình ảnh với màu sắc tương tự trong ma. Điều này giúp bạn giữ số lượng màu thấp, lý tưởng là dưới 256 màu sắc để phù hợp với 1 PNG8.

• Nếu bạn đang sử dụng một favicon.ico, giữ cho nó nhỏ, tốt nhất là dưới 1K.

Sử dụng đúng cách thu nhỏ / thay đổi kích cỡ hình ảnh.

Luôn luôn cố gắng và sử dụng hình ảnh thay đổi kích cỡ, tức là không sử dụng một hình ảnh lớn hơn bạn chỉ vì bạn có thể thiết lập chiều rộng và chiều cao trong HTML. Nếu bạn cần phải hiển thị một hình ảnh X 100px 100px trên trang, sau đó không sử dụng một quy mô xuống hình ảnh 200x200px.

Sử dụng hình ảnh Progressive

Một trình duyệt web đã làm cho hình ảnh dần dần. Để làm tốt hơn, bạn chỉ cần lưu các hình ảnh GIF hoặc PNG với tùy chọn "interlaced", hoặc hình ảnh JPEG của bạn với các tùy chọn "tiến bộ".

Có đang diễn ra cuộc tranh luận giữa những người sử dụng web như việc sử dụng hình ảnh tiến bộ là một phước lành hay trở ngại. Ngoài ra một hình ảnh tiến bộ trọng lượng khoảng 20% ​​so với đối tác tiến bộ của nó không. Vì vậy, Nếu bạn nghĩ rằng bạn bố trí sử dụng hình ảnh đó sẽ không cản trở kinh nghiệm người dùng bởi nó là tiến bộ, cảm thấy tự do để làm như vậy.

Bao gồm JavaScript ở dưới cùng của tài liệu HTML

Nếu bạn không có document.write (hoặc bất kỳ thế hệ năng động của nội dung trang web bằng cách sử dụng javascripts) để chèn một phần nội dung của trang kịch bản của bạn, di chuyển các kịch bản bao gồm tuyên bố để dưới cùng của trang, trước khi kết thúc của thẻ BODY.
Các đặc điểm kỹ thuật HTTP/1.1 cho thấy rằng trình duyệt tải về không quá hai thành phần song song mỗi tên máy. Nếu bạn phục vụ hình ảnh của bạn từ hostname nhiều, bạn có thể nhận được hơn hai tải xảy ra song song. Trong khi một kịch bản được tải về, tuy nhiên, trình duyệt sẽ không bắt đầu bất kỳ tải khác, ngay cả trên các tên máy chủ khác nhau.
Ngoài ra còn có cách để tự động tạo ra các nút SCRIPT và tải các kịch bản từ xa sau khi trang web được tải bằng cách sử dụng AJAX.

Externalise bạn JavaScript

Sử dụng các tập tin JavaScript bên ngoài sẽ dẫn đến tải trang nhanh hơn bởi vì các tập tin JavaScript được lưu trữ bởi trình duyệt. Inline JavaScript trong các tài liệu HTML được tải về mỗi khi các tài liệu HTML được yêu cầu. Điều này thực sự có thể làm giảm số lượng yêu cầu HTTP được thực hiện nhưng sau đó tăng kích thước của các tài liệu HTML. Bên ngoài JavaScript được lưu trữ bởi trình duyệt, kích thước của các tài liệu HTML được giảm mà không làm tăng số lượng yêu cầu HTTP.
Xin lưu ý rằng, nếu người sử dụng trên trang web của bạn có nhiều lượt xem cho mỗi phiên và nhiều của các trang của bạn lại sử dụng cùng một kịch bản và stylesheets, có một lợi ích tiềm năng lớn hơn từ các tập tin lưu trữ bên ngoài.

Đóng gói tập tin Javascript của bạn

Trong trường hợp của JavaScript, không giống như CSS, các tập tin có thể co rút bằng cách sử dụng một số thuật toán tiêu chuẩn mà có thể cung cấp cho một kích thước tập tin giảm hơn so với chỉ đơn giản là loại bỏ không gian hoặc tab. Một ví dụ của javascript đóng gói có thể được tìm thấy ở đây http://dean.edwards.name/packer/

Hãy loại bỏ bất kỳ kịch bản trùng lặp

Nó là rất khác thường mà toàn bộ kịch bản có thể được nhân đôi, nhưng một đánh giá của các trang web hàng đầu của Hoa Kỳ cho thấy rằng hai trong số họ có một kịch bản trùng lặp. Bản sao các kịch bản nhưng rõ ràng làm giảm hiệu suất bằng cách tạo ra các yêu cầu HTTP không cần thiết và lãng phí thực hiện JavaScript.
Ngoài ra, trong nhiều trường hợp, mặc dù tên kịch bản là khác nhau, có một khả năng của các kịch bản trùng lặp trong cùng một trang do nhóm kích thước và số lượng của các kịch bản.

Giảm thiểu truy cập vào các yếu tố DOM nếu có thể

Truy cập các yếu tố DOM với JavaScript là chậm, vì vậy để có một trang phản ứng nhanh hơn, bạn nên:
• cache tài liệu tham khảo để các yếu tố truy cập
• Cập nhật các nút "offline" và sau đó thêm chúng vào cây
• Tránh sửa chữa bố trí với JavaScript

Hành vi riêng biệt từ nội dung và trình bày

Cũng như chúng tôi trình bày riêng biệt (CSS / XSLT) từ nội dung (XHTML / XML), chúng ta cũng nên tách biệt hành vi (Javascript). Điều này được gọi là không phô trương Javascript. Cũng như chúng tôi liên kết đến các file CSS bên ngoài, chúng ta nên liên kết với các tập tin javascript bên ngoài.

Thay vì hành vi mã hóa cứng vào nội dung (ví dụ như onmouseover, onclick, vv), hành vi nên được tự động thêm vào các yếu tố, các lớp học, và các yếu tố duy nhất (ID) bằng cách sử dụng DOM. Các tài liệu cơ bản, nội dung, nên chứa chỉ hợp lệ XHTML / XML và javascript không.
Javascript nên làm tăng thêm nội dung bằng cách thêm hành vi. Các nội dung nên vẫn còn hữu ích và có thể sử dụng mà không cần javascript (hoặc không có đầy đủ hỗ trợ javascript).

Tôi đã lưu lứa tuổi bài viết trở lại, do đó, Xin lỗi! Tôi không nhớ nguồn ... nhưng nó có vẻ hữu ích, để chúng tôi có được nhận thức về đối tượng mà chúng tôi phát triển trang web cho ... do đó, đây là

Trang trọng lượng có thể được sử dụng để xác định thời gian tải một trang nhất định trên một loạt các tốc độ kết nối Internet. Bằng một ví dụ, bảng dưới đây cho thấy thời gian tải các trang khác nhau ở một số tốc độ kết nối phổ biến.

Lợi ích của việc giảm trọng lượng trang?

Tác động tích cực của việc giảm lợi ích trọng lượng trang chủ sở hữu trang web và người tiêu dùng. Lợi ích tiềm năng bao gồm:

1. Các trang web tải nhanh hơn. Tác động rõ ràng nhất của việc giảm trọng lượng trang là trang của trang web của bạn sẽ tải nhanh hơn cho du khách, bất kể tốc độ kết nối của họ.
2. Thời gian tải trang thấp hơn tạo ra nhiều hơn du khách thoải mái. Số lượt truy cập ít có khả năng để trở thành thất vọng và đi nơi khác nếu các trang của bạn tải nhanh chóng. Mặt khác, tải trang chậm là một trong những cách chắc chắn nhất để mất khách truy cập và khách hàng tiềm năng.
3. Nhanh hơn tải lần này sẽ góp phần để chuyển đổi tăng lên. Nhiều khách truy cập sẽ ở lại trên trang web của bạn lâu hơn. Trong số họ sẽ kết thúc việc mua, đăng ký nhận bản tin của bạn, hoặc cuốn sách đánh dấu trang web của bạn.
4. Nhận thức thương hiệu của bạn sẽ được tăng cường. Trở về khách hàng và thời gian du khách cũng như sẽ nghiêng nhiều hơn để mô tả trang web của bạn (và doanh nghiệp) là "chuyên nghiệp" nếu các trang của bạn tải nhanh chóng.
5. Các trang với mã sạch, vững chắc, thường sẽ được lập chỉ mục hiệu quả hơn bởi các công cụ tìm kiếm tự nhiên.
6. Các trang tối ưu hóa trọng lượng thực sự có thể tiết kiệm chi phí băng thông trên các trang web lưu lượng truy cập cao. 100.000 trang mỗi trọng lượng 150 Mb sẽ yêu cầu băng thông gấp đôi từ ISP của bạn hơn 100.000 trang mỗi trọng lượng 75 Mb. Đối với các nhà cung cấp dịch vụ có tính phí cho băng thông sử dụng hoặc cho overages, giảm này có thể tạo ra tiết kiệm đáng kể về phí băng thông.

Hãy xem xét các dữ liệu sau đây, được công bố trong một báo cáo

Nếu XML / XSL Transforms là domian bạn, sau đó có lần khi chúng tôi muốn có một mảnh mã năng động để được sử dụng mục thư viện (được thực hiện tái sử dụng được). Những gì tôi có nghĩa là, có thể có thể được thực hiện rõ ràng hơn với kịch bản ví dụ này.

Hãy tưởng tượng bạn đang tạo một trang web (và sử dụng XML, XSL transfroms ofcourse) và hầu hết các trang sẽ có một Module Bình luận. Vâng! sau đó hoặc là bạn sao chép hoặc dán mã này vào mỗi mẫu trang (mà tôi đã không nói, nhưng làm cho bảo trì và làm lại một cơn ác mộng) hoặc thậm chí tốt hơn, bạn tạo một file INCLUDE có thể được kéo vào có bao giờ bạn muốn nó trong trang của bạn ( s) ...
Vì vậy, LÀM THẾ NÀO ĐỂ CHÚNG TÔI TẠO tập tin XSL INCLUDE và bao gồm nó bên trong một tập tin XSL? Dưới đây là làm thế nào ...

Chỉ cần để làm cho mọi việc rõ ràng ... đây là nhanh chóng danh sách các tập tin mà bạn sẽ tạo ra ... ở đây, chúng tôi sẽ được bao gồm cả thông tin về trái cây và rau quả vào một trang mẹ được gọi là thực phẩm.

1. food.xml - xml dữ liệu tập tin chuyển đổi sẽ được áp dụng
2. food.xsl - chính XSL tập tin, mà sẽ chuyển đổi food.xml của chúng tôi
3. inc_fruits.xsl - XSL bao gồm các tập tin sẽ làm cho trái cây dữ liệu
4. inc_vegtables.xsl - XSL bao gồm các tập tin sẽ làm cho vetetables dữ liệu

Tôi không nghĩ rằng tôi có giải thích nhiều, các mã cho các yếu tố trên, sẽ được tự giải thích ...

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>

Tải về tất cả các tập tin trên (252 tải)