前言

一直觉得自己的博客站点页面加载很慢, 就想着去优化一下. 呐, 下图是一次文章页面的加载, 需要2.5s. 其中 js 文件就有18个. 众所周知, 浏览器对资源文件的并行下载数量是有限制的(不同浏览器限制不同). 也就是说, 这18个 js 文件是无法同时下载的, 再说了, 页面中还有其他资源文件, 因此. 减少资源文件的数量, 就可以提高页面的加载速度.

合并 js 文件

首先, 尝试将页面的 js 文件进行合并. 这里我使用了比较通用的方法, 正则匹配. 因此需要的话, 你大概率也可以使用:

<?php
// 开启页面缓冲
ob_start(function($content){// 根据正则表达式, 将特定部分的 js 内容进行提取$mergePatternJsData = function ($content, $pattern, $replaceStr){// 没有找到匹配的内容$noMatch = fn() =>  str_replace($replaceStr, "", $content);// 将内容进行匹配提取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);// 这里对页面中的部分 js 文件进行过滤// 因为一些 js 文件中使用相对位置引入了其他资源文件// 因此若是将其链接挪走了, 会导致引入资源文件失败$itemMatch = fileCantMergeFile($itemMatch);if(empty($itemMatch[0])) return $noMatch();// 将匹配到的 js 文件进行合并, 并返回合并后的链接$replaceUrl = self::mergeResData($itemMatch[1]);// 将原本的 js 内容去掉$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 中放好的等待替换的字符串. 这里简单处理了, 其他处理方式也是可以的// 这里说一下为什么 head 和 body 中的 js 资源不能进行合并// 因为资源文件的加载时机不同, 因此不能进行合并// 匹配 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__; // 项目路径, 自行修改// 保存缓存文件的路径, 相对于项目的相对路径// 这一, 这个路径要 nginx 可访问哦$relativePath = ''; // 获取合并后的本地缓存 js 文件$filename = md5(implode('', $urlList)).'.js';$filepath = "{$workPath}/{$relativePath}/{$filename}";// 若缓存文件已经存在直接返回, 这里没有考虑 js 文件更新的情况. 若需要的话, 请自行处理if(!file_exists($filepath)){ // 创建文件// 提取所有文件的内容合集$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 文件数量降低为2个了. 看一下效果, 效果还是十分显著的, js 数量减少了12个(多出来的是由 js 文件引入的 js), 时间减少了差不多0.9s

合并 css

既然 js 文件可以合并, 那么自然, css 也能够合并. 合并的代码拿上面的改改就出来了. 这里直接上效果

在合并之前, css 文件9个. 合并后为2个(因为其中一个使用了相对路径), 时间减少了差不多0.1s 左右. 这里是因为 css 文件数量不多, 且文件本身较小, 所以效果没有 js 那么明显.

js 和 css 都进行了合并, 难道就完了么? 不. 我们还可以对其进行压缩.

压缩 js/css

找到了这个库: mrclay/minify . 直接composer require mrclay/minify 引进来就行.

使用如下方法在将内容写入到缓存文件时, 对其进行压缩:

<?php
// 压缩 js 内容
$allContent = JSMin::minify($allContent)
// 压缩 css 内容
$allContent = Minify_CSSmin::minify($allContent)

这里, 因为加载的 js 和 css 本身大部分就已经是压缩过的了, 因此效果并不是那么明显. 时间仅减少了0.1s. 若是资源文件本身没有压缩, 效果会更明显.

最终

最终效果, 页面的加载时间从原本的2.5s, 降低到了1.4s. 当然, 不同的网络环境, 时间也会不同, 但这也减少了差不多45%的加载时间, 而这, 还仅仅是通过合并资源文件来实现的. 想象平常我们究竟为了这玩意浪费了多少用户的时间啊.

页面加载速度-合并资源文件相关推荐

nginx 配置静态文件目录_nginx缓存静态资源，只需几个配置提升10倍页面加载速度...
nginx缓存静态资源,只需几个配置提升10倍页面加载速度首先我们看图说话这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个 ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
HTML 提高页面加载速度的方法
HTML 提高页面加载速度的方法: 1. 减少http请求(合并资源文件,合并图片-精灵图) 2. 把css放文件头部,javascript放body标签尾部 3. 定义图片的宽,高 4. 避免空的s ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
前端性能优化：如何提高页面加载速度和用户体验
第一章:介绍当今互联网时代,网站的性能对于用户体验至关重要.一个快速加载的网页不仅能提高用户的满意度,还能增加页面的转化率.而在前端开发中,性能优化是一个永恒的话题.本篇博客将为大家分享一些关于前端 ...
打造亚秒级页面加载速度网店实践经验
美国的创智赢家(Shark Tank),英国的龙穴之创业投资(Dragons' Den),以及德国的"Die Hohle der Lowen (DHDL)"等电视节目为年轻的初创公 ...
前端提升页面加载速度
性能黄金法则: 只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中的所有组件上. 提升加载速度的方式: 一.减少HTTP请求 (1).合并脚本和样 ...
如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
web 页面加载速度优化实战-100% 的飞跃提升
前言一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

页面加载速度-合并资源文件

前言

合并 js 文件

合并 css

压缩 js/css

最终

页面加载速度-合并资源文件相关推荐

最新文章

热门文章