My-Note-Blog
My-Note-Blog copied to clipboard
huangchucai
主要生活blog
## 浏览器渲染 我们知道从用户输入地址到用户看到内容，是有一个过程的，一道经典的面试题。 问：在浏览器输入网址到看到页面经历了哪些过程 1. 浏览器根据对应的域名发送DNS请求，获取到对应的IP 2. 获取对应的IP后，根据IP协议传输数据，发送给互联网 3. 在互联网中路由器根据目标的IP地址，通过复杂的算法找出‘**最佳线路**’来传输请求 4. 找到服务器的网卡通过TCP三次握手建立连接，在第三次握手的时候发送HTTP请求 5. 服务器对请求进行分析，然后返回对应的服务器资源 6. 浏览器拿到数据后，然后通过TCP四次挥手关闭连接，然后进行渲染 7. 对HTML进行渲染,解析出DOM树，对css解析出styls Rules，然后关联二者生成Render Tree 8. Layout根据Render Tree进行计算每个节点的信息 9. Painting根据计算好的信息绘制页面 ### 渲染解析 从上面的问题我们可以看出，渲染主要是分为三部分 1. 构建DOM树...
## nginx学习 #### 4 Nginx的中间键架构 ##### 4.1 http请求 ```javascript // 1. curl 就相当于window下面的浏览器，打开网页，但是由于Linux没有可视化界面，所以看不到 # curl www.baidu.com // 2. 查看具体的请求体和请求头, 响应体 # curl -v www.baidu.com // curl -v www.baidu.com > /dev/null...
## nginx学习 ### 环境配置 1. linux系统检查 ``` 1. ping www.baidu.com. //检查网络 2. yum list|grep gcc //列出gcc的部分 3. intables关闭 iptables -L 查看是否开启 iptables -S 关闭 4. getenforce 关闭 ``` 1. 安装依赖...
# Linus高级命令 ### 1. 查看端口占用情况 ```shell netstat ``` ### 2. 修改文件的权限 > **Linux 把文件或目录权限的控制分别以读取、写入、执行三种情况区分（权限设置）** `r` : 读取权限， 数字代号为“4” `w` : 写入权限， 数字代号为“2” `x` : 执行或切换权限，数字代表为“1” `-` : 不具任何权限，数字代表为“0” `S` :...
# 小程序生命周期总结 小程序的生命周期主要分为三大类 1. 应用的生命周期 2. 页面的生命周期 3. 自定义组建的生命周期 ## 应用的生命周期 #### 知识点 全局的app.js中，使用App()的构造函数来启动应用的生命周期，App接收一个对象，主要了解其中的三个参数 1. **onLaunch：** 监听小程序的初始化，小程序初始化完成的时，会触发onLaunch(**全局只会触发一次**) 2. **onShow:** 监听小程序的展示，当小程序展示或者从后台进入前台的显示的时候，会触发onShow（**可以多次触发**） 3. **onHide:** 监听小程序的隐藏，当小程序从前台进入后台的时候，会触发onHide > 前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。  ####...
### underscore.js 防抖设置 在实际的工作中，我们经常会遇到限制客户多次点击，多次滑动而重复提交代码的过程，为了能够有效的防止这种情况，我们今天来讨论应该如何处理节流的控制。 #### 前言 `setTimeout`和`clearTimeout`： ```javascript // clearTimeout 虽然取消了定时器，但是timer并没有取消，只是如果你没有引用，就会被垃圾回收。 let timer = setTimeout('console.log(11)') clearTimeout(timer) console.log(timer) // 20 一个数字 ``` #### 实例重现 我们现在用户从屏幕的一端滑动另外一端,刚开始count为 1，但是最后为165，就是说，如果这里面是一个复杂的ajax请求，用户在短短几秒的过程中，请求了接口165次，假如每次接口的返回的时间是300ms,想想，结果是什么，结果就是用户会被卡死，作为一个好的开发人员，我们是不是应该阻止这样的情况发生？ ```html .container { background-color: black;...
## 反向代理和正向代理 这个知识点属于服务器端的范围，但是作为前端的我们，还是需要了解一下，开拓一下自己的眼界。 1. 由于浏览器的同源策略，我们不能通过`ajax`跨域请求接口数据，但是接口又不支持cors 2. 需要一个天梯翻墙 3. 客户端通过代理来控制访问授权 ### 正向代理 ##### 正向代理原理为下面几个步骤 1. 客户端（用户A）向代理服务器Z发送一个请求**同时指定一个目标**（服务器B） 2. 代理服务器Z根据指定的目标，向**目标服务器**（服务器B）**转发**用户A的请求 3. **目标服务器**（服务器B）接受到代理服务器转发的请求后，将对应的资源返回给代理服务器Z 4. 代理服务器Z接收到**目标服务器**（服务器B）的资源后，返回给客户端（用户A）  ##### 正向代理的用途 1. 访问本无法访问的资源服务器B  典型的例子： 就是我们在国内的浏览器不能访问国外的资源，通过开启一个vpn就可以访问到国外的资源，以前都是通过正向代理，我在浏览器输入一个**有目标的地址**，**指定我要访问的内容**，然后通过代理服务器来转发返回资源。 2....
### 箭头函数的This指向 ------ ## 前言 楼主在昨天在看Vue文档的时候，主要到`methods`和`computed`里面不要使用箭头函数，去看了下源码解析，发现里面调用的是通过自定义的`bind`函数，通过`call()`来执行函数以及绑定作用域，想巩固一下箭头函数，于是这边有内涵的blog就上线了。 之前楼主有一篇[箭头函数的This](http://www.jianshu.com/p/5c42d1a31839), 对于它的理解感觉有偏差，这里全部再重复总结一遍。 **看完本篇文章，你可以彻底了解this和bind** ## 涉及知识点 1. bind函数的深入了解解析 2. 作用域 3. thisArg #### 实现一个bind函数 ```javascript var fn = function(a,b,c,d) { return a+b+c+d ; } fn.bind(scope,a,b)(c,d)...
# event loop > > > 浏览器内核是多线程,`Javascript`是单线程。 > > 楼主之前讲解了`js`的异步处理，只是讲解了异步处理的方法，但是对于异步处理的原理还是不是很了解，这篇文章是对于浏览器的线程方面对`JavaScript`的运行机制进行分析。 ### 1：浏览器基本 我们经常说，`js`的执行环境是一个单线程，会按顺序执行代码，但是`JavaScript`又是可以异步，这两者感觉有冲突，但是本质上，如果理解浏览器的事件循环机制（event loop），就会觉得并不冲突。 浏览器里面不仅只有解释`JavaScript`的引擎，还包括很多其它的引擎。  浏览器主要包括： 1. **用户界面**：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。 2. **浏览器引擎（浏览器内核）**： 在用户界面和呈现引擎之间传送指令。 3. **呈现引擎** - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS...
# 组件化内部详解 本文将要展示`Vue.extend`和`Vue.component`的区别和联系 ### Vue.extend(options) Vue.js官网介绍： 1. `Vue.extend`将会创建一个Vue构造函数的**子类**，参数是包含**组建选项**的对象。 2. 组建选项(`options`)中的`data`必须是一个函数。 > 为什么data必须是一个函数呢？ > > 因为Vue的每一个组件都需要有一个自己独立的作用域，如果不是一个函数，而是一个对象，将会暴露在全局的作用域下面，其他组件也可以改变里面的`data`数据，从而改变视图，这不是我们想要的，所以通过`data`是一个函数，形成一个独立的作用域，方便组件管理内部的数据和视图。 总结： 这里可以简单的理解为，Vue.extend就像一个组件暂存器，之后可以通过`new`，`Vue.component()`，实例化组件`components`，来渲染成对应的模板。 ### Vue.extend和Vue.component 1. 我们使用Vue.extend()实现一个子类构造函数，Vue构造函数可接受的大部分选项都能在`Vue.extend()`中使用，除了我们上面提到的`data` 和 `el`，因为每一个Vue的实例都应该有自己绑定了`dom`和数据`data`，所以我们必须在**实例化的时候**再去绑定元素`el`，让其具有唯一性。`data`必须是一个函数，让其拥有独立的作用域。 ```javascript let myChild = Vue.extend({ data() {...