clbdgs的博客

原创 浅谈网络请求

作为一个前端开发工程师，性能优化是绕不过去的难题，大的性能问题大体归类为首屏加载缓慢、白屏、卡顿、网络延迟等，小的问题有HTML布局抖动，css优化、图片资源加载优化等。解决网络延迟，资源加载等涉及网络的一类问题就需要对网络协议有一定的了解。例如当浏览器输入网页地址，开始搜索网页后，浏览器会作如何处理呢？大概的过程如下：DNS 域名解析，找到网页的存放服务器（IP地址）； 浏览器与服务器建立 TCP 连接。 浏览器发起 HTTP 请求。 服务器响应 HTTP 请求，返回该页面的 HTML。

原创 浅谈浏览器页面渲染过程

作为前端开发，和浏览器打交道是必不可少的事情，因此我们需要对浏览器的相关原理有一个较为全面的了解，更要对浏览器的渲染过程深入的掌握，目的是将我们编写的代码渲染到页面时更流畅，提高用户的交互体验。为了解上述过程，首先需要了解浏览器作为单独系统的组成部分。浏览器主要结构：1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。3. 渲染引擎 － 用来显示请求的内容，例如，如

原创 阿里云应用部署

一、 安装环境1.1 Nvm - node版本管理器Curl-o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash1.2 web服务 - nginxRpm -ivhhttp://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm1.3数据库 - My...

原创 浅谈webpack转换器Loader

Webpack 不仅是 可以将JavaScript 模块打包，而且还可以将项目的各种资源（包括 CSS 文件、图片等）作为模块打包。也就是说，可以通过 Webpack 去管理前端项目中任意类型的资源文件。Webpack 实现不同种类资源模块加载的核心就是 Loader。通过loader，我们编写JavaScript 业务代码时引入需要的资源文件，这些引入的资源文件就与业务代码耦合建立一种模块的依赖关系。这么做有2个好处：后期只需要维护 一个JS 代码文件。 逻辑上确保依赖正确，配合打包构建工具模块

原创 浅谈webpack插件Plugins

Webpack的另外一个核心特性是插件机制。Loader 是负责任意类型的资源模块的加载，从而实现整体项目的模块化，而 Plugin 则是用来解决项目中除了资源模块打包以外的其他自动化工作，所以插件机制增强了Webpack 在项目自动化构建方面的能力， 因此Plugin 的能力范围更广，用途更多。相信我们对诸如HtmlWebpackPlugin、CopyWebpackPlugin、CleanWebpackPlugin等插件的使用并不陌生，但我们比较少的去关注底层逻辑。 Webpack 工作的每一个.

原创 浅谈webpack运行机制与工作原理

通过Webpack 官网banner图很直观的读懂它的功能。就是将应用的各种互相依赖的资源文件分类归纳聚集打包输出。整个打包过程主要做了2件事：通过loader处理各种特殊的资源文件，例如样式，图片，vue文件。 通过plugin自动化处理各种复杂的任务，例如代码压缩，自动发布。当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理，从入口开始，webpack 会递归的构建一个依赖关系图，这个依赖图包含着应用程序中所需的每个模块，然后将所有模块打包为少...

原创 浅谈vue响应式原理

VUE使用Object.defineProperty特性劫持传递进来的data对象，把所有property 的getter/setter重写。在getter阶段将依赖者（Watcher）收集起来,在数据变化的setter阶段通知所有Watcher，以此来实现当数据更新组件将自动渲染的“响应式”原理。在学习Vue响应式原理时，依赖追踪（依赖收集）不算太好理解，会面对“究竟谁依赖谁？谁是依赖者？谁是被依赖者？依赖者在什么地方收集，如何收集？”等一连串问题。## 谁是依赖者？谁是被依赖者？根据官方原理

原创 前端历史发展

原创 先记webpack5对比webpack4打包运行代码

/******/ (() => { // webpackBootstrap/******/ "use strict";/******/ var __webpack_modules__ = ([/* 0 */,/* 1 *//***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {__webpack_require__.r(__webpack_exports__);/* har.

原创 笔记：终极异步操作解决方案-async 函数

asyncasync是 ES7 才有的与异步操作有关的关键字。用法如果有多个异步操作，并每个异步操作需要获得上一个异步操作的执行结果才继续执行，async函数则可以清晰明了的表达他们的关系且用法简单，使用await操作符即可。await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。代码由于目前一些浏览器不支持async函数，所以...

原创 笔记：Promise对象的ES5、ES6的简单原生实现

定义Promise 是异步编程的一种解决方案，可以通过链式的方式获取异步操作的结果，解决了古老的回调函数嵌套问题。Promise 状态Promise 异步操作三种状态：1.pending（进行中）2.fulfilled（已成功）3.rejected（已失败）状态变化：1.pending -> fulfilled2.pending -> rejected 的状态改变。...

原创 笔记：前端常用打包工具-webpack原理

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...