SELECT * FROM Vzakladke.net

Статьи об автоматизации и программировании

Советы о том чтобы скрипты и стили на веб-странице загружались без блокировки

 

 

Веб-мастер на своем сайте для того чтобы обеспечить загрузку скриптов и стилей, которые мы размещаем в хеддере есть старый способ загружать файлы без блокировки, при котором браузер не ждет загрузки и запускает сразу следующий поток.

Для подгружаемых скриптов подойдет код на javascript:

var js = document.createElement('script');
js.src = 'myscript.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);

Для подгружаемых стилей подойдет код на javascript:

var h = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'mycss.css';
link.type = 'text/css';
link.rel = 'stylesheet';
h.appendChild(link);

В некоторых случаях программисты помещают ссылку на подгружаемый код в конце страницы, тем самым обеспечивая его загрузку только после загрузки основного контента и основных стилей. Кроме того, зачастую на помощь приходят атрибуты ссылок async и defer, которые обеспечивают асинхронную и отложенную загрузку соответственно.

 

Очень часто подводят загрузку сайтов подгружаемые шрифты в стилях веб-страниц, из-за чего веб-браузер у посетителя в некоторых случаях может подтормаживать. Некоторые веб-программисты минимизируют свой код убирая лишние комментарии, пробелы и лишние строки, чтобы страница быстрее загружалась, и для этого есть много онлайн-сервисов, которые помогают сжимать css-стили и js-скрипты.

 

Но не стоит забывать о сжатии страниц с помощью сервера, например с помощью .htaccess:

 

FileETag MTime Size

<IfModule mod_headers.c>
# 1 MONTH
<FilesMatch "\.(jpg|jpeg|gif|png|swf|css|js)$">
    Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
# 1 DAY
<FilesMatch "\.(html|htm|php)$">
    Header set Cache-Control "max-age=86400, private, proxy-revalidate"
</FilesMatch>
</IfModule>

<IfModule mod_expires.c>
<FilesMatch "\.(jpg|jpeg|gif|png|swf|css|js)$">
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(html|htm|php)$">
    ExpiresActive on
    ExpiresDefault "access plus 1 day"
</FilesMatch>
</IfModule>

ExpiresByType image/gif                 "access plus 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpg                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"

<IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|xml)$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<Ifmodule mod_deflate.c>
# Сжатие статических данных
# для конфигурирования сжатия DEFLATE
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</Ifmodule>
#endofnaive


# Используя кэширование .htaccess можно существенно увеличить скорость сайта.
# 1 ГОД
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 НЕДЕЛЯ
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 ДНЯ
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 ЧАС
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=3600, private, proxy-revalidate"
</FilesMatch>

Или другой вариант, добавляем в конец .htaccess:

 

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2678400, public"
</FilesMatch>
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=1814400, proxy-revalidate"
</FilesMatch>
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=300, private, proxy-revalidate"
</FilesMatch>
<IfModule  mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter  DEFLATE
</FilesMatch>
</IfModule>



# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

 

Дата публикации: 2017-08-05 18:11:16

javascript

0

Отзывы:


Некоторые веб-программисты минимизируют свой код убирая лишние

Ваше имя:

Ваш e-mail (необязательно):

Сообщение:

Captcha