前端沉淀-每周阅读文章

链接到的都是别人的文章

9.22第一周

基于 webpack 的前后端分离开发环境实践

• spa模式开发从组件化，数据流，状态容器，再到网络请求，单页路由都给了完善的全家桶方案。但是有以下问题：

  1. 前端开发本地开发环境下该如何突破域的限制和服务端接口进行通信？
  2. 一条命令，能否同时完成webpack和node server的启动？
  3. 开发环境下的前端资源路径应该如何配置？
  4. mock数据应该怎么做？
  5. 打包构建后的文件能否直接预览效果？

• 对于webpack-dev-server的解读
  详解webpack-dev-server的使用

• 借助node和http-proxy实现通信
  
  1. 直接启动服务端项目，再讲url指向前端服务中的静态资源地址。缺点是要启动两套环境，配置繁琐
  2. cors跨域
  3. http-proxy：用nodejs搭建本地http服务器，并且判断访问接口url进行转发。

webpack前端构建性能优化策略小结

• 对于公共包
  CommonsChunkPlugin正确打开方式

module.exports = {
    entry: {
        app: './app.js',
        vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
    },
    //其他配置
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
    ]
}

跨页面通信的各种姿势

• 获取句柄，利用onload然后postMessage
• localStorage触发storage事件
• BroadcastChannel

// A.html
const channel = new BroadcastChannel('tabs')
channel.onmessage = evt => {
// evt.data
}

// B.html
const channel = new BroadcastChannel('tabs')
channel.postMessage('hello')

• SharedWorker
• cookie使用轮询脏值检查
• webSocket
• 消息队列

vue 状态管理的一点思考

• 多个组件共享状态：

  1. vuex
  2. 将状态放在父组件上
  3. 将组件状态共享出来

//state.js
export default {message: ''};
//sidebar.vue
import state from 'path/to/state.js'
data() {
    return state
}
//map.vue
import state from 'path/to/state.js'
data() {
    return state
}

• 组件通信
  
  1. props down，events up
  2. var bus = new Vue()。在bus里$on,$emit

9.30(第三周)

ES7新特性

1. Array.prototype.includes
2. 取幂运算符（**）

ES8新特性

1. 使用async和await关键字，实现同步读取
2. 共享内存和Atomics，使开发人员能够共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据
3. 允许function参数后面添加逗号
4. Object.values/ Object.entries
5. 字符串填充
6. Object.getOwnPropertyDescriptors复制函数

浏览器的渲染：过程与原理

• 瓶颈：

  1. dns解析
  2. tcp连接
  3. http请求与相应
  4. 服务器相应
  5. 客户端渲染

• 渲染过程：

  1. 处理html标记，构建DOM树
  2. 处理css标记，构建CSSOM树
  3. 将DOM树与CSSOM树共同构建成渲染树
  4. 根据渲染树来布局，计算节点的结合特性
  5. 将各个节点绘制在屏幕上

• js阻塞下载，当有src属性时，使用defer和async来异步下载
  二者区别在于：

  1. defer不会改变执行顺序，而async哪个先下载完执行哪个
  2. defer会先执行代码再触发DOMContentLoaded，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行

javascript内存泄漏教程

• 垃圾回收机制：
  js的两种回收机制
  
  1. 标记清除
     当变量进入到某个环境中的时候就把这个变量标记一下，比如标记为“进入环境”，当离开的时候就把这个变量的标记给清除掉，比如“离开环境”。
  2. 引用计数

const arr = [1,2,3];
console.log('hello world')
arr = null;

以上就解除了对[1,2,3]的引用。
js访问BOM,DOM是基于引用计数的策略的。
3. WeakMap和WeakSet

const vm = new WeakMap();
const element = document.getElementById('example');
vm.set(element, 'some informatino');

上述，当element消除了对节点的引用，它占用的内存就会被垃圾回收机制释放。weakmap保存的这个键值对也会自动消失。

10.13(第四周)

Promise原理

//一个大概，有个问题就是resolve传入的参数，每个都会传入then添加的函数中
function Promise(fn) {
    var callbacks = [],
        state = 'pending',
        value = '';
    this.then = function(func) {
        if(state === 'pending'){
            callbacks.push(func);
            return this;
        }
        func(value);
        return this;
    }
    function resolve(val) {
        value = val;
        state = 'fulfilled';
        setTimeout(() => {
            callbacks.forEach((item) => {
                item(value);
            })
        }, 0)
    }
    fn(resolve)
}
new Promise(function(resolve) {
    resolve('aaa');
    console.log(2)
}).then((val) => {
    console.log(val)
}).then((val) => {
    console.log(val + '2')
})

单页应用多路由预渲染指南

概念：
1. 客户端渲染：用户访问url，请求html文件，前端根据路由状态渲染页面内容。关键路径较长，有一定的白屏时间。
2. 服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端。前端接收到html时已有部分内容；
3. 预渲染：构建阶段生成匹配渲染路径的html文件（注意：每个预渲染的路由都有一个对应的html）。构建出来的html文件已有部分内容

hash不会带到服务器，路由信息会丢失