한국어
한국어
현대 웹 개발에서 여러 CSS 및 JavaScript 파일은 일반적으로 다양한 페이지 효과 및 기능을 달성하는 데 사용됩니다. 그러나 각 파일을로드하면 추가 네트워크 요청이 표시되어 페이지로드가 지연됩니다. 따라서 여러 파일을 병합하고 압축하면 요청 수를 크게 줄일 수 있으므로 웹 사이트의로드 속도가 향상됩니다.
다음은 파일 병합 및 압축을위한 PHP 샘플 코드입니다.
함수 merge_and_compress_assets ($ 자산, $ 유형) {
$ content = '';
foreach ($ 자산으로 $ 파일) {
$ content. = file_get_contents ($ file);
}
if ($ type == 'CSS') {
$ content = compress_css ($ content);
} elseif ($ type == 'js') {
$ content = compress_js ($ content);
}
file_put_contents ( '병합'. $ 유형, $ 컨텐츠);
}
<p>함수 compress_css ($ content) {<br>
// CSS 압축의 특정 논리<br>
}</p>
<p>함수 compress_js ($ content) {<br>
// JavaScript의 특정 논리를 압축합니다<br>
}</p>
<p>$ css_assets = [ 'style1.css', 'style2.css', 'style3.css'];<br>
$ js_assets = [ 'script1.js', 'script2.js'];</p>
<p>merge_and_compress_assets ($ css_assets, 'css');<br>
merge_and_compress_assets ($ js_assets, 'js');<br>
위의 예에서`merge_and_compress_assets '함수는 여러 파일을 하나의 파일로 병합하고 그에 따라 파일 유형 (CSS 또는 JavaScript)에 따라 압축합니다. 마지막으로 병합 된 컨텐츠를 새 파일에 작성하십시오.
CSS Sprites는 여러 개의 작은 아이콘을 큰 이미지로 결합한 기술입니다. CSS의 '배경 위치'속성을 통해 큰 이미지의 다른 영역을 작은 아이콘으로 표시 할 수 있습니다. 이런 식으로 페이지는 하나의 이미지 만로드하여 여러 개의 작은 이미지에 대한 요청을 피하고 웹 페이지의로드 속도를 더욱 속도로 높이면됩니다.
다음은 CSS 스프라이트를 사용하는 예입니다.
<style>
.sprite {
background-image: url('sprites.png');
background-repeat: no-repeat;
}
.icon1 {
width: 32px;
height: 32px;
background-position: 0 -32px;
}
.icon2 {
width: 64px;
height: 64px;
background-position: 0 0;
}
</style>
<div class="sprite icon1"></div>
<div class="sprite icon2"></div>
이 예에서`sprites.png`는 여러 개의 작은 아이콘을 포함하는 큰 이미지입니다. '배경 위치'값이 다르면 여러 이미지 파일을로드하지 않고도 페이지에 다른 아이콘을 표시 할 수 있습니다.
많은 양의 이미지 나 리소스가있는 페이지의 경우 게으른로드 및 게으른로드는 초기 페이지 로딩 속도를 크게 향상시킬 수 있습니다. 게으른 하중은 페이지가로드 된 후 비 초간 자원을 비동력있게로드하는 것이며, 게으른로드는 뷰포트에 나타날 때만 자원을 동적으로로드하는 것입니다.
다음은 게으른 하중 및 게으른 하중의 예제입니다.
<script>
window.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
img.src = img.getAttribute('data-src');
});
});
</script>
이 예에서`IMG '태그의 데이터 -SRC 속성에는 실제 이미지의 경로가 포함되어 있고`src` 속성은 자리 표시 자입니다. 페이지가로드되면 JavaScript는 이벤트 청취를 통해 실제 이미지 경로를`SRC` 속성에 할당하여 게으른로드를 달성합니다.
이러한 최적화 방법을 구현함으로써 PHP 웹 사이트의 리소스로드 수를 효과적으로 줄여 페이지 액세스 속도가 향상 될 수 있습니다. CSS Sprites 기술을 사용하여 CSS 및 JavaScript 파일을 병합하고 압축하는 것은 게으른로드 및 게으른로드를 모두 웹 사이트 성능을 향상시키는 효과적인 수단입니다. 최적화 할 때 프로젝트의 특정 요구에 따라 적절한 최적화 전략을 선택할 수 있습니다.
