20200115 前端开发日报

前端性能优化之重排、重绘与合成;记录优化 Vue 应用的首次加载速度;Vue响应式原理解析(附超详细源码注释和原理解析);Promise(1):Promise/A+规范;前端面试基础篇,凛冬将至道友快来一起闭关修炼;vuex 知识点梳理;从0实现一个前端微服务(上);前端业务实践中的异步问题

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

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20200115 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200115.html)