Shiyanping's Blog

Believe in yourself

浅拷贝和深拷贝

深入理解对象的拷贝方法

对象在引用的时候引用的是对象的地址,所以导致如果修改其中一个对象,就会对其他引用这个地址的对象进行修改,这种结果并不是我们想要的,这个时候我们就要用到深拷贝和浅拷贝去解决这个问题了。 1 2 3 4 5 6 var a = { name: 'test' }; var b = a; a.name = 'test1'; console.log(b); // {name: 'test1'} ...

微任务与宏任务

深入了解 JavaScript 的事件循环

由一道面试题引发的思考。 1 2 3 4 5 6 7 8 9 10 11 12 setTimeout(function() { console.log(4); }, 0); new Promise(function(reslove) { console.log(1); reslove(); }).then(function(data) { console.log(3); ...

性能优化——重绘重排

带你重新认识浏览器的渲染机制

性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排。 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时,是如何渲染的。 首先浏览器会进行文件解析,主要解析三个东西: 解析 html/xhtml/svg,形成 dom 树。 解析 css,产生 CSS Rule Tree。 解...

Linux 免密登录

摆脱密码的束缚

生成秘钥对 首先我们需要在自己的本机上生成秘钥对,在任何一个文件夹中都可以,但是最好在自己 home 目录下中的 .ssh 文件夹中进行,这样就可以省掉后续将生成秘钥对移动到这个文件夹的操作。 在 mac 上可以通过 cd ~/.ssh 进入该文件夹,window 的用户自行搜索吧。 进入文件夹之后,通过一下命令生成秘钥对: 1 ssh-keygen -t rsa -C "你自己的名...

性能优化——雅虎军规35条

性能优化基本原则

思维导图引用来自一位大佬。传送门 一、 页面内容 1.1 减少 HTTP 请求 前端页面中图片,js,css,请求都属于 HTTP 请求,现代浏览器虽然说对于同时多个 HTTP 请求有优化,但是请求数太多也会导致加载太慢,同域名下多个请求一起访问,会导致部分 HTTP 请求处于 pending 状态。我记得谷歌浏览器同一个域名下的请求最多好像是 6 个(还有待考证)。 所以减少 ...

前端需要了解的 Nginx

Nginx 简单使用指南

nginx 对于服务器来说有很多好处,比如: 反向代理,保护正常服务器安全 负载均衡,可以有效的分配服务器集群 可以做 gzip 压缩 可以添加缓存 我作为一个前端,正在努力学习向大前端进发,所以必须要掌握一些常规的 nginx 操作。 1. 安装 1.1 mac 上安装 mac 上直接使用 brew 安装即可,brew install nginx。安装之后可以...

服务器与客户端实时通信的三种方式

实时通信,让交互更简单

我们在做聊天室的时候,会需要用到实时通信,当服务端向客户端提前声明,发送的是流信息的时候,HTTP 协议可以允许服务器向客户端发送消息,因为一次性发送不完,需要连续不断的发送,客户端不会关闭连接,会一直等着服务器发送新的数据流。 服务端与客户端的实时通信,主要有以下三种解决方案: 轮询 前端可以在自己的页面进行轮询(定时)调用后端的接口,然后触发后端给前端返回消息,虽然可以解决前后端实...

JavaScript 内功心法——原型与原型链

前端必备内功之原型链

我们主要从三个方面说原型和原型链,主要是 prototype,__proto__,constructor。 受限我们创建一个构造函数,用于后续生成实例。 1 2 3 4 function Person() {} Person.prototype.name = 'Tom'; var person1 = new Person(); console.log(person1.name); // ...

JavaScript 内功心法——作用域链

前端必备内功之作用域链

1. 作用域 JS 中包含全局作用域,函数作用域,块级作用域,在 ES6 之前没有块级作用域,只有一个全局作用域和函数作用域。 函数内部可以访问外部的变量,但是函数外部不可以访问函数内部的变量,当没有使用 var 定义一个变量时,默认会定义成全局变量,全局都可以访问。 例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var m = 1000; functio...

JavaScript 内功心法——执行上下文

前端必备内功之执行上下文

下面的结论,主要都是因为一道面试题引发的思考,这道题的出处在这里一道js面试题引发的思考,有兴趣的可以详细看一下这个作者写的文章,我只是粗略总结。 要想深入了解执行上下文,首先要了解一下执行上下文的类型: 全局执行上下文: 这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事:1. 创建一个全局对象,在浏览器中这个全局对象就是 wind...

JavaScript 内功心法——变量提升及函数提升

前端必备内功之变量提升及函数提升

1. 变量提升 变量不管在任何地方声明,js 引擎在编译时都会发生变量提升。 例: 1 2 3 console.log(a); // undefined var a = 2; 在定义变量 a 之前打印 a,并不会报Uncaught ReferenceError: i is not defined的错,而是输出undefined,因为var a = 2会进行变量提升,会被引擎解析成...

JavaScript 内功心法——词法作用域及动态作用域

前端必备内功之词法作用域

JavaScript 采用词法作用域,词法作用域也可以理解成静态作用域。与静态作用域相对应的还有动态作用域。 静态作用域:函数的作用域在函数定义的时候就已经决定了。 动态作用域:函数的作用域只有在使用的时候才决定。 1. 静态作用域 举个例子: 1 2 3 4 5 6 7 8 9 10 11 12 var name = 'Tom'; function foo() { ...

JavaScript 内功心法——数据类型

前端必备内功之数据类型

一、数据类型概况 1.1 原始类型 原始类型:undefined,null,boolean,string,number,symbol 原始类型是没有函数可以调用的,比如 undefined.toString()。 但是很多人就会有疑问为什么 '1'.toString() 可以转换,其实这种情况 '1' 已经被强制转换了,调用的是 String 类型的 toString 方法,其实 ...

MongoDB 基础用法

与 Node 搭配超级棒的数据库

1. 简介 基于分布式文件存储的开源数据库系统。 数据结构主要依靠键值(key=>value)对的方式组成。 相比 MySQL 来说,安装和操作也比较简单。 2. 安装运行 不同的系统有不同的安装教程,菜鸟教程中写的比较全,根据自己的实际情况进行不同系统的安装。 Windows Linux Mac OS 3....

精读《你不知道的javascript》上卷

深入 JavaScript

一、作用域及闭包 1.1 作用域是什么 查询分为 LHS 和 RHS,如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询,如果是获取变量的值,就会使用 RHS 查询。 赋值操作符会导致 LHS 查询。=操作符和调用函数时传入的参数操作都会导致关联作用域的赋值操作。 1 2 console.log(a); // RHS引用 var a = 2; // LHS引用 用书中一个...