·段公子-CSDN博客

原创从输入URL到看到页面发生了什么？

URL的输入到浏览器解析的一系列事件简单来说，共有一下几个过程DNS解析发起TCP🔗连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析报文并渲染页面连接结束下面我们来看看具体的细节DNS解析DNS解析实际上就是寻找你所需要的资源的过程。假设你输入www.baidu.com，而这个网址并不是百度的真实地址，互联网中每一台机器都有唯一标识的IP地址，这个才是关键，但是它不好记，乱七八糟一串数字谁记得住啊，所以就需要一个网址和IP地址的转换，也就是DNS解析。下面看看具体的

2022-02-28 15:50:15 221

原创 HybridApp之WebViewJavaScriptBridge

前言：为什么HTML5混合开发这么火在网页中可以看到三维立体特效，技术可以跨平台，适配多终端。成为企业的“宠儿”互联网的风向标，数据显示2016年使用HTML5技术游戏开发达到56.65%,企业级网页应用达到37.64%，营销推广达到77.95%。从开发成本上来说，开发一个HTML5移动站点要比开发一个原生APP的成本低出很多（你除了要开发一个Android应用之外，还需要开发一个iOS应用。）HTML5最大的优势跨屏适配。从跨屏的角度来对比的话，原生应用包括Android、iOS等众多不同的手机系

2020-08-10 16:41:58 375

原创对UDP的认识

前言：网络协议是每个前端工程师都必须要掌握的知识，我们将先来学习传输层中的两个协议：UDP 以及 TCP。对于大部分工程师来说最常用的协议也就是这两个了，并且面试中经常会提问的也是关于这两个协议的区别。常考面试题：UDP 与 TCP 的区别是什么？首先 UDP 协议是面向无连接的，也就是说不需要在正式传递数据之前先连接起双方。然后 UDP 协议只是数据报文的搬运工，不保证有序且不丢失的传递到对端，并且UDP 协议也没有任何控制流量的算法，总的来说 UDP 相较于 TCP 更加的轻便。面向无连接首先

2020-06-10 09:17:39 366

原创 git的使用极简

1、git init在命令行输入git init，初始化文件，会出现一个隐藏的文件加.git，此时代表当前这个文件夹及其以下内容都被git管理了。在dome建立一个js文件，vscode会显示U文件后缀标记作用：创建生产暂存区和本地仓库2、git status查看文件的状态，红色表示工作区，绿色表示暂存区3、git add将工作区的文件提交的暂存区git add 文件 # 将单独一个文件添加到暂存区（可以为空）git add . #将当前文件夹的所有文件都添加都暂存区git a

2020-06-09 23:23:45 820

原创没有用到React为什么还要import引入React

前言：提起React，总是免不了和Vue做一番对比Vue的API设计非常简洁，但是其实现方式却让人感觉是“魔法”，开发者虽然能马上上手，但其原理却很难说清楚。相比之下React的设计哲学非常简单，虽然有很多需要自己处理的细节问题，但它没有引入任何新的概念，相对更加的干净和简单。关于JSX：在理解JSX之前，我们先抛出一个面试官经常问到的问题，就是为什么在JS文件里我们没有用到React，而在文件顶部需要import引入React呢？想必有很多人都是写过这句代码，但不清楚有什么作用在开始之前，

2020-06-09 20:54:10 1931 1

原创 HOC是什么

