menu search

除旧换新

Jul 30, 2017

把各种刚进的草案的、没进草案的、是标准的、不是标准的特性大量用在生产环境不正是 JavaScript 的魅力所在吗 XDDD
我 TMD 到底要怎样才能在生产环境中用上 ES6 模块化?

前几年的JS跨浏览器的兼容那是真麻烦,可能也是因为如此,jQuery和Zepto这类库才能火起来。前者的AJAX和DOM选择器简直是欲罢不能,毕竟原生的选择器那是真难用,getElementsByClassName是又臭又长。

但这几年不同浏览器之间的JS的兼容性已经好了不少,后来出现的querySelectorAll解决了大部分的需求,不仅好用,而且速度也和jQuery的差不多,甚至更快。接着是fetch,自带Promise,异步请求完全没有问题。

但不能否认,jQuery的确大大的方便了前端开发。当初写第一个主题的时候用它基本上没遇到兼容性问题,以至于连IE8都可以正常使用。同时,它自带的.done,.success这些方法在Promise面世之前也让异步请求变得更简单。

我这几年 (2013 - Now) 也断断续续写了好几个主题,跨越了三四个平台。这篇文章就谈谈我最近博客主题的变化。

停止使用jQuery

上面提到,原生的JS方法已经足够了,而且性能还更好。

就是原生方法比jQuery的要啰嗦就是了…

$('#comment'); // jQuery
document.getElementById('comment');  // Native

针对这个问题,我想过一个方法:自己封装一个函数

function getElement(element, type) {
    switch (type) {
        case 'id':
            return document.getElementById(element);
            break;
        case 'class':
            return document.getElementsByClassName(element);
            break;
        default:
            return document.querySelectorAll(element);
            break;
    };
}; 
// Usage: getElement('comment', 'id');

getElementByIdgetElementsByClassName的效率比querySelectorAll高,所以如果可以当然是优先选择前两者。如果是小项目倒是不容易察觉到分别。

但这个还是要打一串字,而且为了效率还得注明类型,太麻烦了(大写的懒)

昨天想了个方法,使用和jQuery一样的$:

function $(element, container) {
    var where = container || document
    
    if (element.indexOf('.') >= 0 || /\s/g.test(element)) {
        return where.querySelectorAll(element);
    } else if (element.substring(0, 1) == '#') {
        return where.getElementById(element.replace('#', ''));
    } else if (element.substring(0, 1) == '.') {
        return where.getElementsByClassName(element.replace('.', ''))
    } else {
      return where.querySelectorAll(element);
    };
};

// Usage: $('#comment');

主要的想法是判断如果出现了多个.或者是空格,就使用querySelectorAll来获取。如果都没有,那就判断第一个字符

但如果都不符合条件,那就还用querySelectorAll。这样做主要是怕需要获取的是HTML标签(原生的方法是getElementsByTagName)。

不用jQuery,网页加载速度也能快点。可惜有些插件的替代品还是没jQuery版的好用。

使用SVG来代替字体图标

在用Minimo主题的时候接触了SVG图标,然后我就完全放弃了字体图标,现在的主题就在用。

我体验到的优点有:

  • 可以直接插入网页,不需要再多加载一个字体文件。同时,可以按需加载
  • 可以自定义的地方比字体图标多 (背景,颜色,粗细…)

字体图标最让我忍受不了,但也是特点的地方是它把所有的图标都打包成一个文件。我以前用的是Icomoon.io来生成,想添加一个图标就得重新下载,替换,添加CSS… 久而久之就烦了

但内嵌SVG就不一样了,我需要什么图标,直接粘贴在相应的页面上,如果不需要就直接删除。CSS方面也不需要做出大量修改。

拼速度

之前写Ghost主题的时候我有个习惯是首页文章列表加载的图片基本上都是原图,因为Ghost并没有自带的图片处理引擎。虽然有段时间用上了七牛,但速度并不够理想,还是被我去除了。

而且还经常把一堆函数堆在一起,页面/PJAX加载后立刻执行,经常会卡个一两秒才能好好浏览。

同时,页面的加载速度也是不忍直视,经常要加载1MB以上的内容。

我当时也没有怎么在意这部分,能用就行了 😂

但用上静态博客后那是越来越在意速度了。图片大部分都加上了Lazyload,用上了Webp,能缩小图片就缩小图片。

速度也快,还能省服务器流量

我个人感觉我今年的博客主题,相比以往,主要的进步在于我开始注重性能了,不再无脑堆插件和代码:能不用插件就不用,能少一个循环就少….

脚本也是按需加载。例如前天我给评论框加的Markdown预览功能,marked.js 不会跟着页面加载,只有点击按钮后才会。用到的代码如下:

if (typeof marked !== 'function') {
fetch('https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js').then(response => {
        return response.text();
    }).then(function (r) {
        eval(r);
    });
};

想改的地方

即使这样了,PageSpeed Insights 还是只给了我 7510091100 分,差的就是 「清除首屏内容中阻止呈现的 JavaScript 和 CSS」

官方推荐把主要的CSS拆出来,单独放在头部加载。其余的可以放在页脚,这样速度会更快。但我还没想要要怎么搞这个,似乎也只有人力筛选了。


我还想在CSS里面用上「Variables (Custom Properties)」。根据Can I Use…,目前大部分浏览器都已经支持,除了Edge有点小问题。

这个新的特性可以方便的让我让我一键更换整个页面的颜色。我写了个演示


最后,我还想折腾看看Service Worker,用来发送提醒(例如新文章提醒)。但还得琢磨琢磨怎么实现,等折腾好了再发篇文章讨论。

Comments

edit x send markdown image
paragraph comment heart