zhang13pro/iblog

Blog with github-issues

Hi there 👋

Still Alive 😊

iblog's Issues

浏览器原理概述

Chrome 架构：仅仅打开了 1 个页面，为什么有 4 个进程

chrome 每个 tab 页属于一个单独的进程，进程中的多个线程数据共享，进程间互不干扰，所以单个页面出现崩溃不会影响其他页面。

用户能稳定流畅安全的访问互联网得益于 chrome 的多进程架构，一个页面包括：

• 主进程（Browser Process）。
• 渲染进程（Render Process）。
• GPU进程（GPU Process）。
• 网络进程（Network Process）。
• 存储进程（Storage Process）。
• 插件进程（Plugin Process）。

以上，当你用chrome打开一个页面时，至少包括4个进程甚至更多（插件）。

块级作用域：var缺陷以及为什么要引入let和const

长久以来JavaScript声明变量只有函数作用域，相同逻辑代码，相比其他拥有块作用域的编程语言实现的结果会不可预测。

Webpack原理与实践

模块化的演进

文件划分

• 模块直接在全局工作，大量模块成员污染全局作用域
• 没有私有空间，所有模块内的成员都可以在模块外部被访问或者修改
• 一旦模块增多，容易产生命名冲突
• 无法管理模块与模块之间的依赖关系
• 在维护的过程中也很难分辨每个成员所属的模块

命名空间

• 解决命名冲突问题

IIFE

• 解决命名冲突和全局作用域污染

IIFE 依赖参数

• 明确模块之间的依赖关系

模块化规范

CommonJS

• 同步加载模块

AMD(Asynchronous Module Definition)

• Require.js

CMD

• Sea.js

ES Modules

• 兼容问题
• 多模块文件的频繁请求
• 前端应用的非JS模块

Mode

production

• 启动内置优化插件，自动优化打包结果，打包速度偏慢

development

• 自动优化打包速度，添加一些调试过程中的辅助插件

none

• 运行最原始的打包，不做任何额外处理

打包结果运行原理(V5)

V4

• 生成IIFE，每个模块对应一个函数直接量（表达式）作为参数数组里的 item 传入

V5

• webpack_modules 变量 保存模块参数[IIFE]

webpack_module_cache 对象 缓存模块

webpack_require(id) 加载指定模块

• 判断缓存是否可用

IIFE包裹的工具函数

调用__webpack_require__(module_id)

Loader

webpack只解析JS token

实现不同种类资源模块加载的核心

css-loader

• 本质是将CSS脚本字符串push到 CSS_LOADER_EXPORT 数组

style-loader

• insertStyleElement() 创建style标签

loader 本质是一个处理依赖资源(作为参数传入)的函数，并返回处理结果(标准的JS代码字符串)

loader返回结果直接被拼接到构建结果，所以得是JS代码，不然会报错

Plugin

本质就是钩子机制，往不同节点上挂载不同的任务从而扩展webpack的能力

写一个插件类

• 定义apply方法
• compiler对象作为参数
• compilation对象获取依赖模块
• 对模块代码进行操作并返回

理论上loader能做的事使用plugin也能做

plugin能完成loader的功能吗

• loader是在加载过程中，拿到源文件内容，再进行一些处理，最后转化成js代码。
• plugin也能够在合适的时机拿到源文件内容，并通过一些操作，最后覆盖源文件。
• 所以理论上是可行的，但不符合webpack的设计哲学。

运行机制

通过 Loader 处理特殊类型资源的加载，例如加载样式、图片；

通过 Plugin 实现各种自动化的构建任务，例如自动压缩、自动发布。

打包过程

• 根据配置找到指定入口文件
• 根据import , require构建依赖关系树
• 遍历依赖交给指定loader加载模块
• 加载结果放入打包结果(bundle.js)
• 无法用JS表示的资源将对应的访问路径作为这个模块的导出成员暴露给外部

工作原理

关键环节

• Webpack CLI 启动打包流程
• 载入 Webpack 核心模块，创建 Compiler 对象
• 使用 Compiler 对象开始编译整个项目
• 从入口文件开始，解析模块依赖，形成依赖关系树
• 递归依赖树，将每个模块交给对应的 Loader 处理
• 合并 Loader 处理完的结果，将打包结果输出到 dist 目录

Webpack CLI

创建 Compiler 对象

开始构建

make 阶段

Ask myself

Let‘s talk about let

• 变量提升
• TDZ
• 块作用域

object & Object

TypeScript 引入object 表示 JavaScript 中的非原始数据类型。

类型转换

1+'1'
1+{} 
1+[] 
1+true 
1+function a(){}
[]===true
[]===false
[]=={}
[]==false

stackoverflow

Object.setPrototypeOf & Object.create

掘金

缓存

1、请问在你们的项目里面是如何控制静态资源缓存的 使用的是什么策略
2、什么情况命中304，如果命中了强缓存 返回什么状态码
3、如果我压根就不想要缓存 怎么设置

HTTP

1、204 301 302 304 400 401 403 404状态码含义
2、https加密过程是怎样的
3、http3 有哪些改变

CSS

1、请问flex:1代表了什么意思
2、单行文本溢出省略号和一个向下的三角形 css怎么写
3、flex布局 有哪些常用属性
4、css如何开启硬件加速
5、如何在浏览器画出一个正方形 如何保证这个正方形是浏览器可视区最大的

日期

November 3,2021

1、组合继承的缺点，寄生继承的缺点，组合继承的优点
2、比较一下function构造函数和class关键字的差别
3、怎么计算元素ele到浏览器视口顶部的距离
4、说说property和attribute的差别

November 4,2021

1. new做了什么
2. 通过原型实现的继承和类继承有什么区别
3. window.onload和domcontentloaded的区别

November 5,2021

1.什么是BFC,如何形成BFC
2.你知道的浅拷贝有哪些？
3.说说Object.assign和扩展运算符的区别
4.你知道的深拷贝有哪些？(让你实现，你会怎么设计)
5.Promise执行过程中可以中断吗？若想中断，怎么对其进行中断。

November 8,2021

1.event loop 执行过程。
2.property 和attribute的区别。
3.数组去重的方式。
4.set和map的区别。
5.介绍一下es6的symbol。

November 9,2021

1.常见的DOM操作有哪些
2.数组有哪些原生方法？
3.重绘和回流
4.协商缓存和强缓存的区别
5.浏览器的渲染过程

November 10,2021

1.伪元素和伪类的区别和作用？
2.this 的指向
3.https 加密过程
4.柯里化的定义和实现
5.什么是 JavaScript 生成器？如何使用生成器？

November 11,2021

1.你知道什么攻击类型？知道Xss和CSRF分别是什么吗？
2.实现一个函数 countFn，接收一个函数作为参数，返回一个新函数，具备调用计数功能
3.看到一些库的源码都会用 Object.create(null) 来创建空对象，相比于 直接 = {} ，这样做有什么好处吗