IT를 표현

이미지를 최적화

최적화는 단순히 필요한 수준의 이미지 품질을 유지 작은 이미지의 크기를 유지하는 것을 의미합니다. 일단 그들이 배달 서버에로드되기 전에 이미지를 최적화하기 위해 수행 수있는 프로 시저의 부하가 있습니다. 우리는 (포토샵, 불꽃놀이 등) 이러한 이미지의 생성에 사용하는 도구는 일반적으로 사용자가 웹 사용에 대한 이미지를 최적화할 수있는 도구가 있습니다.
• 그들은 이미지 색상의 개수에 해당하는 팔레트 크기를 사용하고 있는지 GIF의를 확인합니다. 이미지는 4 색상과 256 색 팔레트를 사용하면 다음 이미지가 더 최적화 될 수

• 변환 GIF는 PNG의 가능한 위해 그리고 절약이있다면 참조하십시오. 종종있다. 그들은 완전히 일반적으로 사용되는 브라우저의 대부분이 지원하는 한, PNG의 사용을 주저하지 마십시오. PNG는 투명도를 포함, GIF이 무엇을 할 수있는 애니메이션 기능을 기대합니다.

• CSS의 스프 라이트에 사용되는 이미지의 경우 가로 요정과 같은 작은 파일 크기의 수직 대개 결과로 반대의 이미지를 배열합니다. 또한, 요정에서 유사한 색상으로 이미지를 결합하여. 이것은 이상적으로 너무 PNG8에 맞는 256 색 아래의 색 수를 낮게 유지하는 데 유용합니다.

• 당신은 favicon.ico를 사용하는 경우 선호 1K 아래 별게.

적절히 조정 / 이미지 크기가 조정을 사용합니다.

항상 노력하고 크기를 조정할 이미지를 사용, 즉 여러분이 HTML의 너비와 높이를 설정할 수 있습니다 이유만으로 필요한 것보다 더 큰 이미지를 사용하지 마십시오. 당신이 페이지에 100px X 100px 이미지를 표시해야하는 경우 다음 200x200px 이미지 다운 스케일을 사용하지 마십시오.

프로 그레시브 이미지를 사용

웹 브라우저는 이미 점차적으로 이미지를 렌더링. 더욱 수행하려면 "프로 그레시브"옵션과 "인터 레이스"옵션 또는 JPEG 이미지로 GIF 또는 PNG 이미지를 저장합니다.

진취적인 이미지의 사용은 축복이나 지장 것인 지에 대한 웹 사용자 간의 지속적인 논의가있다. 또한 프로 그레시브 이미지는 아닌 프로 그레시브 대응보다 약 20 % 더 무겁죠. 당신이 레이아웃은 프로 그레시브 됨으로써 사용자 경험을 방해하지 않을 이미지를 사용하여 생각한다면 그래서, 이렇게 셔도됩니다.

JavaScript의 HTML 문서의 맨 아래에 포함

여러분의 스크립트에서 페이지의 내용의 일부를 삽입하는 document.write를 (또는 javascripts를 사용하여 페이지의 내용 중 동적 생성)이 없으면 BODY 태그의 끝 이전에 페이지 하단에 구문을 포함 스크립트를 이동합니다.
HTTP/1.1 사양은 그 브라우저는 호스트마다 병렬로 더 이상 둘을 제외 구성 요소를 다운로드하여 제안합니다. 가 여러 호스트에서 이미지를 제공하는 경우 병렬로 발생하는 두 개 이상의 다운로드를받을 수 있습니다. 스크립트가 다운로드되는 동안 그러나 브라우저도 다른 호스트에서 다른 다운로드를 시작하지 않습니다.
동적으로 스크립트 노드를 생성하고 페이지가 AJAX를 사용하여 로드된 후 원격 스크립트를 로드할 수있는 방법도 있습니다.

당신에게 JavaScript의를 Externalise

자바 스크립트 파일이 브라우저에 의해 캐시 때문에 외부 자바 스크립트 파일을 사용하면 페이지의 빠른 로딩을 초래할 것입니다. 인라인 자바 스크립트의 'HTML 문서에서이 HTML 문서를 요청 때마다 다운로드 하죠. 이것은 실제로 만들어진 HTTP 요청의 개수를 줄일 수 있지만 이후 HTML 문서의 크기를 증가시킵니다. 외부 자바 스크립트가 브라우저에 의해 캐시, HTML 문서의 크기는 HTTP 요청의 수를 증가하지 않고 줄어 듭니다.
귀하의 사이트에 사용자 세션 당 여러 페이지뷰를 가지고 귀하의 페이지에 다시 사용 동일한 스크립트와 스타일 시트의 많은 경우, 캐시된 외부 파일에서 큰 잠재적 이익이된다는 점에 유의해주십시오.

당신의 자바 스크립트 파일을 싸

JavaScripts 경우에는 CSS 달리 파일은 단순히 공백이나 탭을 제거보다 줄어든 파일 크기를 줄 겁니다 일부 표준 알고리즘을 사용하여 났구요 수 있습니다. 자바 스크립트 패커의 예제는 여기 http://dean.edwards.name/packer/ 찾을 수 있습니다

중복 스크립트를 제거 해

그것은 전체 스크립트가 중복 수도 것은 매우 이례이지만, 10 위로 미국 웹 사이트의 평가는 그 중 두 중복 스크립트가 포함되어있다는 사실을 보여줍니다. 스크립트를 중복지만 분명 불필요한 HTTP 요청과 낭비 자바 스크립트 실행을 생성하여 성능을 줄여줍니다.
스크립트 이름은 다르지만 또한 많은 경우, 스크립트 팀 크기와 개수에 따라 동일한 페이지 내에서 중복되는 스크립트의 가능성이 있습니다.

