Chromium

硬件加速机制

减少重绘

1. 使用合适的网页分层技术减少需要重新计算的布局和绘图
2. 使用CSS 3D变形和动画技术

如使用canvas制作游戏使用多个canvas元素分层

1. 背景
  2. 障碍物
    3. 炸弹等
      4. 人物

安全机制

当用户访问网页时，浏览器要确保网页中的数据安全性，如Cookies，用户名，密码等不被其他的恶意网站所获取

沙箱模型

原理

浏览器默认所有的网页是不安全的，所以将网页的渲染放到一个受限的环境中去执行

受限的环境
    渲染引擎
操作系统

实现

  代理进程（Browser）
    |
沙箱
  目标进程（Renderer）

嵌入式应用模式

CEF3（Chromium Embedded Framework）提供一套嵌入式本地代码编程接口（C/C++），

android.webkit.WebView

module style

1
2
3
4

import Vue from 'vue';
import { CssModuleTestHelperMixin } from './test-helper.js';

Vue.use(CssModuleTestHelperMixin);

1
2
3
4
5
6
7
8
9
10
11

import objProxy from 'identity-obj-proxy';

export const CssModuleTestHelperMixin = {
    install(Vue, options) {
        Vue.mixin({
            created() {
                this.$style = objProxy;
            },
        });
    },
};

ES6转换配置babel

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
    presets: [
        '@vue/app',
        [
          '@babel/preset-env',
          { 
            targets: 
              { node: 'current' } 
          }],
    ],
};

format-detectio

格式检测 , 默认为yes，yes为开启样式允许跳转，no为不开启样式不允许跳转

<meta name="format-detection" content="telephone=no,email=no,adress=no">

打电话

<a href="tel:400-0000-688">400-0000-688</a>

发信息

<a href="sms:18688888888">发短信</a>

发邮件

<a href="Mailto:ghsau@163.com?CC=ghsau@163.com&BCC=ghsau@163.com&Subject=Hello&Body=你好">给我发邮件</a>

1. 下载 旧版 portfinder

yarn add portfinder@1.0.21 –dec

2. 指定cli依赖版本

在packagejson.json中添加

1
2
3

"resolutions": {
  "@vue/cli-service/portfinder": "1.0.21"
}

3. 用yarm运行，其他无效

安装nvm

curl -o- curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

在~/.bashrc添加

1
2
3
4
5
6
7
8
9
10

export NVM_DIR="$HOME/.nvm" 
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
```    
> source ~/.bashrc

## 安装avn

```bash
npm install -g avn avn-nvm avn-n
avn setup

自动切换node

在项目目录下建文件.nvmrc

1

10.16.3

    let ind = this.limitIndex;
            let size = this.limitSize;

            const top = this.$refs.parentScroller.scrollTop;
            if (top < 0) return;
            let n = parseInt(top / 42);
            let count = 0;
            if (n > ind) {
                let s = n - ind;
                for (var i = 1; i <= s; i++) {
                    let num = ind + size + i - 1;
                    if (num > -1 && num < countries.length) {
                        count++;
                        if (countryCode.indexOf(num) < -1) continue;
                        console.dir(num);
                        this.targetCountries.push(countries[num]);
                        countryCode.push(num);
                    }
                }
                this.targetCountries.sort((k, m) => k.id - m.id);
                this.targetCountries.splice(0, count);
                this.limitIndex = n;
            } else if (n < ind) {
                let s = ind - n;
                for (var i = 0; i < s; i++) {
                    let num = n + i;
                    console.dir(num);
                    if (num > -1 && num < countries.length) {
                        count++;
                        this.targetCountries.push(countries[num]);
                    }
                }
                this.targetCountries.sort((k, m) => k.id - m.id);
                this.targetCountries.splice(this.targetCountries.length - count, count);
                this.limitIndex = n;
            }
        },

1. 将[{id:1},{id:2, pId:1},...]转成[id1:child:[{id:2, pid:1}]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const fn = arr => {
  const res = []
  const map = arr.reduces((res, item) => ((res[item.id] = item), res), {})
  for (const item of Object.values(map)) {
    it(!item.pId) {
      res.push(item)
    } else {
      const parent = map[item.pId]
      parent.child = patent.child || []
      parent.child.push(item)
    }
  }
  return res;
}

状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。