前端沉淀-每周阅读文章

最新推荐文章于 2024-02-05 10:20:44 发布

原创最新推荐文章于 2024-02-05 10:20:44 发布 · 置顶 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端开发 #每周清单

框架同时被 3 个专栏收录

5 篇文章

订阅专栏

网络

4 篇文章

订阅专栏

性能优化

2 篇文章

订阅专栏

本文整理了前端开发的每周阅读清单，涵盖基于Webpack的前后端分离实践、前端构建性能优化、跨页面通信、Vue状态管理、ES新特性、浏览器渲染原理以及Promise和预渲染等知识点，旨在提升前端开发者的技能和理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

链接到的都是别人的文章

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新特性

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

ES8新特性

使用async和await关键字，实现同步读取
共享内存和Atomics，使开发人员能够共享多个service worker和核心线程之间的SharedArrayBuffer对象的数据
允许function参数后面添加逗号
Object.values/ Object.entries
字符串填充
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不会带到服务器，路由信息会丢失