一直覺得 Google Apps Script 寫出來的程式在組資料時速度不佳，直到今天想說用個簡單的測試來跑跑看…

參與的選手

• Google Apps Script 免費
• Oracle VPS 免費： AMD EPYC 7551 32-Core Processor 2 個 AMD 型運算 VM (各有 1/8 個 OCPU** 和 1 GB 記憶體)，大概 2 核心 * 0.125 可使用
• 我的電腦 要錢：AMD Ryzen 5 2400G

Google Apps Script 跑 for loop 塞 obj 測試

// 數值加總
function forSumTest() {
  let start = Date.now();
  let sum = 0
  for (let i = 0; i < 1000000000; i++) {
    sum += i
  }
  Logger.log(`加總值為：${sum}`)
  let end = Date.now();
  Logger.log(`Execution time: ${end - start} ms`);
}
// 1705 + 1666 + 1075 + 1598 + 1604 + 1683 + 1528 + 1459 + 1093 + 1023 = 14,434 ms
// 平均 1,443.4 ms

// obj 賦值
function forObjTest() {
  let sum = 0
  let iRound = 10
  let jRound = 100000000
  for (let i = 0; i < iRound; i++) {
    let start = Date.now();
    let obj = {}
    for (let j = 0; j < jRound; j++) {
      obj[j] = j
    }
    let end = Date.now();
    Logger.log(`Execution time: ${end - start} ms`);
    sum += end - start
  }
  Logger.log(`Avg time: ${sum / iRound} ms`);
}
// 平均 5312.3 ms

Oracle VPS Node.js 環境裝起來

安裝 nvm 工具來管理 Node.js
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.39.3/install.sh | bash
$ source ~/.bash_profile 
查看有哪些版本可以安裝
$ nvm ls-remote
...
v16.19.0   (Latest LTS: Gallium)
...
v18.14.0   (Latest LTS: Hydrogen)
...
v19.6.0
裝最新的 LTS 版
$ nvm install v18.14.0
or
$ nvm install --lts
查看
$ nvm list
切換版本(如有裝其他版本)
$ nvm use v16.19
切換最新的 LTS 版本
$ nvm use --lts
設定預設版本(如有裝其他版本)
$ nvm alias default v16.19

Oracle VPS 跑 for loop 塞 obj 測試

// 數字加總
let start = Date.now();
let sum = 0
for (let i = 0; i < 1000000000; i++) {
  sum += i
}
console.log(`加總值為：${sum}`)
let end = Date.now();
console.log(`Execution time: ${end - start} ms`);
// Oracle VPS
// 3273 + 3141 + 3667 + 3197 + 3203 + 3192 + 3197 + 3183 + 3722 + 3203 = 32,978 ms
// 平均 3,297.8 ms

// obj 賦值
let sum = 0
let iRound = 10
let jRound = 100000000
for (let i = 0; i < iRound; i++) {
  let start = Date.now();
  let obj = {}
  for (let j = 0; j < jRound; j++) {
    obj[j] = j
  }
  let end = Date.now();
  console.log(`Execution time: ${end - start} ms`);
  sum += end - start
}
console.log(`Avg time: ${sum / iRound} ms`);
// JavaScript heap out of memory 炸了

AMD Ryzen5 2400G 跑 for loop 塞 obj 測試

let start = Date.now();
let sum = 0
for (let i = 0; i < 1000000000; i++) {
  sum += i
}
console.log(`加總值為：${sum}`)
let end = Date.now();
console.log(`Execution time: ${end - start} ms`);
// AMD 2400G 效能模式
// 858 + 868 + 857 + 900 + 862 + 858 + 860 + 869 + 859 + 870 = 8,661 ms
// 平均 866.1 ms

let sum = 0
let iRound = 10
let jRound = 100000000
for (let i = 0; i < iRound; i++) {
  let start = Date.now();
  let obj = {}
  for (let j = 0; j < jRound; j++) {
    obj[j] = j
  }
  let end = Date.now();
  console.log(`Execution time: ${end - start} ms`);
  sum += end - start
}
console.log(`Avg time: ${sum / iRound} ms`);
// 平均 3174.5 ms

大出意料之外，是我 Code 寫不好，錯怪他了。但發布出來的 Web App 前端在調用 GAS 不做任何邏輯直接 return 出來還是會有 700 ~ 1,000 ms 的等待 response 時間，GAS 讀試算表 400 筆資料不做任何處理要 300 ms ~ 700 ms，在初始頁面時也慢，適合寫工具就好。

帳號、密碼瀏覽器會幫忙自動帶入了，但計算驗證要自己填
其實問題都是很簡單的數字相加，懶人的想寫腳本自動填入快速登入，頭次嘗鮮覺得很有趣
先分享一下網友做的 Tampermonkey 範例教學，依樣畫葫蘆寫了

