随身笔记

作者： admin

  • 推荐：倒计时

    网上找了很多倒计时的插件，感觉代码有点冗余。也有比较好的插件，但是同时一个页面出现多个倒计时的时候就比较麻烦，这里自己写一个简单的倒计时

    （注意：js的settimeout、setinterval方法做的倒计时，时间久了就会有误差。解决方法是设置几分钟后独自刷新按钮）

     

    方式解决办法：意思大概就是设置每隔多少分钟后在重新请求一下后台接口，从某一个时间点在开始倒计时（本人没测试过）

    setInterval(function () {
   document.title=++num;
      run();
},5000);

  run();
 
 function run() {
    //解压后，将代码放进去
 }

     

     

    time_down

    https://www.jb51.net/article/83071.htm

     

     

     

    网上别人写的，可以参考：

    function TimeDown(id, endDateStr) {
    //结束时间
    var endDate = new Date(endDateStr);
    //当前时间
    var nowDate = new Date();
    //相差的总秒数
    var totalSeconds = parseInt((endDate - nowDate) / 1000);
    //天数
    var days = Math.floor(totalSeconds / (60 * 60 * 24));
    //取模（余数）
    var modulo = totalSeconds % (60 * 60 * 24);
    //小时数
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分钟
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;
    //输出到页面
    document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    //延迟一秒执行自己
    setTimeout(function () {
        TimeDown(id, endDateStr);
    }, 1000)
}

     

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时间倒计时</title>
    <script src="TimeDown.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="show">
        </div>
        <script type="text/javascript">
            TimeDown("show", "2013-11-25 8:00:45");
        </script>
    </form>
</body>
</html>

    https://www.cnblogs.com/fengxiaozi/p/3437333.html

  • javascript多线程的实现——web worker

    Web Worker兼容ie10以上包括ie10    js 多线程

    推荐先看关于进程和线程的关系：https://sdeno.com/?p=6455

    背景介绍：
    js是单线程，在执行js的代码时，总要等待其他代码执行完毕后才能去执行其他代码，所有任务只能在一个线程上完成，一次只能做一件事
    。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥
    计算机的计算能力。

    Web Worker作用就是为js创建子线程，js主线程负责UI交互，子线程负责密集型运算，两线程同时运行互不影响避免阻塞，最终子线程在把
    数据结果返回给主线程。

     

    案例：

    <script>
 var worker = new Worker('./js/a.js'); //创建一个子进程
 worker.postMessage({num:1}); //数据传给子线程

 worker.onmessage = function (event) { //接收子进程返回的数据
   console.log('这里接收子线程返回的数据：' + event.data);
   worker.terminate();  //执行完毕关闭
 }
 </script>

     

    // a.js  ，子进程

    self.addEventListener('message', function (e) {
  self.postMessage('这里是子线程的数据=' + e.data.num); //里面的数据返回给主线程
  self.close(); //子进程执行完毕时关闭
}, false);

     

    在线案例：demo

     

    Web Worker特性：

    1，Worker 子线程一旦新建成功，就会不停的循环的执行。要记得关闭

    // 关闭主线程
worker.terminate();

