基础知识(学校里学过的那种)
-
浏览器IP寻址到到页面渲染完成的过程
- 1。浏览器构建请求
- 1.1 DNS域名解析寻找ip 浏览器缓存→系统缓存→运营商缓存→根DNS服务器
- 1.2 在应用层封装http 请求报文;1.3 在传输层建立tcp 连接;1.4 数据链路层， 物理层;
- 1.3 在传输层建立tcp 连接;1.4 数据链路层， 物理层;
- 1.4 数据链路层， 物理层;
- 2。网络传输浏览器请求数据;
- 3。服务器构建响应;
- 4。网络传输服务器响应数据;
- 5。浏览器渲染页面;
- 5.1、创建DOM树 分析器分析HTML元素，构建一颗DOM树
- 5.2、创建StyleRules(CSS) CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
- 5.3、创建Render树 将DOM树和样式表，关联起来，构建一颗Render树
- 5.4、布局Layout 开始布局为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
- 5.5、绘制Painting Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
- 1。浏览器构建请求
-
OSI七层网络模型
浏览器构建请求时，一层层向下封装报文(请求行头体 → 数据段 → 组 → 帧 → 比特)
函数相关 ES6++
foreach()函数的循环次数是一开始就固定的
VUE相关
-
为什么VUE3要使用proxy代替deineProperty?
- JS中做属性拦截常见的方式有三: :defineProperty，getter/setters 和Proxies.
- Vue2在2013年只能使用defineProperty。
- 该API对数组的拦截有问题 vue专门为数组响应式做一套实现。
- 另外不能拦截那些新增、删除属性
- defineProperty方案在初始化时需要深度递归遍历待处理的对象才能对它进行完全拦截，明显增加了初始化的时间。
- Proxy不仅可以对数组实现拦截，还能对Map、Set实现拦截;
- Proxy的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用都改善
-
为什么Vite这么快？
Webpack的bundle模式构建 module graph 的过程中，涉及到大量的文件 IO、文件 transfrom、文件 parse 操作；以及分解 module graph 的过程中，需要遍历 module graph、文件 transform、文件 IO 等。这些操作，往往需要消耗大量的时间，导致构建速度变得缓慢。
Vite的unbundle 机制，不需要做 bundle 操作，源文件之间的依赖关系完全通过浏览器对 ESM 规范的支持来解析。这就使得 dev server 在启动过程中只需做一些初始化的工作，剩下的完全由浏览器支持。
unbundle 机制的核心:
1.模块之间的依赖关系的解析由浏览器实现
2.文件的转换由 dev server 的 middlewares 实现并做缓存
3.不对源文件做合并捆绑操作
优点：快速的冷启动，快速的热更新
缺点：首屏和懒加载性能的下降。
相关链接 -
与react的区别
1.vue是渐进式框架 更注重小型化和轻量化。vue特性之一便是双向绑定，数据与视图相互影响相互改变。
2.react更偏向大型应用，与传统JS一样，通过操作DOM来改变视图
3.但二者都是用了虚拟DOM来提升渲染性能 -
ref用于vue中获取dom 类似jquery的$()选择器 与 原生的document.getElementById() -
优先级问题：props第一 methods第二 data第三 computed第四 watch最后
VUE源码：
-
VUE3中 setup写法
跳转到更详细的总结
原生JS相关
- promise
- 跨域：协议、域名、端口号任一与当前页面不同，即会被浏览器认作跨域请求。
跨域资源共享机制(CORS) ，允许服务器展示标识除他自己外的origin(域、协议、端口)的资源。主要的配置工作都在后端。 - 回调函数：函数的函数，也就是当作参数传给其他函数的函数，一般用来处理异步操作
- 匿名函数：顾名思义，没有名字无法直接调用的函数。但可以赋值或作为参数传递
setTimeout(function(){
console.log('执行了')},1000)
- 箭头函数：就是简化的匿名函数.可以省略function return {} 等
setTimeout(()=>console.log('执行了'),1000)
-
netxtick()获取更新后的dom内容
-
-
call()的用法与理解 手写foreach()
JS中 方法可以这样用 用法类似JAVA中的类
function f(){
this.a="1";
}
let a = new f();
a.a//1
call()的用法与理解
function f(){
this.a="1";
}
function e(){
f.call(this);//(对象f被添加到了this对象，也就是e对象中)
}
new e().a//1
var s1={
color:'red'};//谁调用this就指向谁，也可以将调用call()方法的对象的this指向改变为()里的对象。
function changeColor(){
console.log(this.color);
}
changeColor.call();//undefined
changeColor.call(s1);//red
利用原型链，手写foreach
Array.prototype.toforEach = function(data) {
console.log('toforEach的参数——', data)
// data 就是调用这个函数传入的参数，此时是一个回调函数; 回调函数不会立马被指向，调用的时候才会执行
console.log('this====', this) //[1,2,3] 谁调用toforEach this便指向谁
let array = this
for (let index = 0; index < array.length; index++) {
data(array[index],index,array)
}
}
new Array(1,2,3).toforEach((element, index) => {
console.log(element) // 1 2 3
})
- JS执行机制
html5:
- html5新增了语义化标签：nav、section、footer …
- 新增了canvas标签
- 新增视频和音频标签 video 、audio
- html5完全支持css3
- 浏览器内核的理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎则：解析和执行javascript来实现网页的动态效果
- 行内元素：a b br i span input select strong
块级元素：div p h1—h6 from ul ol li - src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
CSS相关
-
IE盒子模型：margin content(border+padding+content)
-
标准盒子模型：margin border padding content (计算宽高时不包含外边距margin)
-
CSS权重
全局 < 标签选择器 < class选择器 < ID选择器 < 行内样式 < !important -
CSS选择器：
ID类标签 相邻+父子>后代 通配属性[]伪类选择器:
id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代 选择器（li a）、通配符选择器（）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child(n)）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
选择第几个子元素 -
display值
none–隐藏（visibility:hidden opacity:0）
inline（默认 共享一行 大小由内容撑开 只有padding和margin的左右生效）
block–块元素（独占一行，会默认填满父元素的宽度，有盒子模型 ）
inline-block -行内块
table–表格显示
list-item–项目列表
flex -
position值
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。 -
CSS3新特性:
弹性盒模型 display: flex;
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
文字特效、旋转,缩放,定位,倾斜
新增伪类、伪元素- p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素唯一的子元素的每个元素。 - :hover 将样式添加到鼠标悬浮的元素
:active 将样式添加到被激活的元素
:focus 将样式添加到获得焦点的元素
:link 将样式添加到未被访问过的链接
- p:first-of-type 选择属于其父元素的首个元素的每个元素。
-
overflow属性
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。 -
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
- margin: 0 auto;
-
px、em等单位
- 绝对单位
cm 厘米 、mm 毫米、in 英寸 、px 像素 - 相对单位：
em：相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
rem：（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小
vw：视窗宽度，1vw=视窗宽度的1%
vh：视窗高度，1vh=视窗高度的1%
- 绝对单位
-
Flex
核心思想：子元素如何分配父元素剩余空间，剩余空间＝父元素宽-子元素宽。当子元素宽全部为0时，剩余空间就算父元素宽
特点：子元素宽度和超过父元素宽度 不会向浮动那样另起一行展示 而会等比例缩放子元素保证其全部展示；灵活且与grid浮动布局有冲突
flex 父元素常见属性- flex-direction:设置主轴方向 row/column
- flex-wrap 设置子元素是否换行 nowrap/wrap
- justify-content设置主轴上的子元素排列方式 center/space-around平分剩余空间/space-between 先两边贴边再平分剩余
- align-items设置侧轴上的子元素排列方式(单行) center/stretch拉伸
- align-content设置侧轴上的子元素排列方式(多行) center/space-around平分剩余空间/space-between 先两边贴边再平分剩余
flex 子元素常见属性 - flex定义子项目所占剩余空间的份数*
flex:number /默认0/ - order定义项目排列顺序
order:number 数值越小越靠前 允许负数 默认0 - align-self子项自己在侧轴的排列方式*
`align-self:flex-end 属性和align-items一样
GIT
- git都是以当前目录作为单元 保存对应仓库信息 分支信息等
- git init 初始化根目录git信息