- 博客(34)
- 收藏
- 关注
RSS订阅转载 Redux的核心原理
前言 相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和API redux 1.为什么要使用redux？ 随着互联网的高速发展，我们的应用变得越来越复杂，进行导致我们的组件之间的关系也变得日趋复杂，往往需要将状态父组件 -> 子组件 -> ...
2019-02-28 18:29:28
7240
转载 浏览器输入URL到 请求全过程以及相应的性能优化
前言 对http 的理解，一直都出于看完资料，没过几天又忘记了下面这篇文章只是自己对http的整个过程一个梳理，并且从http的请求过来，来简单的进行性能优化进行一个梳理。 其中主要设计如下几个环节： http请求全过程 DNS解析全过程(dns-prefetch, preconnect, preload, prefetch, def, async) TCP 连接(三次握手，四次挥手(为什...
2019-02-28 14:18:52
818
2
转载 rxjs 源码分析1-(fromEvent)
前言 Rxjs是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。我们现在针对Rxjs 6 来进行源码分析，分析其实现的基本原理， 我们可以根据中文文档来学习Rxjs 的基本使用，但是这个文档是Rxjs 5 的版本。其最基本的使用区别如下,Rxjs 6的操作符都放在pipe (管道)中配置，而Rxjs 5 的版本是直接调用 Rxjs 5 fromEvent...
2019-02-28 14:13:34
2645
1
转载 Egg.js 基本使用
前言 我们在上一篇文章Egg.js 源码分析-项目启动, 已经简单的分析了Eggjs 的启动机制, 以及其相应的实现原理，Eggjs 就是针对一系列的约定俗成的规则，在项目启动时，自动加载对应文件夹下面的文件，进行项目的初始化,我们可以参考官网给出的目录结构,去对我们的项目进行规范，包括文件结构规范, 代码逻辑分层规范，从而达到整个项目的规范。 之所以有这样的一个目录结构 ,其实...
2019-02-28 14:12:29
4307
转载 Egg.js 源码分析-项目启动
前言 前端时间抽出时间针对Koa2源码进行了简单的学习，koa 源码是一个很简单的库， 针对分析过程， 想手把手的实现一个类型koa 的框架，其代码, 根据一步步的完善实现一个简单版本的Koa, 每一个步骤一个Branch ， 如： stpe-1, 对应的是我想实现第一步的代码， 代码仅供自己简单的学习，很多地方不完善，只是想体验下Koa 的思想。下面几点是我对Koa 的简单理解: 所有的N...
2019-02-28 14:11:59
1925
转载 前端优化带来的思考，浅谈前端工程化
重复优化的思考 这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚： 传输层面：减少请求数，降低请求量 执行层面：减少重绘&回流 传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析...
2019-02-28 14:01:04
317
转载 前端性能优化的七大手段
前面的话 本文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 减少请求数量 【合并】 如果不进行文件合并，有如下3个隐患 1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟 2、受丢包问题影响更严重 3、经过代理服务器时可能会被断开 但是，文件合并本身也...
2019-02-28 13:43:53
256
转载 延迟加载(Lazyload)三种实现方式
定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。 举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。 那么延迟加载有什么好处：...
2019-02-28 11:51:36
768
转载 伪类与伪元素的区别
一、伪类介绍 CSS 伪类用于向某些选择器添加特殊的效果。 二、伪元素介绍 CSS 伪元素用于将特殊的效果添加到某些选择器。 三、区别 我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。 1）、伪类:first-child 添加样式到第一个子元素 div>p:first-child{color:red...
2019-02-26 19:28:55
498
转载 Flex弹性盒子
一、Flex介绍 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局: .box{ display: flex; } 复制代码 行内元素也可以使用 Flex 布局: .box{ display: inline-flex; } 复制代码 Webkit 内核的浏览器，必须加上-webkit前...
2019-02-26 19:07:20
455
转载 react相关
JavaScript 分析 Babel 编译代码，深入理解 ES6 的类与继承 跟着 Event loop 规范理解浏览器中的 JavaScript 异步机制 LazyMan 有几样写法，你知道么？ TypeScript [译] react-typescript-备忘录 React 浅析 React v16.3 新生命周期函数 为 react-router 写一个可以缓存的 Route...
2019-02-26 18:46:16
260
转载 前端路由实现及 react-router v4 源码分析
## 前言 react-router 目前作为 react 最流行的路由管理库，已经成为了某种意义上的官方路由库（不过下一代的路由库 reach-router 已经蓄势待发了），并且更新到了 v4 版本，完成了一切皆组件的升级。本文将对 react-router v4（以下简称 rr4） 的源码进行分析，来理解 rr4 是如何帮助我们管理路由状态的。 ## 路由 在分析源码之前，先来对路由有一个...
2019-02-26 16:46:24
657
转载 webpack常用优化配置
1.1 优化loader配置 1.1.1 include & exclude module:{ rules:[ { test:/\.js$/, use:['babel-loader?cacheDirectory'], + include:p...
2019-02-26 16:43:58
1581
转载 javascript算法
素数 方法1 方法2 素数因子 Fibonacci（斐波那契） 方法1 方法2 最大公约数 算法范式 去重 合并两个排序的数组 不通过临时变量交换两个数的值 字符串反向 方法1 方法2 方法3 方法4 方法5 方法6 单词反转 原位反转 第一个非重复字符 删除重复的字符 回文检查 找缺失的数字 两数之和 最大和 统...
2019-02-25 17:17:24
583
转载 前端面试查漏补缺--Index篇(12万字符合集)
前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万多字符,最后决定还是分享出来给大家. 全: 在准备的时候,我查看了很多很多相关资料,力求做到知识点的全面覆盖.往往你从其他面试者中,脱颖而出,就是因为你知道了其他人甚至面试官所不知道,忽略的知识点.令人印象深刻!但如果内容实在太繁多的话,我也会提供我觉得全网目前最好的文章链接. 准: 发布的所有文章的所有内容,都是自...
2019-02-25 09:53:17
285
转载 可能比文档还详细--VueRouter完全指北
前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网上没理解的,基本在这里都能找到解答!本来想分成两篇发的,但想想男人长点也没什么不好的.所以也希望各位收藏插眼标记(滑稽) 特点:本文主要是参考了官方文档.除了不常用的过渡动效和数据获取,都进行了分析说明.说明:...
2019-02-23 19:10:26
1063
转载 重构之路：webpack打包体积优化
开始 这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 这边我大概写了一下页面具体布局，是下面这样的： [图片上传中...(image-aa9cd7-1550917482106-27)] <figcaption></figcaption&g...
2019-02-23 18:25:29
647
转载 前端开发者应该明白的浏览器工作原理
原文地址：banggan.github.io/2019/02/20/… 前言 作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟做了什么？相信很多人脑海里都会出现个大概的轮廓，可是一到细化具体的过程就答不上来。那么，作为前端开发者，应该从哪些方面延伸来回答这个问题呢？ 浏览器工作流程 对于浏览...
2019-02-23 18:21:35
814
转载 JavaScript专题
JavaScript之原型和原型链 https://mp.weixin.qq.com/s/nwpRpnXFPsPf3M-vzc9RCQ JavaScript之变量及作用域 https://mp.weixin.qq.com/s/gNc4tcijq0gsNPBAqTYgTg JavaScript之声明提升 https://mp.weixin.qq.com/s/n0FOpa_oU8E-O0XSK4O...
2019-02-23 10:18:12
383
转载 浏览器原理系列10篇正式完结
全目录 前置知识-进程和线程 浏览器架构-原理篇 浏览器架构-实践篇 问题-概况篇 浏览器内核-流程概况 解析-理论剖析 解析-解析器 解析-HTML解析器 渲染树-理论剖析 渲染树-布局和绘制 参考文献 结语 整个浏览器原理系列文章正式完结了。因非科班出身，所以增加了对应的前置知识。整体的文章的思路还是不断的去问自己为什么，从而激发自己更有兴趣继续去思考下 这系列文章，...
2019-02-22 14:14:43
1120
转载 前端工程化：围绕Jenkins打造工作流的过程
背景 1年前入职时，公司前端部门的静态代码部署都是用ftp工具拖拽部署，没有记录，没有关联，经常造成许多困扰的问题， 比如：今天有没有其他人在我要部署的路径上工作？我的代码为啥被盖掉了？被谁盖掉的？啥时候盖掉的？ 本地build，ftp拖拽部署这种方式，导致git版本与手动的构建、部署没啥关联，更有在本地写完代码部署上去后，压根没传git这种失误可能发生。 靠人去遵守规范来控制工作流，总会...
2019-02-21 20:17:02
2405
转载 React16.6 组件生命周期详解
本文详细介绍了 React 生命周期的用法以及各个阶段的生命周期进行，并且用实例代码做了详细演示。代码位置 话不多说，先上图 上图是基于 React 16.4 之后的生命周期图解。如感觉不对，请先查看 React 版本 React 生命周期详解 各个阶段的生命周期函数 constructor 构造函数 在 React 组件挂载之前被调用，实现 React.Co...
2019-02-21 17:34:00
1096
转载 JavaScript函数式编程
JavaScript函数式编程，真香之认识函数式编程(一) 该系列文章不是针对前端新手，需要有一定的编程经验，而且了解 JavaScript 里面作用域，闭包等概念 组合函数 组合是一种为软件的行为，进行清晰建模的一种简单、优雅而富于表现力的方式。通过组合小的、确定性的函数，来创建更大的软件组件和功能的过程，会生成更容易组织、理解、调试、扩展、测试和维护的软件。 对于组合，我觉得是函数...
2019-02-21 11:15:41
502
1
转载 this的原理以及用法
这是前端面试题系列的第 4 篇，你可能错过了前面的篇章，可以在这里找到： 伪类与伪元素的区别及实战 如何实现一个圣杯布局？ 今日头条 面试题和思路解析 在前端的面试中，经常会问到有关 this 的指向问题。最近，朋友Z 向我求助说，他一看到 this 的题目就犯难，搞不清楚 this 究竟指向了谁。我为他做了解答，并整理成了这篇文章，希望能帮到有需要的同学。 一道面试题 朋友Z 给我看了...
2019-02-21 11:02:10
494
转载 理解函数的柯里化
这是前端面试题系列的第 6 篇，你可能错过了前面的篇章，可以在这里找到： ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局？ 今日头条 面试题和思路解析 最近，朋友T 在准备面试，他为一道编程题所困，向我求助。原题如下： // 写一个 sum 方法，当使用下面的语法调用时，能正常工作 console.log(sum(2, 3)); /...
2019-02-21 10:03:51
158
转载 vuex源码解析
vuex简介 能看到此文章的人，应该大部分都已经使用过vuex了，想更深一步了解vuex的内部实现原理。所以简介就少介绍一点。官网介绍说Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。数据流的状态非常清晰，按照 组件dispatch Action -> action内部commit ...
2019-02-20 19:43:18
1171
转载 redux源码解析
1.前言 关于redux的基本概念和工作流如何进行的这里就不进行过多概述了，可以查看相关文档去了解。流程图链接 2.redux源码结构 以下是redux的源码结构图，主要的就是以下几个文件组成，我们接下来按顺序进行介绍其中原理和实现过程。 3.createStore.js 首先了解下createStore.js。通过调用createStore创建唯一的store，store中暴露出get...
2019-02-20 19:28:41
240
转载 React-router路由基本原理
1. 路由基本功能 2.react-router的状态机特性 3.用户点击了Link组件后路由系统中到底发生了哪些变化 4.前端路由如何处理浏览器的前进和后退功能 location.hash 与 hashchange history.pushState 与 popstate 1. 路由基本功能 保证视图和URL的同步,而视图可以看成是资源的一种表现。当用户在页面中进行操作时，应用会在若干个交互状态...
2019-02-15 18:45:25
1544
转载 前端基础面试整理
一、变量类型和计算 JS中使用typeof能得到哪些类型 变量类型 值类型：变量本身就是含有赋予给它的数值的，它的变量本身及保存的数据都存储在栈的内存块当中 引用类型：引用类型当然是分配到堆上的对象或者数据变量，根据官方一点的解释就是引用类型的变量只包括对其所表示的数据引用 对象、数组、函数 无限扩展属性，可能出现内存占用比较大的情况 ...
2019-02-14 09:48:06
458
转载 常见(XSS|CSRF)六大Web安全攻防解析
作者:浪里行舟 前言 在互联网时代，数据安全与个人隐私受到了前所未有的挑战，各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据？本文主要侧重于分析几种常见的攻击的类型以及防御的方法。 一、XSS XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTM...
2019-02-14 09:46:59
2324
转载 React中使用CSS的7中方式(应该是最全的)
第一种: 在组件中直接使用style 不需要组件从外部引入css文件，直接在组件中书写。 import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "20...
2019-02-14 09:45:07
458
转载 面试题之如何实现一个深拷贝
引言 上篇文章详细介绍了浅拷贝 Object.assign，并对其进行了模拟实现，在实现的过程中，介绍了很多基础知识。今天这篇文章我们来看看一道必会面试题，即如何实现一个深拷贝。本文会详细介绍对象、数组、循环引用、引用丢失、Symbol 和递归爆栈等情况下的深拷贝实践，欢迎阅读。 第一步：简单实现 其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行...
2019-02-14 09:43:56
535
转载 Lodash是如何实现深拷贝的
引言 在上一篇文章中介绍了如何实现一个深拷贝，分别说明了对象、数组、循环引用、引用丢失、Symbol 和递归爆栈等情况下的深拷贝实践，今天我们来看看 Lodash 如何实现上述之外的函数、正则、Date、Buffer、Map、Set、原型链等情况下的深拷贝实践。本篇文章源码基于 Lodash 4.17.11 版本。 更多内容请查看 GitHub 整体流程 入口 入口文件是 cloneDe...
2019-02-14 09:43:04
10601
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人