Web前端常识概览 - 其实就是面试题知识啦:)

原创
09/07 16:50
阅读数 106

浏览器

宏任务和微任务

Javascript 引擎单线程运行,有宏任务队列和微任务队列控制程序执行顺序。

Javascript 先按顺序执行宏任务队列,期间产生的新宏任务添加到新一个宏任务队列,产生的微任务添加到微任务队列。一个宏任务队列执行完毕后,执行微任务队列,期间产生的宏任务添加到新宏任务队列,产生的微任务添加到当前微任务队列尾。当前宏任务队列和微任务队列都执行结束后,执行下一个宏任务队列。

宏任务:setTimout,script,IO,渲染 微任务:promise,ajax

一个 URL 访问的过程

  1. DNS 解析
  2. HTTP/HTTPS 请求
  3. 获取数据(HTML 和资源)
  4. 渲染页面和执行脚本

重绘与回流

当元素的样式发生变化时,浏览器需要触发更新,重新绘制元素。这个过程中,有两种类型的操作,即重绘与回流。

  • 重绘(repaint): 当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此 损耗较少
  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。

会触发回流的操作:

  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变
  • 元素字体大小变化
  • 添加或者删除可见的 dom 元素
  • 激活 CSS 伪类(例如::hover)
  • 查询某些属性或调用某些方法:clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、getComputedStyle()、getBoundingClientRect()、scrollTo()

跨域

跨域指一个域名的网页请求另一个域名的资源。但浏览器有同源策略,即一般情况下网页只能获取协议、域名、端口号相同域下的资源,在跨域时会有限制:

  • Cookie、LocalStorage、IndexedDB 等存储性内容无法读取
  • DOM 节点和 Js 对象无法获得
  • AJAX 请求被浏览器拦截

跨域解决方法:

  • JSONP
  • CORS(Cross-origin resource sharing)
  • postMessge

网络

HTTP

特点:

  • 可靠传输:基于 TCP
  • 无状态:不保存发送方和接收方信息
  • 灵活可扩展:只规定了基本格式,可以传输文本、图片、音频等任意数据

HTTP1.1:

  • 持久连接:TCP 连接默认不关闭,可复用
  • 新缓存机制:E-tag、If-Unmodified-Since,、If-Match,、If-None-Match
  • 断点续传
  • 新增方法:PUT、PATCH、OPTIONS、DELETE

HTTP2.0:

  • 二进制分帧:彻底二进制传输
  • 头部压缩
  • 多路复用:同时双向发送和接收多个请求
  • 服务器推送:服务器主动发送可能需要的资源

状态码:

  • 1xx:信息类。表示接受的请求正在处理
  • 2xx:成功
  • 3xx:重定向
  • 4xx:客户端错误
  • 5xx:服务器错误

GET 和 POST 的区别:

  • 从缓存角度看,GET 请求后浏览器会主动缓存,POST 默认情况下不能。
  • 从参数角度来看,GET 请求一般放在 URL 中,因此不安全,POST 请求放在请求体中,相对而言较为安全,但是在抓包的情况下都是一样的。
  • 从编码角度看,GET 请求只能经行 URL 编码,只能接受 ASCII 码,而 POST 支持更多的编码类型且不对数据类型限值。
  • GET 请求幂等,POST 请求不幂等,幂等指发送 M 和 N 次请求(两者不相同且都大于 1),服务器上资源的状态一致。
  • GET 请求会一次性发送请求报文,POST 请求通常分为两个 TCP 数据包,首先发 header 部分,如果服务器响应 100(continue), 然后发 body 部分。

作者:TianTianUp 链接:https://juejin.cn/post/6857287743966281736 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

缓存

强制缓存:

  • Expires:绝对过期时间
  • Cache-Control:相对过期时间

协商缓存:

  • Last-Modified:上一次修改时间
  • ETag:资源指纹

统一资源定位符

Uniform Resource Locator(URL),网络上标准的资源地址。

格式:scheme://host[:port]/path/…/?query#anchor

含义:

  • scheme:协议
  • host:域名或 IP 地址
  • post:端口号
  • path:路径
  • query:查询字符串
  • anchor:锚点

HTTPS

HTTPS 协议由 HTTP 和 SSL/TLS 组合而成。

特点:

  • 非对称加密传输
  • 需要数字证书

Javascript

变量类型

基础变量类型:

  • boolean
  • number
  • string
  • undefined
  • null
  • symbol
  • bigint

复合变量类型:

  • Object
  • Function

