SnowKagura‘s blog - 处理
type: channel
link: https://www.snowkagura.com/tag/%E5%A4%84%E7%90%86/
items: 操作系统学习笔记（4）—— 操作系统的特征
items: 从零开始搭建react开发环境（进阶篇）
items: linux学习笔记——从零开始搭建web环境
items: 关于css如何处理溢出的内容

操作系统学习笔记（4）—— 操作系统的特征
type: item
date: 2022-03-24T21:14:00+08:00
description: 操作系统的特征从总体上看，操作系统具有五个方面的特征：虚拟化 (Virtualization)、并发性 (Concurrency)、异步性、共享性和持久性 (Persistency)。操作系统的虚拟化可以理解为它对内存、CPU 的抽象和处理；并发性和共享性可以理解为操作系统支持多个应用程序“同时”运行；异步性可以从操作系统调度、中断处理对应用程序执行造成的影响等几个方面来理解；持久性则可以从操作系统中的文件系统支持把数据方便地从磁盘等存储介质上存入和取出来理解。虚拟性内存虚拟化程序员在写应用程序的时候，不用考虑其程序的起始内存地址要放到计算机内存的具体某个位置，而是用字符串符号定义了各种变量和函数，直接在代码中便捷地使用这些符号就行了。是由于操作系统建立了一个 地址固定 ， 空间巨大 的虚拟内存给应用程序来运行，这是 内存虚拟化 ，其实是一种 “空间虚拟化” ， 可进一步细分为 内存地址虚拟化 和 内存大小虚拟化 。这里的每个符号在运行时是要对应到具体的内存地址的。这些内存地址的具体数值是什么？程序员不用关心。为什么？因为编译器会自动帮我们把这些符号翻译成地址，形成可执行程序。程序使用的内存是否占得太大了？在一般情况下，程序员也不用关心。[scode type="blue" size=""]实际上，编译器 (Compiler，比如 gcc) 和链接器 (linker，比如 ld) 也不知道程序每个符号对应的地址应该放在未来程序运行时的哪个物理内存地址中。所以，编译器的一个简单处理办法就是，设定一个固定地址（比如 0x10000）作为起始地址开始存放代码，代码之后是数据，所有变量和函数的符号都在这个起始地址之后的某个固定偏移位置。假定程序每次运行都是位于一个不会变化的起始地址。这里的变量指的是全局变量，其地址在编译链接后会确定不变。但局部变量是放在堆栈中的，会随着堆栈大小的动态变化而变化。这里编译器产生的地址就是虚拟地址。这里，编译器和链接器图省事，找了一个适合它们的解决办法。当程序要运行的时候，这个符号所对应的虚拟内存地址到计算机的物理内存地址的映射必须要解决了，于是这个任务便推到了操作系统身上。操作系统会把编译器和链接器生成的执行代码和数据放到空闲的物理内存中，并建立虚拟地址到物理地址的映射关系。由于物理内存中的空闲区域是动态变化的，这导致虚拟地址到物理地址的映射关系也是动态变化的，需要操作系统来维护好可变的映射关系，确保编译器“固定起始地址”的假设成立。只有操作系统维护好了这个映射关系，才能让程序员只需写一些易于人理解的字符串符号来代表一个内存空间地址，且编译器只需确定一个固定地址作为程序的起始地址就可以不用考虑将来这个程序要在哪里运行的问题，从而实现了 内存地址虚拟化 。在这里，虚拟地址到物理地址的转换关系由操作系统与 MMU(Memory Management Unit) 进行交互从而处理映射关系。[/scode]应用程序在运行时不用考虑当前物理内存是否够用。如果应用程序需要一定空间的内存，但由于在某些情况下，物理内存的空闲空间可能不多了，这时操作系统通过把物理内存中最近没使用的空间（不是空闲的，只是最近用得少）换出（就是“挪地”）到硬盘上暂时缓存起来，这样空闲空间就大了，就可以满足应用程序的运行时内存需求了，从而实现了 内存大小虚拟化 。[scode type="green" size=""]这里其实就涉及到了内存页的概念，通过将内存按页面大小的映射，从而实现了方便的装载与卸载，等到需要使用时再重新建立映射关系[/scode]CPU虚拟化不同的应用程序可以在内存中并发运行，相同的应用程序也可有多个拷贝在内存中并发运行。而每个程序都“认为”自己完全独占了 CPU 在运行，这是 “CPU虚拟化” ，也是一种 “时间虚拟化” 。操作系统给了运行的应用程序一个幻象，即操作系统把时间分成小段，每个应用程序占用其中一小段时间片运行，用完这一时间片后，操作系统会切换到另外一个应用程序，让它运行。由于时间片很短，操作系统的切换开销也很小，应用程序或使用应用程序的用户基本上是看不出的，反而感觉到多个程序各自在独立“并行”执行，从而实现了 CPU虚拟化 。[scode type="yellow" size=""]并行 (Parallel) 是指两个或者多个事件在同一时刻发生；并发 (Concurrent) 是指两个或多个事件在同一时间间隔内发生。对于基于单 CPU 的计算机而言，各个“同时”运行的程序其实是串行分时复用一个 CPU ，任一个时刻点上只有一个程序在 CPU 上运行。 这些虚拟性的特征给应用程序的开发和执行提供了非常方便的执行环境，但也给操作系统的设计与实现提出了很多挑战。[/scode]并发性操作系统为了能够让 CPU 充…

