js、css对web页面解析、渲染的影响；前端面试·Vue.js；Web应用调试利器：queryObjects；从剖析Vue-cli源码出发完整的React业务脚手架实践（一）——脚手架架构基础搭建；整理了一些常用的JS开发小技巧；JavaScript 的内存世界与原型链；[深入19] 手写Promise；web API(1) JS组成
-
这张图描述了页面解析渲染的整体流程，但是凭这张图还看不出js、css具体如何阻塞页面解析和渲染的。 需要注意的是，这个流程是会执行很多次的，不是等到HTML全部解析完，css全部解析完再去合成渲染树、布局、绘制，一次执行完。根据这张整体流程图，有一种错误的认识是，css没有加载解析完，DOM树无法结合样式生成渲染…
-
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化， 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。 如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到D…
-
queryObjects 是Chrome 62新增的一个 Command Line API 。 官网这样介绍该API A new API for querying heap objects Call queryObjects(Constructor) from the Console to return an array of objects that were created with the specified constructor. For example: queryObjects(Promise). …
-
从剖析Vue-cli源码出发完整的React业务脚手架实践（一）——脚手架架构基础搭建
随着公司业务线增加了以后，基础脚手架已经满足不了需求，于是开始着手业务线的脚手架开发，我基于vue cli源码和自己的业务实践，吸取vue-cli插件模式的开发优势和业务结合，做一套关于React的项目脚手架。 写在前面 这是一篇长期持续更新的React脚手架实践，为的是吸取Vue Cli的脚手架经验，通过我们习惯的 插件-…
-
下面整理了一些js开发常用的小技巧，没有顺序之分，可以跳着看，会持续补充~~~ 一，数值型 求数字数组最小值 let list = let min = Math.min(…list) // 1 复制代码 二，字符型 字符串倒序 字符串倒序就是把字符串倒着排序，可以用下列方法 .split(”).reverse().join(”) let str = ‘abc’ le…
-
内存世界 上图我们可以简单的看作电脑内存，我们的JS代码就存放在代码区，变量存放在不知道什么区，而数据则专门存放在Stack（栈区），Heap（堆区）中。 stack与heap的区别 stack存放对象（string number booleans），顺序存放 heap存放非对象，随机存放 对象的篡改 var person = …
-
Hooks Nginx Docker 部署vue项目 gitlab-CI AST抽象语法树 Tapable 手写webpack – compiler简单编译流程 前置知识 一些单词 race：比赛，竞赛 Settled…
-
ECMAScript(JavaScript语法) DOM（页面文档对象模型） BOM（浏览器对象模型） Web APIs阶段 JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果 API(Application Programing Interface应用程序编程接口)：是一些预先定义的函数，目的是提供应用程序与开…
-
要理解原型链，绕不开constructor、prototype、__proto__这几个核心的知识点,它们的关系如下： 上面的图是一个最简单的原型链，先有一个直观的认识。下面将围绕上面3个点一步步对原型链抽丝剥茧，最后在来总结究竟什么是原型链，自然就清晰了。 2. 课前预习 再正式进入主题之前，先了解几个知识点 2.1…
-
Angular(通常是指 " Angular 2+ " 或 " Angular v2 及更高版本 ")是一个基于 TypeScript 的开源 Web 应用框架 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS的同一个开发团队完全重写的。 Angular 8 于2019年5月28日发布。特性包括：为所有应用代码进行差异化加载、针对惰…
-
挑战全网最幽默的Vuex系列教程：第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」 ，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双…
-
VueX的模块你知道多少？ 为什么会出现VueX的模块呢？当你的项目中代码变多的时候，很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。 那么我们就开始吧！ 一、模块是啥？ /* eslint-disable no-unused-vars */import Vue from ‘vue’import Vuex from ‘vuex’Vue.use(Vuex)export default new Vuex.St…
-
利用Github webhook 自动部署VUE项目之乞丐版
用VUE写了个小项目，每次更新了都要在本地 build 好了后打包再上传到服务器上，再解压。 这就很麻烦，一开始想要的用 jenkins 来自动集成，但是操作起来很麻烦，且没必要。但是我注意到了 github 提供了一个 webhook 钩子，当 push 了代码后，github 会向指定的 Url 发起一个 POST 请求。 那么，我就想到了可以用 fl…
-
在进入作用域的讨论之前先明什么是作用域，通过一句话简单描述就是： 一组明确定义的规则，它定义如何在某些位置存储变量，以及如何在稍后找到这些变量 词法作用域 作用域的工作方式有两种占统治地位的模型。其中的第一种是最最常见，在绝大多数的编程语言中被使用的。它称为 词法作用域 ，我们将深入检视它。另…
-
首先我们来了解一下 MVC 、 MVP 、 MVMM 这三大架构模式在前端角度上的理解。 MVC分别是 Model（模型）、View（视图）、Controller（控制器）三个模块。View（视图层）最主要完成前端的数据展示，Controller（控制层）是对数据的接收和触发事件的接收和传递，Model（模型层）则是对数据的储存和处理，再传递给视图层…
-
首先这是一个精简版，所以有很多缺陷。但这篇文章仅仅是用来理清 为什么 ，而不是去实现一个完备的reactive 模块。 如果对reactive 比较熟悉，这篇文章大可不必浪费时间。 假设设计一个 晚餐价格计算的功能。 total 总价 = dinnerPrice 晚餐费用 + tip 小费 待改造代码 render函数 function paint(){ document.ge…
更多内容请关注公众号【前端开发博客】每日更新