类型判断

  • typeof:注意`typeof null === 'object'
  • instanceof:可以判断类
  • Object.prototype.toString

类型转换

转 boolean 的规则:

undefinednullfalseNaN''0-0 转为false;其他所有值转为true

转数字的规则:

true转为 1,false转为 0,null转为 0,undefined转为NaNsymbol报错,字符串看内容,如果是数字或者进制值就正常转,否则就NaN

对于对象,将其转换为数字和字符串时,为按顺序检查它的 3 个方法:

  1. [Symbol.toPrimitive]
  2. valueOf
  3. toString

如果有那么调用并将返回值进一步处理(继续检查或返回数字或字符串),否则报错。

运算符:

  • +:操作数至少有一个是字符串,那么得到字符串,否则的数字。
  • -*/:操作数至少有一个数字,那么得数字。

原型-构造函数-实例

原型:一个对象,为派生对象提供属性。 构造函数:基于原型新建新对象的函数。 实例:由构造函数创建的对象。

new 构造函数() === 实例
构造函数.prototype === 原型
原型.constructor === 构造函数
Object.getPrototypeOf(实例) === 原型

原型是对象,那么原型也有原型,组成了原型链。

基于同一个原型链的对象共享相同的原型属性。查找对象的属性时,如果对象自身找不到该属性,则沿着原型链向上需找,直至顶级原型对象。修改对象的属性时,如果对象自身没有这个属性,则添加该属性,不会直接修改原型链上的属性。

new 运算符的执行过程

  1. 创建对象
  2. 链接原型
  3. 绑定 this
  4. 返回对象

instanceof 原理

能在实例的原型对象链中找到该构造函数的 prototype 属性所指向的原型对象就返回true,否则返回false

执行上下文

Execution Context(EC)。代码执行的作用返回和环境。

组成:变量对象,作用域链,this指针。 分类:全局执行上下文,函数执行上下文,eval执行上下文。

闭包

闭包属于一种特殊的作用域,称为 静态作用域。它的定义可以理解为: 父函数被销毁 的情况下,返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链,因此可以继续访问到父级的变量对象,这样的函数称为闭包。

this 指向

  • 对象调用方法,this 指向对象。
  • 箭头函数中,this 为词法作用域中的 this 指向。
  • call、apply、bind 处理过的函数,this 指向参数指定的对象。

内存泄漏

原因:

  • 全局变量无法被释放
  • 定时器未被正确取消,导致所引用的外部变量无法被释放
  • 事件监听没有正确取消 (低版本浏览器可能出现)
  • 闭包中父作用域的变量无法被释放
  • dom 元素被删除时,引用未被删除

DOM 和 BOM

宽高和位置属性

  • clientWidth/clientHeight:可视内容宽高,不含边框和滚动条
  • offsetWidth/offsetHeight:元素宽高,包含边框和滚动条
  • scrollWidth/scrollWidth:内容宽高,不包含边框和滚动条
  • offsetLeft/offsetTop:元素与父元素内容区域左/上边的距离
  • clientLeft/clientTop:元素与自身边框外边沿左/上边的距离
  • scrollLeft/scrollLeft:可滚动元素的内容左/上边沿与元素左/上边沿的距离

URL 转义函数

encodeURI 用于转义整个 URL,不会对下列字符转义:数字、字母、~ ! @ ## $ & _ ( ) = : / , ; ? + '。 encodeURIComponent 用于转义查询字符串,不会对数字、字母、~ ! _ ( ) - _ ' .。

CSS

块级格式化上下文

Block formatting context(BFC)。表示一个独立的渲染区域的一个 DOM 元素,使得元素内容和元素外部相互隔离,包括定位、层级等不会相互影响。

比较明显的特点是:父元素高度包含 float 元素高度。

触发条件:

  • 根元素
  • position 为 absolute 或 fixed
  • display 为 inline-block、inline-flex、inline-table、table
  • float
  • ovevflow 不为 visible

层叠上下文

元素有层叠等级,决定了元素在 Z 轴上的排列顺序。在一定条件下,元素称为层叠上下文元素,其子元素的层叠等级受限于上下文的层叠等级。而层叠上下文于其它层叠上下文元素之间也有层叠等级关系。

层叠等级有一定的规则,从上到下为:

  1. z-index>0
  2. z-index: auto / z-index: 0
  3. inline/inline-block 水平盒子
  4. float 盒子
  5. block 盒子
  6. z-index < 0
  7. 层叠上下文 background/border

创建层叠上下文的方法:

  • 根元素
  • 普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值
  • CSS3 中的一些新属性

优先级

从高到低为:

  1. !important
  2. 行内样式
  3. 选择器优先级
  4. 后写覆盖先写

不同的选择器有不同的权值,一个样式的选择器优先级由所有选择器的权值想加得出。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部