CedricD的博客

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

CedricD — Mon, 28 Feb 2022 15:50:15 +0800

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

HybridApp之WebViewJavaScriptBridge

CedricD — Mon, 10 Aug 2020 16:41:58 +0800

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

对UDP的认识

CedricD — Wed, 10 Jun 2020 09:17:39 +0800

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

git的使用极简

CedricD — Tue, 09 Jun 2020 23:23:45 +0800

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

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

CedricD — Tue, 09 Jun 2020 20:54:10 +0800

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

HOC是什么

CedricD — Sun, 07 Jun 2020 16:15:12 +0800

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

react的性能优化

CedricD — Sun, 07 Jun 2020 16:04:12 +0800

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

浏览器的重绘与回流

CedricD — Thu, 04 Jun 2020 09:59:07 +0800

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

Service Worker

CedricD — Tue, 02 Jun 2020 20:58:31 +0800

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

浏览器的存储

CedricD — Tue, 02 Jun 2020 20:53:16 +0800

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

webpack基本配置

CedricD — Tue, 02 Jun 2020 19:39:48 +0800

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

react组件之间的通信

CedricD — Wed, 27 May 2020 09:43:56 +0800

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

react-hooks的使用

CedricD — Tue, 26 May 2020 18:30:32 +0800

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

react中的事件机制

CedricD — Tue, 26 May 2020 12:01:41 +0800

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

react的生命周期

CedricD — Tue, 26 May 2020 11:12:39 +0800

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

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

CedricD — Fri, 22 May 2020 12:14:51 +0800

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

HTTP请求与响应报文结构

CedricD — Thu, 21 May 2020 12:07:13 +0800

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

理解JS中选择排序

CedricD — Wed, 20 May 2020 12:19:29 +0800

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

JS中可视化插入排序

CedricD — Wed, 20 May 2020 11:16:45 +0800

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

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

CedricD — Tue, 19 May 2020 12:06:48 +0800

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