常见概念学习记录

模版渲染

基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎:
Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎,既可以用在Node环境下,又可以运行在浏览器端。但是,主要还是运行在Node环境下,因为浏览器端有更好的模板解决方案,例如MVVM框架。

CD、CI

CI/CD 中的“CI”始终指持续集成,它属于开发人员的自动化流程。成功的 CI 意味着应用代码的新更改会定期构建、测试并合并到共享存储库中。该解决方案可以解决在一次开发中有太多应用分支,从而导致相互冲突的问题。

CI/CD 中的“CD”指的是持续交付和/或持续部署,这些相关概念有时会交叉使用。两者都事关管道后续阶段的自动化,但它们有时也会单独使用,用于说明自动化程度。

持续交付通常是指开发人员对应用的更改会自动进行错误测试并上传到存储库(如 GitHub 或容器注册表),然后由运维团队将其部署到实时生产环境中。这旨在解决开发和运维团队之间可见性及沟通较差的问题。因此,持续交付的目的就是确保尽可能减少部署新代码时所需的工作量。

持续部署(另一种“CD”)指的是自动将开发人员的更改从存储库发布到生产环境,以供客户使用。它主要为了解决因手动流程降低应用交付速度,从而使运维团队超负荷的问题。持续部署以持续交付的优势为根基,实现了管道后续阶段的自动化。

序列化/反

序列化就是指把对象转换为字节序列的过程;
反序列化就是指把字节序列恢复为对象的过程。

网络

Web的运作原理:一次HTTP请求对应一个页面。如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail,Gmail的页面在首次加载后,剩下的所有数据都依赖于AJAX来更新。
JavaScript执行异步网络请求

Koa

https://koa.bootcss.com/
Koa 新的 web 框架,Express原班人马打造。 通过利用 async 函数,丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助编写服务端应用程序。

yarn 与npm

yarn是基于npm去管理npm包的工具,相比npm的命令做了优化

dart-sass与node-sass

node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass;
dart-sass 是用 drat VM 来编译 sass,sass 官方目前主力推dart-sass。dart-sass之所以容易安装,主要是因为它会被编译成纯 js,这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于 libsass的慢一些但可以忽略不计。

node-sass是自动编译实时的,dart-sass需要保存后才会生效
在 v4.3.0之前node项目都是基于node-sass进行构建的,但node-sass底层依赖 libsass,导致很多用户安装的特别的困难,尤其是 windows 用户,它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。

性能优化 Immutable

Immutable 本身是函数式编程中的概念,纯函数式编程比面向对象更适用于前端开发。因为只要输入一致,输出必然一致,这样开发的组件更易于调试和组装。

js中的对象是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象会影响到原始对象。一般就是使用浅拷贝或者深拷贝来避免被修改,但是这样会造成cpu和内存的浪费

immutable Data一旦创建,就不能更改的数据,对immutable对象的任何修改或删除添加都会返回一个新的immutable对象
实现原理:持久化数据结构+结构共享
在创建 引用旧数据的 时候,会保证旧数据同时可用且不变,不需要并发锁
同时为了避免深度复制所有节点的带来的性能损耗,immutable使用了结构共享,会尽量复用内存。没有被引用的对象会被垃圾回收。即如果DOM树的一个节点发生变化,只修改这个节点和受他影响的父节点,其他节点则共享。

使用 shouldComponentUpdate(),React 避免重复渲染性能优化。但它默认返回 true,执行 render() 方法
可以在 shouldComponentUpdate() 中使用使用 deepCopy 和 deepCompare 来避免无必要的 render(),但 deepCopy 和 deepCompare 一般都是非常耗性能的。

Immutable 提供了简洁高效的判断数据是否变化的方法,
===is 比较

元数据

元数据(Metadata)、中介数据、中继数据,为描述数据的数据(data about data),主要是描述数据属性(property)的信息,用来支持如指示存储位置、历史数据、资源查找、文件记录等功能。
元数据是关于数据的组织、数据域及其关系的信息,元数据就是关于数据的数据

电脑window系统问题与linux换行问题

Windows操作系统采用两个字符来进行换行,即CRLF;Unix/Linux/Mac OS X操作系统采用单个字符LF来进行换行
首先需要确定vscode里面的编辑空间的换行编码是LF
settings 文件 files.eol

// The default end of line character.
//  - \n: LF
//  - \r\n: CRLF
//  - auto: Uses operating system specific end of line character.
"files.eol": "auto",

其次git add在添加的时候可能会自动将LF转换为LFCR,涉及配置项core.autocrlf=false
其中注意git的配置项是分用户层级的
git的配置级别,设置不同的用户和邮箱。git配置有三个级别:system(系统级)、global(用户级别)、local(版本级别)。这三个是逐层覆盖的。先去查找system、接着是global、最后是local。
system
global
local

ReactNode

可以是 ReactElement, ReactFragment, string ,a number 或者一个数组 ReactNodes, 或者null,或者 undefined, 或者 a boolean:
React.ReactNode->组件的返回值
render(): ReactNode;

type ?

react-dom@^15.4.2,
“@types/react-dom” “^16.8.2”

vpn

? 浏览器内核那篇文章?
实现VPN连接的实质就是Reverse Proxy,通过代理服务器接收互联网上的连接请求,然后把请求转发给内部网络上的服务器,并转发服务器的返回结果给客户端。这个代理服务器要响应互联网上的请求,也就必须先拥有一个合法的Internet或专用网域名。

整个VPN通信过程可以简化为以下4个通用步骤:

(1)客户机向VPN服务器发出请求;

(2) VPN服务器响应请求并向客户机发出身份质询,客户机将加密的用户身份验证响应信息发送到VPN服务器;

(3) VPN服务器根据用户数据库检查该响应,如果账户有效,VPN服务器将检查该用户是否具有远程访问权限;如果该用户拥有远程访问的权限,VPN服务器接受此连接;

(4)最后VPN服务器将在身份验证过程中产生的客户机和服务器公有密钥将用来对数据进行加密,然后通过VPN隧道技术进行封装、加密、传输到目的内部网络。

lerna

发包时候,配置lerna.js

<!DOCTYPE>

规定了浏览器文档使用哪种html或者xhtml规范
HTML5与HTML4的示范

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

如果没有<!DOCTYPE>声明,那么不同的浏览器将会以自己不同的怪异的模式去解析渲染页面,这样页面在不同的浏览器上呈现出来的效果也就不一样,人们把这称之为“怪异模式”。

HTML

空元素

HTML元素的内容是开始标签与结束标签之间的内容。空元素即单标签元素

src与href

href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。是与该页面有关联,是引用。
src 表示来源地址,在 img、script、iframe 等元素上。是页面必不可少的一部分,是引入。

link标签与@import

link属于html标签,除了加载CSS文件还可以加载RSS等其他事务,而@import是css提供,只能加载CSS
页面被加载时,link会同步被加载,而@import引用的css会等到页面加载结束后异步加载。
link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

注:link标签最常用的,链接外部样式表,可以支持多种浏览器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值