页面加载速度-合并资源文件
前言
一直覺得自己的博客站點(diǎn)頁面加載很慢, 就想著去優(yōu)化一下. 吶, 下圖是一次文章頁面的加載, 需要2.5s. 其中 js 文件就有18個(gè). 眾所周知, 瀏覽器對(duì)資源文件的并行下載數(shù)量是有限制的(不同瀏覽器限制不同). 也就是說, 這18個(gè) js 文件是無法同時(shí)下載的, 再說了, 頁面中還有其他資源文件, 因此. 減少資源文件的數(shù)量, 就可以提高頁面的加載速度.
合并 js 文件
首先, 嘗試將頁面的 js 文件進(jìn)行合并. 這里我使用了比較通用的方法, 正則匹配. 因此需要的話, 你大概率也可以使用:
<?php // 開啟頁面緩沖 ob_start(function($content){// 根據(jù)正則表達(dá)式, 將特定部分的 js 內(nèi)容進(jìn)行提取$mergePatternJsData = function ($content, $pattern, $replaceStr){// 沒有找到匹配的內(nèi)容$noMatch = fn() => str_replace($replaceStr, "", $content);// 將內(nèi)容進(jìn)行匹配提取preg_match($pattern, $content, $matches);if(empty($matches[0])) return $noMatch();// 匹配其中的 js 文件$pattern = "/<script\s*src='(.*)'.*><\/script>/U";preg_match_all($pattern, $matches[0], $itemMatch);// 這里對(duì)頁面中的部分 js 文件進(jìn)行過濾// 因?yàn)橐恍?js 文件中使用相對(duì)位置引入了其他資源文件// 因此若是將其鏈接挪走了, 會(huì)導(dǎo)致引入資源文件失敗$itemMatch = fileCantMergeFile($itemMatch);if(empty($itemMatch[0])) return $noMatch();// 將匹配到的 js 文件進(jìn)行合并, 并返回合并后的鏈接$replaceUrl = self::mergeResData($itemMatch[1]);// 將原本的 js 內(nèi)容去掉$content = str_replace($itemMatch[0], '', $content);// 替換新的 js 文件return str_replace($replaceStr, "<script src='{$replaceUrl}'></script>", $content);};// JS_REPLACE_HEAD_STR/JS_REPLACE_FOOTER_STR 是提前在 header/footer 中放好的等待替換的字符串. 這里簡(jiǎn)單處理了, 其他處理方式也是可以的// 這里說一下為什么 head 和 body 中的 js 資源不能進(jìn)行合并// 因?yàn)橘Y源文件的加載時(shí)機(jī)不同, 因此不能進(jìn)行合并// 匹配 header 中的 js 文件$headerPattern = '/<head>[\S\s]*<\/head>/U';$content = $mergePatternJsData($content, $headerPattern, self::JS_REPLACE_HEAD_STR);// 匹配 body 中的 js$bodyPattern = '/<body[\s>][\S\s]*<\/body>/U';return $mergePatternJsData($content, $bodyPattern, self::JS_REPLACE_FOOTER_STR); });function mergeResData($urlList){if(empty($urlList)) return null;$workPath = __DIR__; // 項(xiàng)目路徑, 自行修改// 保存緩存文件的路徑, 相對(duì)于項(xiàng)目的相對(duì)路徑// 這一, 這個(gè)路徑要 nginx 可訪問哦$relativePath = ''; // 獲取合并后的本地緩存 js 文件$filename = md5(implode('', $urlList)).'.js';$filepath = "{$workPath}/{$relativePath}/{$filename}";// 若緩存文件已經(jīng)存在直接返回, 這里沒有考慮 js 文件更新的情況. 若需要的話, 請(qǐng)自行處理if(!file_exists($filepath)){ // 創(chuàng)建文件// 提取所有文件的內(nèi)容合集$allContent = '';foreach ($urlList as $itemUrl){$allContent .= PHP_EOL.file_get_contents($workPath.parse_url($itemUrl, PHP_URL_PATH));}$dirname = dirname($filepath);if(!is_dir($dirname)) mkdir($dirname, 0777, true);file_put_contents($filepath, $allContent);}return "http://xxx.com/{$relativePath}/{$filename}"; }如此一來, 就可以將頁面中的 js 文件數(shù)量降低為2個(gè)了. 看一下效果, 效果還是十分顯著的, js 數(shù)量減少了12個(gè)(多出來的是由 js 文件引入的 js), 時(shí)間減少了差不多0.9s
合并 css
既然 js 文件可以合并, 那么自然, css 也能夠合并. 合并的代碼拿上面的改改就出來了. 這里直接上效果
在合并之前, css 文件9個(gè). 合并后為2個(gè)(因?yàn)槠渲幸粋€(gè)使用了相對(duì)路徑), 時(shí)間減少了差不多0.1s 左右. 這里是因?yàn)?css 文件數(shù)量不多, 且文件本身較小, 所以效果沒有 js 那么明顯.
js 和 css 都進(jìn)行了合并, 難道就完了么? 不. 我們還可以對(duì)其進(jìn)行壓縮.
壓縮 js/css
找到了這個(gè)庫: mrclay/minify . 直接composer require mrclay/minify 引進(jìn)來就行.
使用如下方法在將內(nèi)容寫入到緩存文件時(shí), 對(duì)其進(jìn)行壓縮:
<?php // 壓縮 js 內(nèi)容 $allContent = JSMin::minify($allContent) // 壓縮 css 內(nèi)容 $allContent = Minify_CSSmin::minify($allContent)這里, 因?yàn)榧虞d的 js 和 css 本身大部分就已經(jīng)是壓縮過的了, 因此效果并不是那么明顯. 時(shí)間僅減少了0.1s. 若是 資源文件本身沒有壓縮, 效果會(huì)更明顯.
最終
最終效果, 頁面的加載時(shí)間從原本的2.5s, 降低到了1.4s. 當(dāng)然, 不同的網(wǎng)絡(luò)環(huán)境, 時(shí)間也會(huì)不同, 但這也減少了差不多45%的加載時(shí)間, 而這, 還僅僅是通過合并資源文件來實(shí)現(xiàn)的. 想象平常我們究竟為了這玩意浪費(fèi)了多少用戶的時(shí)間啊.
總結(jié)
以上是生活随笔為你收集整理的页面加载速度-合并资源文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python可以减少代码量？我不信
- 下一篇： 强行更改linux服务器时间,加强Lin