가능한 DOM 요소에 액세스 최소화

자바 스크립트로 DOM 요소에 액세스하는 것은, 당신이해야 더 반응 페이지 권한을 부여하기 위해 너무 느립니다 :
액세스한 요소 • 캐시 참조
트리에 추가 후 • 업데이트 노드 "오프라인"및
• 자바 스크립트로 레이아웃을 고정 피한다

콘텐츠 및 프레 젠 테이션에서 별도 행동

우리 콘텐츠 (XHTML / XML)에서 별도의 프레 젠 테이션 (CSS / XSLT), 우리도 행동을 분리해야 것처럼 (자바 스크립트). 이것은 겸손한 자바 스크립트 호출됩니다. 우리가 외부 CSS 파일에 연결 것처럼, 우리는 외부 자바 스크립트 파일에 연결해야합니다.

대신 콘텐츠 (예 : onmouseover, onclick 등)로 하드 코딩 문제로 인해 문제는 동적 요소, 클래스, 그리고 DOM을 사용하여 고유한 요소 (IDS)에 추가되어 있어야합니다. 기초 문서, 콘텐츠만이 유효한 XHTML / XML없이 자바 스크립트가 포함되어야합니다.
자바 스크립트가 동작을 추가하여 콘텐츠를 확대한다. 내용이 유용하고 자바 스크립트 (또는 전체 자바 스크립트를 지원하지 않고)없이 사용할 유지됩니다.

정말 죄송합니다, 다시이 문서의 연령을 구원했습니다! 제가 소스를 기억 없다 ... 그러나 그것이 우리가 사이트를 개발하는 사람에 대해 청중에 대해 알아야 할 우리, 유용한 듯 ... 그래서 나는 여기있다

페이지 무게는 인터넷 연결 속도를 다양한 주어진 페이지의 다운로드 시간을 결정하는 데 사용할 수 있습니다. 예제 그건 그렇고, 다음 표에 인기가 연결 속도의 숫자에 세 가지 다른 페이지 다운로드 시간을 보여줍니다.

페이지 무게를 줄이는 장점?

페이지 무게 혜택들에게 웹사이트 소유자와 소비자 모두를 줄이는 긍정적인 영향. 잠재적인 혜택은 다음과 같습니다 :

1. 페이지는 빨리로드합니다. 페이지 무게를 줄이는 가장 명백한 영향은 귀하의 웹사이트의 페이지에 관계없이 연결 속도의 방문객을 위해 빠르게 읽어 들일 수있다는 것입니다.
2. 낮은 페이지로드 시간이 더 편할 방문자를 만듭니다. 방문객들은 좌절되고 페이지를 신속하게 로드할 수 있으면 다른 곳으로 갈 가능성이 높습니다. 한편, 느린 로딩 페이지는 방문자와 잠재 고객을 잃을 수있는 가장 확실한 방법 중 하나입니다.
3. 빠른로드 시간이 증가 전환에 기여할 것입니다. 더 많은 방문자가 귀하의 사이트가 더 이상 남아있을 것입니다. 쪽수가, 구매하는 뉴스 레터에 가입하거나 사이트를 책 마킹 끝장날 것이다.
4. 당신의 브랜드 인식이 향상됩니다. 재방문 고객과 처음 방문자는 모두 페이지가 빠르게로드하려면 "프로"로 귀하의 사이트 (및 비즈니스)을 설명하는 것이 더 경사 것입니다.
5. 깨끗하고 견고한 코드 페이지는 종종 자연적인 검색 엔진에 의해보다 효과적으로 색인을 생성합니다.
6. 중량에 최적화된 페이지는 실제로 높은 트래픽이 사이트에서 대역폭 비용을 절약할 수 있습니다. 100,000 페이지는 각 무게 150 KB는 10 만 페이지에 각각의 무게가 75 KB 이상의 ISP에게 두 배나 많은 대역폭이 필요합니다. 사용 대역폭이나 노력해을위한 충전의 ISP의 경우이 감소 대역폭 비용에서 상당한 절감 효과를 만들 수 있습니다.

보고서에 게시된 다음 데이터를 고려

XML / XSL가 domian가 변환한다면, 우리는 (재사용 가능한 제출 예정) 라이브러리 항목을 사용하도록 동적 코드 peice 원하는 경우가 있습니다. 무슨 뜻인지, 아마이 예제의 시나리오는 더욱 분명하게 할 수 있습니다.

당신이 웹사이트를 만들고 (그리고 XML, XSL transfroms 당연히 사용) 및 페이지의 대부분은 코멘트 모듈를 가지려고하고 상상해보세요. 글쎄! 다음 중 당신이 모든 페이지 템플리트 (이 내 말을하지만, 유지 보수 및 재작업 악몽을 가지고 있겠지) 또는 더 나은에이 코드를 복사하거나 붙여넣을, 당신은 (당신의 페이지에 당신이 그것을 원하는 위치까지 멈춘 수 포함시킬 파일을 만듭니다 들) ...
그럼 어떻게 XSL 포함시킬 파일을 생성하고 다른 XSL 파일 안에 그것을 포함합니까? 방법은이 ...

그냥 몇 가지 일을 확실하게하는 방법 ... 여기가 만든 것이 파일의 간단한 목록입니다 ... 여기, 우리 음식이라는 상위 페이지로 과일과 야채에 대한 정보를 포함합니다.

1. food.xml - 변환이 적용됩니다되는 XML 데이터 파일
2. food.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 : 스타일 시트>

<?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 다운로드) 다운로드