HOC很多人看到高阶组件（HOC）这个概念就被吓到了，认为这东西很难，其实这东西概念真的很简单，我们先来看一个例子。function add(a, b) { return a + b}现在如果我想给这个 add 函数添加一个输出结果的功能，那么你可能会考虑我直接使用 console.log 不就实现了么。说的没错，但是如果我们想做的更加优雅并且容易复用和扩展，我们可以这样去做：function withLog (fn) { function wrapper(a, b) {

2020-06-07 16:15:12 3412

原创 react的性能优化

性能优化react的性能优化也基本集中在shouldComponentUpdate这个钩子函数上做文章在 shouldComponentUpdate 函数中我们可以通过返回布尔值来决定当前组件是否需要更新。这层代码逻辑可以是简单地浅比较一下当前 state/props 和之前的 state/props 是否相同，也可以是判断某个值更新了才触发组件更新。一般来说不推荐完整地对比当前 state/props和之前的 state/props是否相同，因为组件更新触发可能会很频繁，这样的完整对比性能开销会

2020-06-07 16:04:12 258

原创浏览器的重绘与回流

重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。重绘是当节点需要改变外观而不会影响布局，比如改变color就称为重绘回流是布局或者几何属性需要改变就称为回流。回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。以下几个动作可能会导致性能问题：改变 window 大小改变字体添加或删除样式定位或者浮动盒模型减少重绘和回流使用 transform 替代 top<div class

2020-06-04 09:59:07 212

原创 Service Worker

Service Worker涉及面试题：什么是 Service Worker？Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次

2020-06-02 20:58:31 251

原创浏览器的存储

存储涉及面试题：有几种方式可以实现存储功能，分别有什么优缺点？cookie，localStorage，sessionStorage，indexDB我们先来通过表格学习下这几种存储方式的区别特性cookielocalStoragesessionStorageindexDB数据生命周期一般由服务器生成，可以设置过期时间除非被清理，否则一直存在页面关闭就清理除非被清理，否则一直存在数据存储大小4K5M5M无限与服务器通信每次都会携带在请求报文中

2020-06-02 20:53:16 205

原创 webpack基本配置

webpack介绍webpack是基于nodejs的一个打包的工具作用优化：工程化、vue cli、react cli打包：将多个文件进行压缩，打包成一个文件转换：es6，ts，jsx,tsx,less,sasswebpack结构入口：entry出口：output插件：pluginsdevServer: 开发者服务器配置转换： loadersmode: 模式 ----》开发环境生成环境版本webpack - 4.X ------- 免配置但可配置webpack -

2020-06-02 19:39:48 213

原创 react组件之间的通信

通信其实 React 中的组件通信基本和 Vue 中的一致。同样也分为以下三种情况：父子组件通信兄弟组件通信任意组件父子通信父组件通过 props 传递数据给子组件，子组件通过调用父组件传来的事件函数传递数据给父组件，这两种方式是最常用的父子通信实现办法。父向子传值父组件import { Component } from "react";import PropTypes from "prop-types";export default class Father extends

2020-05-27 09:43:56 242

原创 react-hooks的使用

前言：hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便基本用法import React,{useState,useEffect} from 'react'export default function() { const [num,setNum] = useState(100); useEffect(()=>{ con

2020-05-26 18:30:32 190

原创 react中的事件机制

React 其实自己实现了一套事件机制，首先我们考虑一下以下代码：const Test = ({ list, handleClick }) => ({ list.map((item, index) => ( <span onClick={handleClick} key={index}>{index}</span> ))})以上类似代码想必大家经常会写到，但是你是否考虑过点击事件是否绑定在了每一个标签上？事实当然不是，JSX 上写的

2020-05-26 12:01:41 305

原创 react的生命周期

react 生命周期示意图Reconciliation阶段componentWillMount：组件即将被装载、渲染到页面上componentWillReceiveProps：组件将要接收到属性的时候调用shouldComponentUpdate：组件接受到新属性或者新状态的时候调用（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）componentWillUpdate：组件即将更新Commit阶段componentDidMount：组件真

2020-05-26 11:12:39 243

原创 TLS的加密方式以及握手过程

TLSHTTPS 还是通过了 HTTP 来传输信息，但是信息通过 TLS 协议进行了加密。在 TLS 中使用了两种加密技术，分别为：对称加密和非对称加密。对称加密：对称加密就是两边拥有相同的秘钥，两边都知道如何将密文加密解密。这种加密方式固然很好，但是问题就在于如何让双方知道秘钥。因为传输数据都是走的网络，如果将秘钥通过网络的方式传递的话，一旦秘钥被截获就没有加密的意义的。非对称加密：有公钥私钥之分，公钥所有人都可以知道，可以将数据用公钥加密，但是将数据解密必须使用私钥解密，私钥只有分发

2020-05-22 12:14:51 2130

原创 HTTP请求与响应报文结构

HTTP请求报文结构HTTP请求报文由三部分组成：请求行、请求头、请求体请求行请求行由请求方法、URL和HTTP协议版本3个字段组成。其中的HTTP协议版本有两种：HTTP1.0和HTTP1.1HTTP1.0对于每个连接都只能传送一个请求和响应，请求就会关闭，HTTP1.0没有Host字段;而HTTP1.1在同一个连接中可以传送多个请求和响应，多个请求可以重叠和同时进行，HTTP1.1必须有Host字段。请求头向服务器发送请求的时候必须指明请求类型(一般是GET或者 POST)。如有

2020-05-21 12:07:13 854

原创理解JS中选择排序

选择排序算法原理[理解]将第一位依次与后面的元素相比较，得到最小值，与第一位交换。再用第二位依次与后面元素相比较，得到最小值，与第二位交换。从原始数据中找到最小元素，并放在数组的最前面。然后再从下面的元素中找到最小元素，放在之前最小元素的后面，直到排序完成以下是实现该算法的代码// 两个值互相比较,小的值放在前面// 将第一位依次与后面的元素相比较，得到最小值，与第一位交换。// 再用第二位依次与后面元素相比较，得到最小值，与第二位交换。for (var i = 0; i <

2020-05-20 12:19:29 223

原创 JS中可视化插入排序

插入排序插入排序的原理如下。第一个元素默认是已排序元素，取出下一个元素和当前元素比较，如果当前元素大就交换位置。那么此时第一个元素就是当前的最小数，所以下次取出操作从第三个元素开始，向前对比，重复之前的操作。以下是实现该算法的代码var arr = [8,3,54,7,12,9,6];for(var i=1;i<arr.length;i++){ var temp = arr[i]; for(var j = i;j>0;j--){ if(arr[j]&gt

2020-05-20 11:16:45 251

原创 TCP协议三次握手和四次握手机制

状态机TCP 的状态机是很复杂的，并且与建立断开连接时的握手息息相关，接下来就来详细描述下两种握手。在这之前需要了解一个重要的性能指标 RTT。该指标表示发送端发送数据到接收到对端数据所需的往返时间。建立连接三次握手第一次握手客户端向服务端发送连接请求报文段。该报文段中包含了自身的数据通讯初试序号。请求发送后，客户端进入到发送（SYN-SENT）状态。第二次握手服务端收到连接请求报文后，如果同意连接，则会发送一个应答，该应答中也包含了自身的数据通讯初始序号，发送完后便进入到接受（SYN

2020-05-19 12:06:48 460

原创 JS中常用的性能优化方式

图片优化很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。小图使用 base64 格式将多个图标文件整合到一张图片中（雪碧图）对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好节流考虑一个场景，滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次，对于这种情况我们就可以使用节流。// fu

2020-05-18 14:55:50 1306

原创了解浏览器的渲染原理

浏览器渲染原理前言：学习浏览器渲染原理更多的是为了解决性能的问题，可以减少对性能造成的损伤。浏览器接收到 HTML 文件并转换为 DOM 树当我们打开一个网页时，浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件，也就是字符串，但是计算机硬件是不理解这些字符串的，所以在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。当数据转换为字符串以后，浏览器会先将这些字

2020-05-17 17:33:22 361

原创 DevTools Tips

DevTools Tips前言：如果你能很好地使用 DevTools 的话，它能够很好地帮助你提高生产力和解决问题的能力。Elements这个功能肯定是大家经常用到的，我们可以通过它来可视化所有的 DOM 标签，可以查看任何 DOM 的属性，接下来我们就来学习一下关于这方面的 Tips。Element 状态你可能会在开发中遇到这么一个场景：给一个 a 标签设置了多种状态下的样式，但是如果手动去改变状态的话就有点麻烦，这时候这个 Tips 就能帮你解决这个问题。可以从上图中看到，无论你想看到

2020-05-16 17:13:30 255

原创为什么 0.1 + 0.2 != 0.3

为什么 0.1 + 0.2 != 0.3涉及面试题：为什么 0.1 + 0.2 != 0.3？如何解决这个问题？先说原因，因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。我们都知道计算机是通过二进制来存储东西的，那么 0.1 在二进制中会表示为// (0011) 表示循环0.1 = 2^-4 * 1.10011(0011)我们可以发现，0.1 在二进制中是无限循环的一些数字，其实不只是 0.1，其实很多十进制小数用二进制表示都是无

2020-05-15 11:55:34 646

原创 instanceof 的原理

instanceof涉及面试题：instanceof 的原理是什么？instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。我们也可以试着实现一下 instanceoffunction myInstanceof(left, right) { let prototype = right.prototype left = left.__proto__ while (true) { if (left === nul

2020-05-15 11:46:48 242

原创对 new 的理解

new涉及面试题：new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？在调用 new 的过程中会发生以上四件事情：新生成了一个对象链接到原型绑定 this返回新对象根据以上几个过程，我们也可以试着来自己实现一个 newfunction Dog(name){ this.name = name}Dog.prototype.sayName = function(){ console.log(this.name)}// 上面是本身Dogfu

2020-05-15 11:40:59 323 1

原创探索 JS中的异步运行原理及 Event Loop

前言：在实践的过程中，你是否遇到过以下场景，为什么 setTimeout 会比 Promise 后执行，明明代码写在 Promise 之前。这其实涉及到了 Event Loop 相关的知识，这一章节我们会来详细地了解 Event Loop 相关知识，知道 JS 异步运行代码的原理进程和线程涉及面试题：进程与线程区别？JS 单线程带来的好处？相信大家经常会听到 JS 是单线程执行的，但是你是否疑惑过什么是线程？讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描

2020-05-14 12:18:16 231

原创对 Promise 及 async、awiat 的理解

PromisePromise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：等待中（pending）完成了（resolved）拒绝了（rejected）这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变new Promise((resolve, reject) => { resolve('success') // 无效 reject('reject')})当我

2020-05-13 18:29:12 325

原创 vue组件之间的通信

组件通信组件通信一般分为以下几种情况：父子组件通信兄弟组件通信任意组件父子通信父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props，而是必须通过发送事件的方式告知父组件修改数据。另外这两种方式还可以使用语法糖 v-model 来直接实现，因为 v-model 默认会解析成名为 value 的 prop 和名为

2020-05-13 00:03:46 190

原创路由原理

涉及面试题：前端路由原理？两种实现方式有什么区别？前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。目前前端使用的路由就只有两种实现方式Hash 模式History 模式Hash 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com。

2020-05-12 23:54:18 181

原创对 Virtual DOM 的理解

Virtual DOM什么是 Virtual DOM？为什么 Virtual DOM 比原生 DOM 快？那么相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可以通过 JS 来模拟 DOMconst ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' }}上述代码对应的 DOM 就是<ul class='list'>

2020-05-12 23:45:00 255

原创浅谈MVVM架构

MVVM涉及面试题：什么是 MVVM？比之 MVC 有什么区别？首先先申明一点，不管是 React 还是 Vue，它们都不是 MVVM 框架，只是有借鉴 MVVM 的思路。文中拿 Vue 举例也是为了更好地理解 MVVM 的概念。接下来先说下 View 和 Model：View 很简单，就是用户看到的视图Model 同样很简单，一般就是本地数据和数据库中的数据基本上，我们写的产品就是通过接口从数据库中读取数据，然后将数据经过处理展现到用户看到的视图上。当然我们还可以从视图上读取用户的输入，然

2020-05-12 23:29:55 310

原创原型继承和 Class 继承

前言：js中继承跟java中的继承不太一样，一般通知过call()和apply()两种方式完成，js中的继承是以复制的形式完成的，复制一个父对象，而不像java中直接继承父对象，还有通过原型的方式完成继承，也有弊端，总之道js中的继承只是形式上的对面向对象语言的一种模仿，本质上不是继承，但用起来效果是一样的为什么要继承：通常在一般的项目里不需要，因为应用简单，但你要用纯js做一些复杂内的工具或框架系统就要用到了，比如webgis、或者js框架如jquery、ext什么的，不然一个几千行代码的框架不用继

2020-05-12 12:21:08 233

空空如也

空空如也