// 关闭Worker 子线程
self.close();

    2，同源策略
    new Worker(‘./js/a.js’)在加载脚本时不要涉及到跨域，必须与主线程的脚本文件同源。

    3，DOM限制

    Worker子线程只能访问，navigator对象和location。不能操作DOM对象

     

    4，方法限制
    Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

    5，文件限制

    Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

     

    Worker 子线程内部加载脚本

    importScripts('script1.js', 'script2.js');

     

    主线程监听Worker报错回调

    worker.addEventListener('error', function (event) {
 // ...
});

    Worker 内部也可以监听error事件。

     

    http://www.ruanyifeng.com/blog/2018/07/web-worker.html

    其他案例：https://www.cnblogs.com/peakleo/p/6218823.html

     

  • 取代webpack的打包工具——Parcel

    Parcel 的优势：
    1，极速打包时间
    Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

    2，将你所有的资源打包
    Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持，而且不需要插件。

    3，自动转换
    如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

    4，零配置代码分拆
    使用动态 import() 语法, Parcel 将你的输出文件束(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。

    5，热模块替换
    Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

    6，友好的错误日志
    当遇到错误时，Parcel 会输出 语法高亮的代码片段，帮助你定位问题。

    Parcel 的缺点：
    1，缺乏插件
    新出的打包工具，还在成长当中，插件的数量和 webpack, gulp 这种成熟的工具是无法相比的。

    2，不太适合大项目
    毕竟 0 配置，无需过多的配置即可使用。但是，若项目有复杂的文件处理，也许花点时间在配置上面更能提高效率。

     

    快速上手：http://web.jobbole.com/93276/

    http://www.css88.com/doc/parcel/

     

  • 进程、线程关系

    jinc

  • 解决：webp兼容性问题

    webp是谷歌开发的一个图片格式，跟普通的jpg比起来，如果同大小的图片情况下，webp会比较清晰。

    火狐也开始支持webp格式，所以以后webp就是前端的趋势。但是ie浏览器不支持，这里需要做兼容考虑。

    下载：webp

     

    HTML:

    <script type="text/javascript" src="WebP.js"></script>

<img src="http://www.etherdream.com/WebP/Test.webp" />

     

    案例以及来源：http://www.etherdream.com/WebP/

     

    在线转换webp：https://www.upyun.com/webp

     

    其他方法兼容：

    姿势一： <picture>标签

    <picture>是HTML5中的一个新标签，类似<video>它也可以指定多个格式的资源，由浏览器选择自己支持的格式进行加载。

    <picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

    如果浏览器支持WebP格式，就会加载image.webp，否则会加载image.jpg。

    即使浏览器不支持<picture>标签，图片仍然会正常显示，只是CSS可能无法正确选取到picture元素。比如在IE8中，下面的CSS就不会起作用：

    .picture img {
  width: 100px;
  height: 100px;
}

    但是可以这样来给图片写样式：

    .image {
  width: 100px;
  height: 100px;
}

    即使浏览器使用的是WebP格式的图片，最终还是会应用img元素的样式。

    不过只要使用了html5shiv，使旧的浏览器支持这个标签，CSS选择器就可以正常使用了。

    这种方法是最简单的，但是不能作用于CSS中的图片（如背景）。

     

     

    姿势二：使用JS替换图片的URL。

    我们有很多的页面往往会用到图片的“懒加载”——通常是把图片的URL放在img元素的一个自定义属性中，然后用JS在适当的时机将URL赋值给src属性。用类似的原理，我们可以根据浏览器是否支持WebP格式，给img元素赋予不同的src值。

    首先我们需要用JS来判断浏览器是否支持WebP格式，方法是给浏览器一个WebP格式的图片，看浏览器能否正确渲染。这种方法是异步的，所以需要把后续的操作写在回调函数中。我们可以将结果存储在localStorage中，这样之后就不用再次检查了。

    function checkWebp(callback) {
  var img = new Image();
  img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

    然后用下面的代码来根据是否支持WebP替换相应的src。

    function showImage(useWebp){
  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){
    var src = i.attributes['data-src'].value;

    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

    这种方式的优点是可以与已有的懒加载函数相结合。而且使用JS，我们还可以处理CSS中的图片（如背景图等）。

     

     

     

    姿势三：使用JS解码WebP图片

    既然WebP的解码器是开源的，那么能否用JS来实现呢？当然可以，有人就用JS写出了WebP的解码器。引入这个JS库，就是将所有的WebP图片用JS解码后转换为base64，然后替换掉原来的URL，这样就可以让原本不支持WebP的浏览器正常显示WebP了。这个库的使用方法非常简单，看网页的说明即可。

    这种方法的缺点是，因为JS要解码WebP图片，需要在此异步请求src中的URL（不过因为图片本身之前被下载了一次，直接使用了缓存）；而且JS解码比较慢，对性能有影响，可能需要一段时间才能显示出图片来。

    以上就是在浏览器中使用WebP图片的几种方法，可以根据自己的实际情况选用。在我们的实践中，使用了WebP格式后，图片的体积普遍缩小了1/3以上，既加快了加载的速度，还节省了用户的流量，我们十分推荐从现在就开始使用这种格式。

     

    文章：https://segmentfault.com/a/1190000007482148