开始学习大前端的若干问题

博客已迁移至自建网站,此博客已废弃.
请移步至:https://blog.ours1984.top/posts/tndb/欢迎大家访问

开发环境

名称	软件	官网
编辑器	`vscode`	https://code.visualstudio.com/
浏览器 1	`Chrome`	https://www.google.cn/intl/zh-CN/chrome/
浏览器 2	`FireFox`	https://www.firefox.com.cn/

VsCode插件

插件	作用
live server	实时预览
dracula official	吸血鬼主题
html css support	提示增强
Prettier-code Formatter	格式化
Markdown Preview Enhanced	markdown增强
Helium Icon Theme	文件图标

有逼格的字体

等宽字体	不会出现看错了,英文编程	下载地址
Monaco	浓浓的苹果味	https://www.fontmirror.com/monaco
JetBrains Mono Thin	JetBrains 开源字体	https://www.jetbrains.com/lp/mono/
Fira Code	专为写程序而生。除了具有等宽等基本属性外，还加入了编程连字特性（ligatures）	https://github.com/tonsky/FiraCode

在vscode的settings.json文件写入以下即可.前提是把字体安装好

    "editor.fontFamily":"JetBrains Mono Thin,Fira Code,Monaco",
    "editor.fontLigatures": true,

站得低尿的实

名称	描述
`HTTP`	基于请求与响应的, 面向连接的,无状态的网络协议
`Web Server`	`Apache`, `Nginx`
`URI / URL`	`URI`是标准, `URL`是`URI`的一种实现
`console`	浏览器控制台对象,从浏览器的检查器中打开它
`CORS`	跨域资源共享
`路径`	当前路径, 相对路径,绝对路径

WEB服务器

20220630213152

Apache
- 同步模型/主流/稳定成熟
- 基于模块/动态正向
- 对PHP特别友好
Nginx
- 高并发/高并发/轻量级
- 静态/反向代理/负载均衡
- 进程相互影响,稳定性差
- 还需要其它后端技术支持才支持PHP
配合
- 动态请求 apache
- 静态反向 nginx

URI、URL、URN概念

其实一直有个误解，很多人以为URI是URL的子集，其实应该反过来。URL是URI的子集才对。

URI = Uniform Resource Identifier 统一资源标志符
URL = Uniform Resource Locator 统一资源定位符
URN = Uniform Resource Name 统一资源名称

简单来说，就是URI是抽象的定义，不管用什么方法表示，只要能定位一个资源，就叫URI。

本来设想的的使用两种方法定位：1，URL，用地址定位；2，URN 用名称定位。

举个例子：去村子找个具体的人（URI），如果用地址：某村多少号房子第几间房的主人就是URL，如果用身份证号+名字去找就是URN了。

原来uri包括url和urn，后来urn没流行起来，导致几乎目前所有的uri都是url。

20220701000850

HTTP/FTP/FILE协议

用HTTP协议访问Web服务器

20220701000518

http: 127.0.0.1:80: 80是默认的端口, 可以省
https: 127.0.0.1:443: 443是默认的端口, 可以省

用FTP协议下载和上传文件时,默认端口是21

20220701000600

读取客户端计算机本地文件时

20220701000638

文件路径/文件名

从域名的第一个/开始到最后一个/为止，是虚拟目录的部分。虚拟目录也不是URL必须的部分，上述实例http协议url中的虚拟目录是/yikoulinux/chat/blob/master/

从域名最后一个/开始到?为止，是文件名部分；如果没有?，则是从域名最后一个/开始到#为止，是文件名部分；如果没有?和#，那么就从域名的最后一个/从开始到结束，都是文件名部分。文件名也不是一个URL的必须部分。

CORS跨域资源共享

协议, 域名/IP, 端口必须全部相同,否则就是跨域

php.cn中, fetch(‘https://baidu.com'),报cors错误

CORS跨域资源共享: 允许当前域的资源, 被其它域的脚本请求

站得高尿的远

名称	描述	用途和特征
`html5`	超文本标记语言,`HTML5`是最新版本	描述页面基本结构,结构化/层级化/语义化
`CSS3`	层叠样式表,`CSS3`是最新版本	控制html元素样式,布局等,”选择器 + 声明块”来修饰页面元素
`JavaScript`	基于`ECMAScript`标准的,通用的前后端脚本语言	函数优先,基于原型,面向对象的轻量级,解释型脚本语言
`ES6`	`ECMA2015`之后的 JS 版本统称,如`ECMA2019`	前端:ECMA/DOM/BOM,后端:ECMA/Node.js
`页面渲染`	`DOM树`->`CSS树`->`渲染树`->`节点绘制`
`JS引擎`	为防止 JS 中断页面解析,可将期延迟或异步执行	最简单方案就是等页面渲染完成再执行JS,例如将JS放到</body>底部

HTML解析器

渲染过程发生在内存和浏览器中

内存中

构建DOM树
构建CSS树
构建渲染树Render = DOM + CSS
生成DOM节点

浏览器

构建DOM节点
完成DOM节点布局
完成节点绘制并呈现