从零开始搭建react开发环境（进阶篇）
type: item
date: 2022-02-14T18:05:00+08:00
description: [scode type="share"]上篇文章写的有些简略，而且有些地方在实际开发中还是有一定问题存在的，所以就有了这个进阶篇，这篇文章也是因为最近在搞前端开发，所以顺便总结一下[/scode]大纲首先我先说明一下这次使用的技术栈：less css预处理器，知名的还有sass、scss、stylus等react 主要的开发依赖库typescript 提供静态类型等诸多好处webpack 打包工具webpack-dev-server 开发用服务器react-router 路由管理库axios 网络请求库babel es新特性等代码的polyfill以这些作为主要的开发工具和生产依赖，除此之外还有一些关于webpack打包的插件，babel的插件之类的都会在后续进行一一说明步骤首先，我们从新建文件夹开始mkdir my-app \ && cd my-app \ && npm init -y然后我们就开始装依赖了npm install react react-dom react-router-dom axios --save-exact以上是几个生产环境所需要的依赖，所以放在一起进行安装，这里的--save-exact是为了把下载下来的依赖库版本固定，从而避免不同人开发时因为版本更新导致的诸多问题现在我们开始安装开发方面的依赖库，这里要使用一个参数--save-dev，说明这些依赖只在开发时使用npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime @babel/preset-typescript --save-dev \ && npm install webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-merge --save-dev \ && npm install typescript @types/react @types/react-dom @types/webpack @types/node ts-node --save-dev \ && npm install less less-loader css-loader babel-loader style-loader --save-dev \ && npm install clean-webpack-plugin css-minimizer-webpack-plugin fork-ts-checker-webpack-plugin html-webpack-plugin mini-css-extract-plugin --save-dev这里可以看到，有非常多的开发方面的依赖，在这里我一行一行的进行解释首先第一行，我们可以看到都是关于babel方面的一些库，下面是它们的作用@babel/core babel的核心库@babel/plugin-transform-runtime 和 @babel/runtime 提供对async/await功能的支持@babel/preset-env 提供对ES规范新功能的支持@babel/preset-react 提供对react相关代码规范的支持@babel/preset-typescript 提供对typescript代码的支持babel主要的作用就是为了提供对一些浏览器不支持的语法进行降级转换的作用，使得其可以在浏览器运行然后是第二行，关于webpack的一些功能模块webpack 和 webpack-cli 一个是核心库，一个是命令行支持webpack-dev-middleware 和 webpack-dev-server 对开发环境提供热替换开发服务器功能webpack-merge 用于对配置文件的merge，方便进行配置文件的区分管理（ts原生也可以合并，但是这个比较智能）第三行，关于typescript方面的一些模块声明文件还有typescript自身，这里就不做详细解释了第四行，提供了less支持和一些webpack读取相关文件的相应loader第五行，关于webpack的一些插件clean-webpack-plugin 在打包生成文件时会对之前的文件进行相应的清理操作，主要是为了修复webpack-dev-middleware在启用writeToDisk功能时，webpack原生配置启用自动清理却无法清理的bugcss-minimizer-webpack-plugin 对打包生成的css进行最小化压缩处理fork-ts-checker-webpack-plugin 提供在…