// ==UserScript==
// @name         calcDinBenDon
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
//// @include      https://dinbendon.net/*
// @match        https://dinbendon.net/do/login
// @icon         https://www.google.com/s2/favicons?domain=dinbendon.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     let anwser = "got Error"
     let question = document.querySelectorAll(".alignRight")[2].innerText;
     anwser = question.match(/\d+/g).map(Number).reduce((a, b) => a + b);
     document.querySelector('input[name="result"]').value = anwser
})();

很簡單的就是去抓取網頁上的字串文字，取出數字為陣列再轉換型別加總，最後填入表格內

this.getLink(ID).then(res => {
  window.open(res, '_blank', 'height=800,width=1050');
});

在 PC、Mobile 的 Safari、Chrome 都會顯示有彈跳視窗需允許才能打開，這沒什麼問題，允許就好
但在 IOS 14 的 Safari 連提示都沒有，只能從設定裡去動，但不可能教使用者都要去改手機設定
因此找了下解法找到這篇：window.open在Safari中不能打开的问题

改成以下寫法就解決了，可直接彈出新視窗不需按允許

var winRef = window.open('', '_blank', 'height=800,width=1050');
this.getLink(ID).then(res => (winRef.location = res));

踩坑踩很久，先分享一下找到的文章，快速出坑

• 於 window.onbeforeunload 發送HTTP Request
• Beacon API：在網頁關掉的那一刻成功送出API
• caniuse.com
• sendBeacon API not working temporarily due to security issue, any workaround?

首先第一篇發送 HTTP Request 諸多方法，除了作者提到 Service Worker 本身比較麻煩，我看了文件還真是很麻煩，故沒有測
其他測過結果 Beacon API 瀏覽器相容最好，因此有此需求，請直接用它吧。

再來分享事件監聽我嘗試過下列寫法，電腦版 Safari、Chrome、Firefox、手機版 Chrome、Firefox 都能生效，
唯獨手機版 Safari 不行(IOS 版本12、14 都測過)。這網站可以測事件有無觸發，測完放棄治療IOS Safari。

// let isIOS = navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i);
// eventName = isIOS ? 'pagehide' : 'beforeunload'

// 電腦版 Safari 能生效
window.addEventListener('pagehide', e => this.beforeUnload()); 
// 電腦版 Safari、Chrome、Firefox 能生效
window.addEventListener('beforeunload' 或 'unload', e => this.beforeUnload());
// 手機版 Chrome、Firefox 能生效
document.addEventListener('visibilitychange', e => this.beforeUnload()); 

再來第二篇 Beacon API 照可能會碰到跨域問題，而開發環境已經設 * 還是不能跑，參考第四篇得到以下改法可以參考一下

let blog = new Blob(
  [
    JSON.stringify({
      Status: status,
      Account: account,
    }),
  ],
  // { type: 'application/json; charset=UTF-8' }
  { type: 'text/plain; charset=UTF-8' }
);

navigator.sendBeacon(
  apiHost + '/api/demoUpdateLoginStatus',
  blog
);

以上參考。

npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

使用yarn也會跳錯，已經clean cache、更新npm、更換npm source、reboot電腦
重裝nodejs、vue、vue-cli，清除所有npm、npm-cache、刪除 .vuerc檔都無法解決
A同事也發生一樣狀況，但B同事可以成功，最後檢查到.vuerc 有差異

我的預設內容是

{
  "useTaobaoRegistry": true,
  "packageManager": "npm"
}

將 “useTaobaoRegistry” 改為 false 就可以了。

> notepad %USERPROFILE%\.vuerc
{
  "useTaobaoRegistry": false,
  "packageManager": "npm"
}

來源：解決vuex重新整理頁面就恢復初始化的方法之一

       created(){
　　　　　　　　//在頁面載入時讀取sessionStorage裡的狀態資訊
            if (sessionStorage.getItem("store") ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
            }

            //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
            window.addEventListener("beforeunload",()=>{
                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
            })
        },

記得登出時需要清除Session、Vuex，否則怎麼按登出資料都還在

Navigating to current location ("/") is not allowed

解決辦法為在router.js裡加入

const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

就不會再跳錯

來源：解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed”的问题

import Vue from 'vue’
import App from './App’
import router from './router’
import axios from ‘axios’

Vue.use(axios);

正解如下

import axios from 'axios';
Vue.prototype.$http = axios;

引用來源：关于import axios报错Cannot read property ‘protocol’ of undefined

npm run dev

碰到

ERROR  Failed to compile with 1 errors     10:17:50 
Module build failed: TypeError: Cannot read property 'length' of null

Google到對岸資源，看起來跟ESLint有關，暫時用這個方法解決。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i [email protected]

引用自：babel eslint TypeError: Cannot read property ‘range’ of null， 淘宝 NPM 镜像
不是每次都會碰到，其他專案就沒這問題…

 if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {

        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}