前端复习

梅子黄时雨915
58 阅读7分钟

VUE

vue2的响应式是基于object.defineProperty实现的 vue3的响应式是基于proxy实现的

vue2中的object.defineProperty只对初始对象里的属性有监听作用，对新增的属性无效

MVC

MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。

（2）MVVM

MVVM 分为 Model、View、ViewModel：

  • Model代表数据模型，数据和业务逻辑都在Model层中定义；
  • View代表UI视图，负责数据的展示；
  • ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM

渐进增强和优雅降级

  • 渐进增强

主要是针对低版本的浏览器进行页面重构，在保证基本的功能的情况下，针对高级浏览器进行效果、交互等方面的改进和追加功能

  • 优雅降级

一开始就构建完整的功能，然后针对低版本的浏览器进行兼容

  • 区别

优雅降级是从复杂的现状开始的，渐进增强是从非常基础的、功能比较基本的版本上面开始的。

CSS基础

css选择器和优先级

image.png

  • 通配符优先级最低
  • 内联样式 1000
  • 内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
  • 继承得到的样式优先级最低

可继承属性和不可继承属性有哪些

不可继承的属性

image.png

有继承性的属性

  1. 字体系列属性
  2. 文本系列属性
  3. 元素可见性
    • visibility
  4. 列表布局属性
  5. 光标属性
    • cursor：光标显示为何种状态

display的属性和作用

  1. block 独占一行
  2. inline 不会独占一行，设置长宽无效，但是可以设置水平方向的margin和padding属性，垂直方向的无效
  3. inline-block 将对象设置为inline对象，但是对象的内容又是作为block对象呈现，之后的内联对象会被排列在同一行内

隐藏元素的方法

  1. display:none 渲染树不会包含该渲染对象，元素不会再页面中占据位置，也不会响应绑定的监听事件
  2. 和visibility:hidden 元素在页面中仍占据空间，但是不会响应绑定的监听事件
  3. opacity:0 元素的透明度为0，实现元素的隐藏，但是元素在页面中仍然占据空间，也能响应元素绑定的监听事件
  4. position:absolute
  5. z-index:负值 其他元素遮住该元素
  6. transform:scale(0,0) 将元素缩放为0，元素仍在页面中占据位置，但是不会响应绑定的监听事件

display:none 和visibility：hidden的区别

  1. 在渲染树中

    • display:none 元素不被渲染，不会占据任何空间
    • visibility:hidden 元素仍然在渲染树中，渲染的元素还会占据相应的空间，只是内容不可见

  2. 是否是继承属性

    • display不是继承属性，子孙节点会随着父节点的消失而消失，通过修改子孙节点的属性也无法显示
    • visibility是继承属性，因此通过设置子孙节点的visibility可以让子孙节点显示
    • 修改display会导致重排，修改visibility只会造成文本元素的重绘

伪元素和伪类的区别和作用

盒模型的理解

标准盒子模型和IE盒子模型

  1. 标准盒子模型：高度和宽度为内容content的高度和宽度
  2. IE盒子模型：宽度和高度都是 content+padding+border

CSS布局单位

  1. px: 像素，分为物理像素和css像素
  2. em：文本相对长度单位，相对于当前对象内文本的字体尺寸
  3. rem：css3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数
  4. vw/vh：与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度

两栏布局的实现

  1. 一般指的是左边一栏宽度固定，右边一栏宽度自适应
  2. 三栏布局的实现 左右两栏宽度固定，中间自适应的布局

flex的布局实现

弹性布局-弹性盒子

浏览器的渲染机制

  1. 解析html构建DOM树
  2. 解析css构建cssom树
  3. 将DOM树和CSSOM树合并成渲染树
  4. 构建完渲染树之后，浏览器会根据渲染树的信息计算每一个节点的位置和大小，生成布局，（重排或回流）
  5. 绘制，浏览器会将每一个节点的样式转换为像素，绘制到屏幕上----重绘

从输入URL到看到页面发生的全过程

  1. 用户输入URL
  2. 浏览器解析URL，首先检查本地的hosts文件，查看是否有对应的域名，如果有，浏览器就会直接向该ip地址发送请求，如果没有，浏览器会将域名发送给DNS服务器进行解析，将域名转换成为对应的服务器IP地址
  3. 建立TCP连接，浏览器得到ip地址后，通过tcp协议与服务器建立连接。
  4. 发送HTTP请求
  5. 服务器处理请求
  6. 发送http响应，服务器处理完请求之后会发送一个http响应给浏览器
  7. 浏览器解析和渲染页面。浏览器收到响应之后，会解析响应正文中的html代码，并下载所需要的css、js等资源文件，浏览器根据这些资源来渲染页面，最后将页面呈现给用户。

浏览器缓存的优先级

  1. service worker
  2. memory cache(内存缓存)
  3. http cache
    • 强制缓存：在有效时间内，不会向服务器发送请求，直接从缓存中读取资源
    • 协商缓存：当强制缓存失效后，浏览器会携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存。
  4. disk cache 磁盘缓存
    • 存储在硬盘中的缓存
  5. push cache 推送缓存

跨域以及跨域的解决方法

跨域是因为浏览器的同源策略的限制。 同源：两个URL的协议、端口和主机都相同则认为是同源的

方案

  1. JSONP 仅支持get请求 标签不受同源策略的限制，通过动态插入标签来请求不同源的数据
  2. CORS（跨域资源共享）CORS定义了一种浏览器和服务器交互的方法来确定是否允许跨域请求。通过服务器端设置http头部信息，如Acess-control-allow-origin来允许跨域请求
  3. 代理服务器：通过搭建一个代理服务器来转发请求，使得前端可以通过代理服务器来间接访问不同源的资源
  4. 使用window.postMessage 允许来自不同源的脚本进行通信
  5. 设置documen.domain:如果两个页面属于同一个顶级域名下的不同子域名，通过设置document.domain为相同的顶级域名来实现跨域

重绘和回流

重绘

页面的位置和大小不发生改变

回流

重排 页面布局或几何属性（宽度、长度、位置、大小）发生改变会触发回流

防抖和节流

防抖：单位时间内，多次频繁点击，只触发最后一次操作 节流：单位时间内，多次频繁点击，只触发一次操作

flex布局

flex：1 子级元素占满整个多余部分，空间不够时被挤压

avatar
文章
阅读
粉丝