linux学习笔记——从零开始搭建web环境
type: item
date: 2021-01-05T17:01:00+08:00
description: 起因：这几天，终于闲下心来，少娱乐，多玩点技术。首先，关于linux环境，之前hackweek买的一台学生机没派上用场，想着闲着也是闲着，不如好好利用一下学学linux，之前构建web服务器环境都是直接宝塔后台可视化界面，一键部署的懒人操作。说实话，这样对我的linux知识了解很不好，于是我打算从零开始，编译安装配置每一项我需要构建的东西。先把阿里云的服务器系统改成了最新的CentOS 8.2,然后开工。安装nginx安装nginx是直接到官网下载源代码进行编译安装，所以要先准备前置条件gcc安装安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：yum install gcc-c++PCRE pcre-devel 安装PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令：yum install -y pcre pcre-develzlib 安装zlib库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。yum install -y zlib zlib-develOpenSSL 安装OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。yum install -y openssl openssl-devel做好了前置安装，然后就是直接到nginx官网下载了，这一步一般都是用wget下载(推荐），所以如果没有wget，还得下一个wget。yum install wget然后就是到官网复制下载链接了：nginx官网解压下载完成后，使用tar -zxvf nginx-1.19.6.tar.gz cd nginx-1.19.6/进入到解压根目录后，直接使用./configure等待配置完成后，开始编译安装make && make install安装完成后查找安装目录whereis nginx然后cd /usr/local/nginxnginx的可执行文件在根目录下的sbin中，进入sbin使用./nginx即可启动nginx服务[scode type="blue"]这里补充一些常用命令：./nginx -s stop：此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。./nginx -s quit：此方式停止步骤是待nginx进程处理任务完毕进行停止。./nginx -s reload：重载nginx的设置，即nginx目录下的conf中的nginx.conf中的设置更改后需要执行此命令重载[/scode]开机自启动即在rc.local增加启动代码就可以了。vi /etc/rc.local增加一行 /usr/local/nginx/sbin/nginx设置执行权限：chmod 755 rc.local然后来到/usr/local/nginx/conf，用vim打开nginx.conf，把server_name改成自己的服务器ip或者已经准备好的域名，保存后使用重载命令后便可以直接访问nginx搭建好的web网站了。安装php一般可以直接通过yum -y install php直接安装php，但是我想要直接上最新版本的，所以得官网下载然后进行编译安装。这里得下两个前置包，不然在执行./configure的时候会报错yum install libxml2-devel yum install sqlite-devel然后到官网找到最新版下载地址使用wget进行下载，但是说实话，php官网下载速度一言难尽，所以我自己找了个下载源：下载源wget http://mirrors.sohu.com/php/php-8.0.0.tar.gz tar -zxvf php-8.0.0.tar.gz cd php-8.0.0/然后这里因为要搭配nginx使用，所以在进行编译配置的时候要加一点点参数./configure --prefix=/usr/local/php --enable-fpm--enable-fpm是为了安装php-fpm组件，然后--prefix代…

关于css如何处理溢出的内容
type: item
date: 2020-09-24T22:39:00+08:00
description: 用于处理溢出的属性名为overflow它有以下几种处理方式：visible(默认值）为了防止数据损失hidden 也即将溢出内容隐藏掉，只能用于溢出内容不重要时scroll：这个属性可以产生一个滚动条，保证内容不溢出[scode type="blue"]同时的，overflow可以拆分成overflow-x和overflow-y代表这两个方向上对于溢出的处理方法,当然也可以通过对overflow设置两个值来分别控制在x轴和y轴上对于溢出的处理[/scode][scode type="red"]任何设计网页的时候都要注意对于溢出可能性的处理[/scode]