wdapp-CSDN博客

原创【高性能JS】重绘、重排与浏览器优化方法

基础知识浏览器下载完页面中的所有组件--HTML标记、JS、CSS、图片--之后会解析并生成两个内部数据结构：DOM 树：表示页面结构渲染树：表示DOM节点如何显示网页生成的过程HTML被HTML解析器解析成DOM 树 css被css解析器解析成CSSOM（CSS Object Model） attachment DOM 树和CSSOM，生成渲染树(Render Tree)...

2020-03-12 18:10:22 374

原创 vue模板编译（原理篇）

概念平时使用模板时，可以在模板中使用变量、表达式或者指令等，这些语法在html中是不存在的，那vue中为什么可以实现？这就归功于模板编译功能。模板编译的作用是生成渲染函数，通过执行渲染函数生成最新的vnode，最后根据vnode进行渲染。那么，如何将模板编译成渲染函数？将模板编译成渲染函数此过程可以分成两个步骤：先将模板解析成AST（abstract syntax tree,抽象...

2020-03-11 20:18:34 713

原创 javascript如何判断Object是空对象

判断一个对象是否为空对象，本文给出三种判断方法：1.最常见的思路，for...in... 遍历属性，为真则为“非空数组”；否则为“空数组”for (var i in obj) { // 如果不为空，则会执行到这一步，返回true return true}return false // 如果为空,返回false2.通过 JSON 自带的 stringify() 方法来判断...

2020-03-10 18:43:53 428

原创简述Socket连接的过程

服务器端：创建socket，绑定端口开始监听（listen）等待并接受客户端连接请求，返回新的socket（accept）由新socket与客户端进行io交互。关闭连接（可能主动，也可能被动）客户端：创建socket（绑定本机随机端口，这个系统自行完成）连接服务器（connect）与服务器进行io交互关闭连接（可能主动，也可能被动）以上是基于tcp协议的过程，...

2020-03-09 18:57:40 841

原创 TCP、UDP、HTTP及Socket的简单讲解

1、TCP/IP是个协议组，可分为三个层次：网络层、传输层和应用层。在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。在传输层中有TCP协议与UDP协议。在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。因此，HTTP本身就是一个协议，是从Web服务器传输超文本到本地浏览器的传送协议。2、HTTP协议是建立在请求/响应模型上的。首先由客...

2020-03-08 17:53:14 250

原创 OSI 七层模型与 TCP IP 五层模型

OSI分层（7层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 TCP/IP分层（4层）：网络接口层、网际层、运输层、应用层。五层协议（5层）：物理层、数据链路层、网络层、运输层、应用层。1）物理层：利用传输介质为数据链路层提供物理连接，实现比特流的透明传输2）数据链路层：通过各种控制协议，将有差错的物理信道变为无差错的、能可靠传输数据帧的数据链路3...

2020-03-06 18:07:10 326

原创 Git，交互式变基，合并多个commit

在使用 Git 作为版本控制的时候，我们可能会由于各种各样的原因提交了许多临时的 commit，而这些 commit 拼接起来才是完整的任务。那么我们为了避免太多的 commit 而造成版本控制的混乱，通常我们推荐将这些 commit 合并成一个。1,查看提交历史，git log首先你要知道自己想合并的是哪几个提交，可以使用git log命令来查看提交历史，假如最近4条历史如下：co...

2020-03-05 19:30:14 512

原创 flex兼容ios（iphone6）

开发过程使用flex简直不要太6，但是如果只是写新版本的语法形式，是肯定存在兼容性问题的（安卓机基本没啥问题，主要是ios）一、问题flex布局分为旧版本dispaly: box；过渡版本dispaly: flex box；以及现在的标准版本display: flex；Android2.3 开始就支持旧版本display:-webkit-box;4.4 开始支持标准版本disp...

2020-03-04 21:42:55 564

原创 sourceTree“重置提交”和“提交回滚”的区别

相信用过sourceTree的伙伴们都认识这两,但是不一定用过这两个功能,甚至是不能很好的把握它两的区别,根据自己最近亲身测试,总算是能小小的总结一下了首先这儿假如,历史版本已经出现了1、2、3、4、5、6、7、8、9，当前的版本是9，讲述执行上面两种操作，分别会有什么效果1.提交回滚假如我选中6，执行“提交回滚”之后，你会发现7，8，9的历史操作还在，只是将6的操作还原了，这时候...

2020-03-03 21:17:34 5588 2

原创 git merge一个指定文件

git里面的merge是全merge ，没有单个文件merge。要实现一个文件的merge ，可以使用git checkout 这个命令git checkout xxxx（分支名） xxxx（文件名）这个命令是覆盖的意思，是说把另一个分支的文件覆盖到当前的分支上，所有，最好不要在master上面操作，可以建立一个临时的分支，然后，commit。在merge到master分支上...

2020-03-02 20:27:56 6408

转载详说 Cookie, LocalStorage 与 SessionStorage

基本概念CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTM...

2020-03-01 19:27:26 127

原创 TCP和UDP的区别

TCP协议与UDP协议的区别首先咱们弄清楚，TCP协议和UCP协议与TCP/IP协议的联系，很多人犯糊涂了，一直都是说TCP协议与UDP协议的区别，我觉得这是没有从本质上弄清楚网络通信！ TCP/IP协议是一个协议簇。里面包括很多协议的，UDP只是其中的一个，之所以命名为TCP/IP协议，因为TCP、IP协议是两个很重要的协议，就用他两命名了。TCP/IP协议集包括应用层,传输层，网络...

2020-02-29 20:03:18 127

原创 webpack，异步加载，代码分割，require.ensure

webpack异步加载的原理webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。场景分析:比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百...

2020-02-28 22:26:49 417

原创 https中的对称加密和非对称加密

大家都知道：HTTPS = HTTP + SSL/TSL 也就是，https是在http基础上加了一层加密。这也由此衍生出一个问题 —— https的加密用的是对称加密还是非对称加密，是否全程都是用的一种加密方式？这个问题引起了我的兴趣，去查阅了下资料，了解了一下，这里做个简单的总结备忘。1. 什么是对称加密和非对称加密？这个详细来说有点复杂，这里简单的说下：对称加密就是加密和解...

2020-02-27 23:17:06 650

原创 async 函数的实现原理

基本概念ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。前文有一个 Generator 函数，依次读取两个文件。const fs = require('fs');const readFile = function (fileName) { return new Promise(...

2020-02-25 20:54:15 1452

转载 Vue.js异步更新DOM策略及nextTick

本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。引入：DOM的异步更新<template> <div> <div ref="test">{{test}}</div> <button @click="handle...

2020-02-24 23:50:06 420

转载前端 http 缓存

前端面试常问第二大问题是http缓存相关内容。说真的，http缓存相关的细节比较多，并且 http 常用协议版本有1.0、1.1，（本文暂不讨论http2.0）。缓存相关 header我们先罗列一下和缓存相关的请求响应头。Expires响应头，代表该资源的过期时间。Cache-Control请求/响应头，缓存控制字段，精确控制缓存策略。If-Modified-...

2020-02-23 21:36:34 165

原创 webpack打包bundle文件解析

### 一、一个入口，一个文件webpack.config.js```module.exports = { entry: './main.js', // 一个入口 output: { filename: 'bundle.js' }};```main.js```document.write('<h1>Hello World</h1>'...

2020-02-22 23:29:09 384

原创 javascript 隐式转换

你有没有在面试中遇到特别奇葩的js隐形转换的面试题，第一反应是怎么会是这样呢？难以自信，js到底是怎么去计算得到结果，你是否有深入去了解其原理呢？下面将深入讲解其实现原理。其实这篇文章初稿三个月前就写好了，在我读一些源码库时，遇到了这些基础知识，想归档整理下，就有了这篇文章。由于一直忙没时间整理，最近看到了这个比较热的题，决定把这篇文章整理下。```const a = { i: 1,...

2020-02-21 23:07:50 134

原创通俗易懂 Promise 原理

介绍为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。考虑下面一种获取用户id的请求处理//例1function getUserId() { return new Promise(function(resolve) { //异步请求 http.get(url, function(results)...

2020-02-20 22:25:50 183

原创 DOM渲染原理

浏览器渲染过程解析HTML，构建DOM树（这里遇到外链，此时会发起请求）解析CSS，生成CSS规则树合并DOM树和CSS规则，生成render树布局render树（Layout/reflow），负责各元素尺寸、位置的计算绘制render树（paint），绘制页面像素信息浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上1. 构建DOM树...

2020-02-19 22:05:41 279

转载 CSS命名方法之BEM

转自BEM ——源自Yandex的CSS 命名方法论BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。重要的是要注意，我使用的基于BEM的命名方式是经过Nic...

2020-02-18 21:47:36 237

原创 Vue v-model语法糖

v-model语法糖我们可以使用v-model对input进行双向绑定 <input v-model="message"></input>v-model 语法糖本质是 :value="message" @input="onInput"<input :value="message" @input="onInput"></input&gt...

2020-02-17 18:17:00 1201

原创 Vue 自定义指令

Vue自定义指令定义通过directive方法，配合钩子函数及参数定义指令定义全局自定义指令// js Vue.directive('focus', { inserted (el, binding, vnode, oldVnode) { el.focus() console.log('inserted', el, binding, vnode,...

2020-02-17 18:13:45 139

原创 vue 渲染函数 & JSX

渲染函数 render通过渲染函数渲染组件Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap'...

2020-02-16 21:40:36 292

原创 DOM ：DOM0 DOM1 DOM2 DOM3

一、DOM全称文档对象模型（Document Object Model）二、DOM是什么 DOM就是一个编程接口，就是一套API。DOM是针对HTML文档、XML等文档的一套API。就类似于JDBC是针对数据库的一套API一样。三、DOM的用途 DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。现在基本上所有的浏览器都都执行了W3C发布的DOM规范，所...

2020-02-16 00:58:50 500

原创 Vue 异步组件&路由懒加载

异步组件异步组件介绍在开发大型项目的时候，我们会把大型项目根据组件分割为小块代码，然后异步加载代码块，这样可以让首屏部分代码块优先加载，加快首屏渲染速度，其他代码块在需要的时候再加载，加载过的代码块会被缓存起来，以便复用重新渲染。异步组件声明异步组件声明有两种方式，通过工厂函数Vue.component('async-example', function (resolve, ...

2020-02-14 21:12:46 708

原创 Vue 插件及Vue.use源码分析

### 插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：1. 添加全局方法或者属性。如: vue-custom-element2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch3. 通过全局混入来添加一些组件选项。如 vue-router4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。...

2020-02-13 20:21:37 188

转载 vue之virtual-dom篇

首先理解VNode对象一个VNode的实例对象包含了以下属性,参见源码src/vdom/vnode.jsconstructor ( tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Comp...

2020-02-12 10:13:49 241

转载 vue-router实现原理及两种模式分析

之前用Vue开发单页应用，发现不管路由怎么变化，浏览器地址栏总是会有一个'#'号。当时检查自己的代码，没有发现请求的地址带'#'，当时也很纳闷，但是由于没有影响页面的渲染以及向后台发送请求，当时也没有在意。最近看了一下vue-router的实现原理，才逐渐揭开了这个谜题。vue-router 的两种方式（浏览器环境下）1. Hash （对应HashHistory）hash（“#...

2020-02-11 12:12:03 1253

转载 Vue 双向绑定

Vue 双向绑定MVC模式以往的MVC模式是单向绑定，即Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新MVVM模式MVVM模式就是Model–View–ViewModel模式。它实现了View的变动，自动反映在 ViewModel，反之亦然。我对于双向绑定的理解，就是用户更新了View，Model的数据也自动被更新了，这种情况...

2020-02-10 22:20:23 170

原创 Vue-cli 2.0 config配置

Vue-cli 2.0 config/index.js 配置'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { /** ...

2020-02-09 16:41:01 1811

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-...

2020-02-08 18:26:56 76

原创 Vue 插槽新语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 插槽新语法</title> <style> * { margin: 0; padding: 0; } .header {...

2020-02-08 00:51:31 304

原创 Vue 插槽废弃语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 插槽废弃语法</title> <style> * { margin: 0; padding: 0; } .header {...

2020-02-08 00:50:08 428

原创 Vue组件通信方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue组件通信方式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...

2020-02-07 17:33:42 90

原创 Vue生命周期钩子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue生命周期钩子</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...

2020-02-07 17:31:57 98

原创 Vue源码解读——数据驱动（二）

数据驱动的理解vue是一种mvvm模式的js库，特点就是数据驱动，数据双向绑定，组件化。由于前端变成过程中频繁的操作dom是很消耗性能而且代码不易维护。数据驱动可以让我在开发过程中只关注数据和视图，减少dom操作提高性能，使项目更易读，易维护。new Vue 发生了什么new Vue的时候会通过我们传入的参数解析，把el通过mount挂载到vm上，接管DOM，渲染数据，目的是为了把模板...

2020-02-06 11:24:59 270

原创 Vue源码解读——准备工作（一）

flowvue使用flow进行静态类型检查，学习flow有助于理解vue源码，了解flow。flow是什么？flow是facebook出品的js静态类型检查库。vue.js源码中使用flow进行静态类型检查和分析。为什么用flow？缺陷：js是动态类型语言，有些错误不会暴露在再编译过程中，在运行中就会发现各种错误，会让项目变得可读性查，难以维护。趋势：静态类型检测让错误在...

2020-02-05 18:31:28 123

原创 JavaScript常见算法集合

冒泡排序法var arrays = [81, 23, 46, 11, 56, 69, 57, 78, 99, 21, 23];for (var i = 0; i < arrays.length - 1; i++) { for (var j = 0; j < arrays.length - 1 - i; j++) { if (arrays[j] > arrays...

2020-02-04 18:18:23 192

空空如也

空空如也