前端性能优化之重排、重绘与合成；记录优化 Vue 应用的首次加载速度；Vue响应式原理解析（附超详细源码注释和原理解析）；Promise(1)：Promise/A+规范；前端面试基础篇，凛冬将至道友快来一起闭关修炼；vuex 知识点梳理；从0实现一个前端微服务（上）；前端业务实践中的异步问题
-
前端性能优化之重排、重绘与合成 在项目的交互评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。这是因为这些效果通常会产生一系列的浏览器重绘和重排，需要付出非常昂贵的性能代价。 本文期待可以部分解释以下两个问题。 什么是浏览器的重绘和重排呢？ 二者发生时都引发哪些渲染流程？ reflow 重绘(也称回流)，…
-
记录优化 Vue 应用的首次加载速度 Halo 的管理端使用的是 Vue 来构建的，随之收到不少反馈后台加载过于缓慢，其主要原因就是打包好的 Vue 应用的静态资源又多又大，可能同时就几十个请求，这对于一些小水管的服务器来说简直是致命的打击。 解决办法 使用公共 cdn，我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传…
-
Vue响应式原理解析（附超详细源码注释和原理解析） 上一篇我们深入分析了数据驱动视图渲染( juejin.im/post/5e06b4… )的原理以及源码解析，感兴趣的可以去瞅一眼，那么这一次我们接着套路，讲一下数据是如何驱动视图更新的，也就是Vue的响应式原理，let go! 案例 <div id="app" @click="changeName"> {{ name }} </div> var app =…
-
Promise(1)：Promise/A+规范 与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包括 undefined, thenable, promise等). …
-
前端面试基础篇，凛冬将至道友快来一起闭关修炼 借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！ 本文为前端面试基础篇，将以 面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！ …
-
vuex 知识点梳理 vuex的应用场景，大家可能或多或少知道，用来管理一些全局数据，或者多个页面都会使用到的数据，比如，我们项目中常见的用户信息，通常使用vuex来管理。 这里，我们思考一个问题，如何没有vuex，还有哪些方式可以实现一些公共数据的管理？ 把公共数据存储到根实例中，其他页面都可以通过 this.$root 来获取根实…
-
从0实现一个前端微服务（上） 什么是前端微服务，网上大把的介绍，我就不啰嗦了，简单来说，就是把各个子项目整合到一起。 《前端架构：从入门到微前端》 这本书中介绍，微前端架构一般可以由以下几种方式进行： 使用 HTTP 服务器的路由来重定向多个应用（也就是链接跳转） 在不同的框架之上设计通讯、加载机制，诸如 Mooa 和 Single-SPA …
-
前端业务实践中的异步问题 异步任务相比同步任务的复杂之处，主要在于返回结果的时机不可控，由此带来超时控制、顺序控制、竞态、最大并发等一系列问题。 单个的异步和简单的并发一般在语言层面就获得了支持，就前端而言，Promise 和 Async 是如此普及，以至于有些新人可能连 callback 都不认识了，建议看看《深入浅出nodejs》中关于异步的章节，…
-
前端利用canvas给图片添加水印前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图…
-
你可能不是那么了解的 CSS BackgroundBackground，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：
-
看完这几道 JavaScript 面试题，让你与考官对答如流（中）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
堡垒机 WebSSH 进阶之实时监控和强制下线 这个功能我可以不用，但你不能没有 前几篇文章实现了对物理机、虚拟机以及Kubernetes中Pod的WebSSH操作，可以方便的在web端对系统进行管理，同时也支持对所有操作进行全程录像，以方便后续的查看与审计 这一篇文章接着实现一个看起来很炫酷，但实际上你可能不会经常使用，又必须要存在的功能：实…
-
Webpack 知识补充之模块 这块标准是在 2009 年提出来的，包含模块、IO、文件等。经过 Node.js 采用并做调整，所以说起 CommonJS 通常是 Node.js 中的版本了。在使用 Node.js 包管理器的年代，CommonJs 成为一颗有流量的明星了。 自身作用域 CommonJs 的模块天然有自身的作用域，所有变量和函数声明只能自己访问，外人想都别想，这个保护机制…
-
Clean code JavaScript（2） 本文摘自 GitHub 上一个优秀的 仓库 ，这个仓库主要列出了一些代码的优化技巧，阅读后有一定启发，因此将一些对自己日后编码会有受益的技巧记录下来。 明确函数的功能 函数的功能应当遵循单一原则，即一个函数只做一件事情、只有一种功能。例如以下代码： function sendEmail() { employees.forEach(employee…
-
Netty实战(一) —— 编写WebSocket服务器 Netty在Java程序之间通信很方便，直接用Netty的客户端和服务器端就可以了。但是如果客户端是浏览器怎么办(Java程序一般不会开发Web应用)，这时候的客户端是个JavaScript程序，进行相互通信就要用到WebScoket协议啦。 WebSocket协议 概念 熟悉Java网络编程的应该都会了解Socket编程，它是用于Java程序之间通信的技术（…
-
Webpack之Javascript的编译 如果单纯的babel-loader发现并没有将es6转为es5，这个时候还需要babel-preset； Presets是存储Javascript不同标准的插件，通过使用正确的Presets,告诉babel按照哪个规范编译； 常见规范 es2015 es2016 es2017 env（通常采用） babel-preset-stage babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将…
-
编写你的第一个 Babel Plugin 现在我们用 React 和 Vue 开发项目时， package.json 文件都会有 babel 的依赖，还会依赖于一些插件。什么是 babel ，怎么样写一个 babel 插件呢，看完你就明白了。如果还有不懂或者文章有疑问的地方，欢迎留言~ 背景知识 – 使用 babel 的原因和概念 使用 babel 原因 – 将 js 最新版本转成 es5 代码，兼容浏览器 …
-
你应该知道的前端面试题（万字总结） 自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。 Html 1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？ DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导…
-
JavaScript 对象赋值和浅拷贝的区别 一直以为对象赋值和对象浅拷贝是一样的，但实际上它们还是有很大差异。 先看赋值，将一个对象赋值给一个新的对象的时候，赋的其实是该对象在栈中的地址，而不是堆中的数据。 也就是一个对象的改变就会改变另外一个对象。 再看浅拷贝，浅拷贝会创建一个对象，再去遍历原始对象，如果原对象的属性值是基础类型，那么就…
-
宝塔面板安装NodeJS Api 程序并配置https教程先参考作者大西瓜的 : https://www.bilibili.com/video/av67066415?t=91 大致了解流程 ;再参考作者竹映平昔的 : https://www.bwmelon.com/archives/27/ 跟着一起做 ;
-
你不知道的JS 预编译 预编译发生在代码执行的前一刻,预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数 ； 解析执行 解释执行顾名思义便是执行代码了 预编译前奏 暗示全局变量 imply global 任何变量,如果变量未经申明就赋值,此变量就为 全局对象 所有。 a = 1; console.log(window.a); 复制代码 function te…
-
Golang 源码包分析（一）：net/http 包 快速搭建 Web 服务器 Golang仅需要几行代码，便可以建立一个简单的 Web 服务： package main import ( “fmt” “log” “net/http” ) func main() { helloHandler := func(w http.ResponseWriter, req *http.Request) { fmt.Fprintf(w, “Hello, world!n”) } …
-
Vue多页面优化踩坑记录 最近优化之前的项目，从单页面拆分成了多页面，这里记录下整个踩坑过程。 拆分成多个页面 1.将原项目的单页面替换为多页面 这里我添加了 index.html 和 user.html 两个页面。 2.配置vue.config.js // vue.config.js const titles = require(‘./title.js’) const glob = require(‘glob’) cons…
-
webpack 4 源码主流程分析（一）：前言及总流程概览 根据 webpack 构建流程及相关，本系列文章一共分为以下章节： 配置初始化 编译前的准备 reslove 前的准备 reslove 流程 构建 module（上） 构建 module（下） 生成 chunk 优化 chunk 资源的构建 文件的生成 打包后文件解析 watch webpack 优化 流程图 webpack 构建…
-
React开发日记-React Hook/Mobx 数据状态管理对比 前提 在之前项目中，我们一般是用mobx做数据状态管理，本文尝试使用新的方式–react hook，实现状态管理，比较新旧方式的异同。 本文后面的所有内容的上下文都是在react项目中 欢迎指正，欢迎提出需要补充的地方。 复制代码 Mobx 先对mobx进行简单介绍，如下图可见， 从左往右顺序查看 1有且仅有action可以用于修…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
