blog
blog copied to clipboard
HXWfromDJTU
🌈 技术博客，记录日常工作学习的整理~欢迎star
 ## 前言 最近工作室的官网准备要上线了，也因为 `https` 的普遍使用，`https` 的原理读得多了，现在就来实操一次，为网站建立 `https` 证书吧。 ### 申请流程 > 以腾讯云(免费)申请流程为例子  ### 服务器配置ssl证书 > nginx版本 ##### 1、下载证书包 请根据自己的服务器平台选择证书包   ##### 2、上传证书文件到服务器 使用`scp`等方法把证书放到服务器的`conf`目录，例如 ``` $ scp xxxss.com_bundle.crt...
# DNS工作原理 ## 前言 `DNS` （Domain Name System 的缩写）的作用非常简单，就是根据域名查出IP地址。你可以把它想象成一本巨大的电话本，电话黄页。 使用的是`UDP`协议进行传输。 ### dig  ### host  ### nslookup命令  ##### `whois`命令  ## 域名分级查找 | 域名分级 | 解析服务器| 解析器地址存储位置 |...
## Q & A #### 一句话概括什么是闭包 1. 闭包是指一个有权访问另一个函数作用于中的变量的函数。 2. 或者子函数在声明之外的地方被调用，子函数所在的父函数的作用域不会被释放。（也就是保存了子函数声明时候，引用了父函数的变量的值） #### 为什么需要闭包 1. 因为`javascript`没有动态作用域，而闭包的本质是动态作用域。 2. 静态作用域查找的只是一个变量声明时候，依赖源程序中块之间的静态关系。 #### 闭包的特性 使用闭包，只需要简单滴将一个函数定义在另一个函数内部，并将它暴露出来。要暴露一个函数，可以将它返回或者传递给其他函数。 #### 经常混淆的点 1. 闭包不一定需要用`IIFE(立即执行函数)`去实现 2. 只要在函数内部，嵌套内部函数，内部函数引用了函数作用域的变量，并且把这个函数暴露到外面去。 3. 在内部函数，对外部函数中的变量进行引用后，使得JS在进行垃圾回收的时候，不会将内部函数引用的变量释放掉 4. jQuery的全局包是闭包吗？ ```js...
## 前言 执行环境 :arrow_right: 作用域链 :arrow_right: 变量对象 每个执行环境都有一个`[ [scope] ]`变量，指向对象的的作用域链，作用域链上的每个栏位都存放着对应的函数空间的变量对象。 ## 执行环境 1. 函数在创建的时候，会创建一个执行环境(`excution context`)对内部对象，他定义了一个函数执行时的环境 2. 函数每次执行时，执行环境都是独一无二的，多次调用就有多个执行环境。每个人执行环境都有自己的作用域链，用于解析标志符 3. 每个`执行环境`都有一个与之关联的变量对象(`variable object`)，环境中定义的所有`变量`和`函数`都保存在这个对象中 4. `全局环境`是最外围的一个`执行环境`，随着`ECMAScript`的真实环境变化而变化，常见的是`global`和`window` 5. 某个执行中的代码执行完毕，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。 ## [ [scope] ] 1. `[...
## 前言 过去两年的时间有幸可以去主导多个 `toC` 的 web 项目，随着用户量的不断增大，也就让“朗读并背诵全文”的全前端优化手段们得到了实践的机会。 项目的基本信息: * 项目基础框架使用的是 `nuxt.js` * 数据上报使用的是 `Google Analytics` * 错误监控使用的是开源的 `Sentry` * 前端项目和后端api都是部署在阿里云上 接下来说说自己在过去一年多里，优化项目是如何在项目中落地。 ## 优化起步 随着项目功能模块地增多、用户量也在不断地积累，运营同学那边收到用户的反(to)馈(cao)越来越多... * *xxx is great, but the...
 HTML是页面的骨架，而 CSS 作为页面的衣服，才是页面展示的重要环节。 相信大家都见过，满屏`id`和满屏`行内样式`的祖传代码吧。眼花缭乱的代码..不可复用..不可修改的代码...我知道你想原地爆炸.... ```html ``` 当然`↑↑↑↑↑`那种代码是你一次又一次的贪图方便直接行内修改而引起的，`九层之台，始于累土`，CSS的`编码习惯`和`设计思维`是需要贯穿项目本身的 ## 基础优化 现在`css`在日常的开发中，越来越多地被UI框架减轻压力...(其实造轮子和改样式的需求还是hin多的)，熟悉前端的开发者，一般懂得以下几点： 1. 使用`class`属性共享样式 :heavy_check_mark: 2. 使用项目公共样式表，项目全局使用，进一步减少`css`代码 :x: 3. 不使用`id`作为元素修饰选择器。特别是因为选择优先级的时候，不要因为追求一时爽，而放弃程序的可维护性。 :x: 4. 不要使用嵌套过于复杂的`css`选择器。 :x: ## 编码优化 编码上，我们知道css解析选择器的时候，`render-tree`的搜索方向是从叶子结点出发的，编码上也就是从右往左读取的，逐级进行过滤。 #### :x: 尽量不使用通配符和属性选择器 因为通配符选择器和树形选择器匹配到的标签过多，比较耗时。总的来说，我们要在css匹配规则最后(最右)书写比较精确的规则，以便浏览器更快地命中规则。...
