Loading...
墨滴

望北川

2021/08/06  阅读:35  主题:全栈蓝

个人主页重新设计改版,中途却遇到两个难题

遇到问题

今天有点闲,突然有小想法,想把个人网站再重新设计改版。

于是开始捣腾:

  1. 网站字体更换了(谁没有点个性呢)
  2. 背景改成了全屏视频背景(炫酷)
  3. 加上了六月份和女朋友去海南旅游的美景图片(秀儿)
  4. 还把公众号和小程序二维码挂上了(装X)

但是,中途却遇到两个难题......

没有挫折就没有动力嘛~

解决问题

问题一:

字体文件太大拖慢网页加载速度

整个字体包大小11M,我云服务器上行带宽最多跑个1M左右,那加载个字体就得10s左右,以这速度谁还看我网站,,,崩溃。。。

那么通过百度老师搜索,逛论坛,翻博客。

最终确定一个解决办法,通过蜘蛛爬取网页字体。

下面是我总结并完善后的方法。

字蛛(font-spider)压缩字体

一个智能 WebFont 压缩工具!

字蛛通过分析本地CSS与HTML文件获取WebFont中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,并生成跨浏览器使用的格式。

1. 安装nodejs ,npm

Nodejs官网下载:https://nodejs.org/en/download/

可以参照:https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

安装的时候选择add to PATH 这样node npm 模板都安装了

安装完毕后,打开cmd命令窗口,依次输入命令:
node -v
npm -v
如果正确输出版本号,说明我们的NodeJS和NPM就安装好了

2.安装font-spider

找到路径C:\Windows\System32\cmd.exe(右键以管理员身份运行)

如果不是管理员身份运行可能会有些权限报错...

执行全局安装命令 npm install font-spider -g
安装完成后 输入font-spider

如果显示下图信息就说明安装成功了~

3. 运行字蛛

未压缩前

/* 我的CSS样式 */ 
@font-face {
   font-family: WangWei;
   srcurl("wangwei.ttf");
   font-weight: normal;
   font-style: normal;
}

生成新的压缩字体包,执行命令

font-spider index.html

这里的*号是表示匹配全部 也可指定html

font-spider ./demo/*.html

多文件的话用空格分开

font-spider ./demo/*.html ./demo/pages/index.html

这样就是压缩成功了,原来的字体会自动保存在.font-spider目录

11M的字体变成230kb 还是很奈斯的~

网站B格和速度瞬间拉上来了,哈哈~

问题二:

移动端视频为顶级元素无法被覆盖

  • PC端浏览器展示无任何问题,完美适配。

  • video 元素在安卓端(移动端)特性并不统一,目前并没有找到很好解决方案。

1.视频转图片列表播放(未采纳)

一开始有点好奇这个方法,然后实践测试了一下。

视频用Pr导出为每一帧的图片,这349张图片还是经过我批量压缩的,原图基本都是100kb以上。。。

原MP4格式视频3.36M,转成图片并且还压缩了居然14.2M,整整翻了4倍,我吐了。。。

通过JavaScript写执行语句,顺序播放图片:

<script type="text/javascript">
 var urlRoot = './thumbs/';
 var indexRange = [10001348];
 var maxLength = indexRange[1] - indexRange[0] + 1;
 // loading
 var eleContainer = document.getElementById('container');
 var eleLoading = document.getElementById('loading');
 // 存储预加载的DOM对象和长度信息
 var store = {
     length0
 };
 // 图片序列预加载
 for ( var start = indexRange[0]; start <= indexRange[1]; start++) {
     (function (index{
         var img = new Image();
         img.onload = function ({
             store.length++;
             // 存储预加载的图片对象
             store[index] = this;
             play();
         };
         img.onerror = function ({
             store.length++;
             play();
         };
         img.src = urlRoot + index + '.jpg';
     })(start);
 }
 
 var play = function ({
     // loading进度
     var percent = Math.round(100 * store.length / maxLength);
     eleLoading.setAttribute('data-percent', percent);
     eleLoading.style.backgroundSize = percent + '% 100%';
     // 全部加载完毕,无论成功还是失败
     if (percent == 100) {
         var index = indexRange[0];
         eleContainer.innerHTML = '';
         // 依次append图片对象
         var step = function ({
             if (store[index - 1]) {
                 eleContainer.removeChild(store[index - 1]);
             }
             eleContainer.appendChild(store[index]);
             // 序列增加
             index++;
             // 如果超过最大限制
             if (index <= indexRange[1]) {
                 setTimeout(step, 42);
             } else {
                 // 本段播放结束回调
                 // 我这里就放一个重新播放的按钮
                 eleContainer.insertAdjacentHTML('beforeEnd''<button onclick="play()">再看一遍英姿</button>');
             }
         };
         // 等100%动画结束后执行播放
         setTimeout(step, 100);
     }
 };
</script>

可以用来做网站背景,移动端可正常显示,效果一般般。

而且文件大,才刚解决完11M字体库的问题,又来个14.2M的背景。。。

2. 视频转Gif格式展示(未采纳)

源视频分辨率为 1920×1080,25fps 时长为 6s,体积是 1.4M,转成同分辨率同帧率的 gif 图片,体积居然要 26M

而且由于 gif 格式只支持 256 色,mp4 转 gif 画面的分辨率虽然不变但画质有很大损失,上图能看到明显的像素块效果。

所以日常视频转 gif 时都会进行一定的压缩处理,页首 gif 经过 640×360 12fps 的压缩处理过的体积是 2.3M,还是大于视频的体积,果断放弃。

3. 移动端和PC端加载不同样式(已采纳)

最后,我仔细想了想,可以没必要这样瞎折腾,可以通过控制网页。

于是,通过js来判断访问环境,加载不同样式:

<script type="text/javascript">
    // 判断是否为移动端运行环境 
    if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
        if(window.location.href.indexOf("?mobile") < 0) {
            try {
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                // 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载移动端样式 
                    setActiveStyleSheet("css/style_mobile.css");
                } 
            } catch(e) {}
                }
            } 
        else {
            // 否则就加载PC端样式
        setActiveStyleSheet("css/style_pc.css");
    }
// 判断完毕后加载样式 
function setActiveStyleSheet(filename{
    document.write("<link href=" + filename + " rel=stylesheet>");
}
</script>

PC端访问: 移动端访问:

经过测试,这就是我想要的效果,奈斯!接下来分别更改移动和PC端的css样式,将背景元素匹配好我想要的效果就ok啦~

前两个方法感觉都是白给,不过多研究研究还是蛮好的。多实践遇到困难在以后就能越记得住教训,哈哈!我的个人网站就不放出来了,怕被大佬盯上~

本期内容到此结束,再会

参考资料:

Nodejs与npm安装:https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

序列图片视频化播放:https://www.zhangxinxu.com/wordpress/2018/05/image-sequence-html5-video-play/

实例页面:https://www.zhangxinxu.com/study/201805/image-sequence-frame-play.html

我是小维,原创不易,如果觉得文章还不错的话,希望 点赞 + 在看 支持下,给俺点创作动力。

望北川

2021/08/06  阅读:35  主题:全栈蓝

作者介绍

望北川