Pull to refresh

Кэширование js сжатием gzip

Reading time2 min
Views4.1K
Cache — временные данные или устройство по их хранению, созданные для ускорения чтения/записи. Все программисты это знают. Ускорение загрузки web-сайтов тема обширная, начинающаяся с сервера и заканчивающаяся клиентом. К сожалению я не нашёл более-менее подходящих решений по объединению и кэшированию js-кода, поэтому к своему блогу я написал свою схему, о которой вкратце и расскажу..
Существует сжатие «packer», которое убирает все символы форматирования и переименовывает имена функций и переменных в js и предоставляет т.н. minified-версию скрипта. Все с этим прекрасно знакомы на примере больших библиотек jQuery, TinyMCE, prototype. Кроме того что код становится совершенно не читаемым, это может вызвать неработоспособность кода, когда имена переменных динамические.
Моя идея простая — разделять js/css по файлам разработчикам надо для поддержания модульной структуры. Обычно я в контроллере создаю список файлов которые надо присоединить к данному документу, вместо того что-бы прописывать это вручную в темплейте. Но теперь надо сделать так, что-бы до показа темплейта вызывалась функция кэширования, которая проходилась бы по списку, проверяла из них локальные файлы на время изменения, объединяла в один файл и создавала или перезаписывала gz-файл с именем, сформированным из md5-хэша имён входящих файлов.
Всё просто и в сумме заняло часа 4 на раздумье. Привожу метод cache_js из класса Controller.

    function cache_js(){
        $arrNewJS=array();
        $strHash='';
        $strGzipContent='';
        $intLastModified=0;

        //проходимся по списку файлов
        foreach ((array)$this->scripts as $file){
            if (substr($file,0,5)=='http') continue;
            if ($file[0]=='/') $strFilename=sys_root.$file;
            else $strFilename=sys_root.'app/front/view/'.$file;
            $strHash.=$file;

            //читаем содержимое в одну строку
            $strGzipContent.=file_get_contents($strFilename);
            $intLastModified=$intLastModified<filemtime($strFilename) ?  filemtime($strFilename) : $intLastModified;
        }
        $strGzipHash=md5($strHash);
        $strGzipFile=sys_root.'app/front/view/js/bin/'.$strGzipHash.'.gz';

        //проверяем надо ли перезаписать gz-файл
        if (file_exists($strGzipFile) && $intLastModified>filemtime($strGzipFile) || !file_exists($strGzipFile)){
            if (!file_exists($strGzipFile)) touch($strGzipFile);

            //используем функции встроенной в php библиотеки zlib для архивации
            $gz = gzopen($strGzipFile,'w9');
            gzputs ($gz, $strGzipContent);
            gzclose($gz);
        }

        //перезаписываем список на один файл
        $arrNewJS[]='js/bin/'.$strGzipHash.'.gz';
        $this->scripts=$arrNewJS;
    }

Про css я писать не стану, идея аналогичная. Единственный вопрос в автоматизации кэширования и в порядке входящих файлов. Впрочем в результате сжатия 5 запросов превратилось в 1, а суммарный размер уменьшился в 3 раза.
Читайте так-же



Оригинал
Tags:
Hubs:
Total votes 28: ↑24 and ↓4+20
Comments29

Articles