## 前言 为了项目的更好优化，为了提高浏览器的解析速率，减少页面无用的重绘，重置。 本文请结合其他笔记一起食用... [1] [前端性能优化 - 第一曲 总览](https://github.com/HXWfromDJTU/blog/issues/39) [2] [从渲染Timeline中深入交互优化](https://github.com/HXWfromDJTU/blog/issues/27) ## 一个请求的生命周期： 1. 用户输入网址(URL),浏览器查找DNS服务器，寻找对应的ip地址 (DNS查询过程博文，[传送门](/network/DNS.md)👉) 2. 浏览器根据ip地址，向服务器发送获取资源的请求 3. 服务器端返回一个HTML响应 4. 浏览器收到返回的内容，浏览器开始解析HTML内容 ## 浏览器的解析 1. 将下载来的`HTML字符串`转化成浏览器能够识别的`DOM Tree`  2. 根据...
## 网络请求部分 ##### 1️⃣ DNS缓存，预加载 `` 二级页面DNS预查询 ##### 2️⃣ 静态资源的压缩与合并 js,css混淆压缩 使用`gulp` `grunt` 或者 `webapck`等前端工具将多个js文件合并在一起 图片使用雪碧图 ##### 3️⃣ 静态资源使用CDN加速 CDN服务商可以再离用户最近的云服务器上，部署所需要的静态资源，然后发送给客户。 ##### 4️⃣ 使用`key-css` 在首页展示的时候，将首屏关键的css提取出来，并使用内嵌的形式加入页面，剩余部分使用外链的形式。 ##### 5️⃣ 使用http2.0 HTTP 2.0改为使用单一TCP链接，数据的传输改为使用流的形式，充分利用了带宽，减少了RTT的次数。也消除了浏览器对同一个域下资源的同时请求只能存在6~8个的限制。（当然我们也可以在服务端，将不同的资源放在不同的服务器中） #####...
## 前言 [上一篇](https://github.com/HXWfromDJTU/blog/issues/15)主要总结了`鉴权`、`签名`、`心跳`的问题，这次我们着重过一下在封装请求库时遇到的以下问题。 1.对调用方透明，尽可能使用`Promise`封装 2.实现请求与响应的中间件 3.实现订阅机制 > 完整的demo代码在[这里👉👉👉](https://github.com/HXWfromDJTU/rainbow-websocket) [](https://github.com/HXWfromDJTU/rainbow-websocket) [](//npmjs.com/package/rainbow-websocket) ## 基础架子 ```ts export class RainbowWebsocket { protected _serverUrl: string // 远端地址 protected _ws: WebSocket // 原生ws实例 constructor...
## 前言 * 进程是CPU资源分配的最小单位，是能拥有资源和独立运行的最小单位。 * 线程是CPU调度的最小单位，线程是建立在进程的基础上的一次程序运行，一个进程可以有多个线程。 * 不同进程之间也可以通信，不过代价比较大。 常说的`单线程`、`多线程`都是指在一个进程内的单和多，也就是说，敲黑板...这些多线程单线程都必须属于一个进程才行。 ## 浏览器多进程 浏览器是多进程的，新增一个tab页面至少新增一个进程，然后操作系统会给每个进程都分配CPU和内存，一个浏览器可以有多个tab页面 那么整体来说，OS就给一个浏览器开启了多个进程，如下图  相比较单进程浏览器，多进程浏览器有以下优势： * 避免单个 `tab` 页面阻塞运行，甚至 `crash` 的话也整个浏览器也都跟着崩溃 * 避免第三方插件引起的 `crash` 导致整个浏览器崩溃 * 多进程充分利用多核 `CPU` 优势 *...