0
点赞
收藏
分享

微信扫一扫

前端面经2

眼君 2022-04-20 阅读 70
前端

第一家小公司:

  1. html文档流:
    网页在解析时,遵循从上向下,从左向右的顺序。

1、从上至上,从左至右的布局。 
2、符合html中标签本身含义的布局,比如某些标签独占一行。有些标签属于行内元素等。

文档流,也称为普通流。
css中的定位机制,共三种:

  • 正常的文档流
  • float :使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。
  • postion: position 的四个值:static、relative、absolute、fixed。
    1. absolute:元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位
    1. relative:半脱离文档流,相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局。定位方式是相对其原先在文档流中的位置进行定位的。一般设置relative是为了让absolute有个相对定位的参照。
    1. fixed:完全脱离文档流,相对于浏览器窗口进行定位。
  1. flex布局:主轴由dirctions决定
  • flex-wrap:如何换行
  • justify-content属性定义了项目在主轴上的对齐方式。
  • align-items属性定义项目在交叉轴上如何对齐。
  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    这里有个小问题,很多时候我们会用到 flex: 1 ,它具体包含了以下的意思:
  • flex-grow: 1 :该属性默认为 0 ,如果存在剩余空间,元素也不放大。设置为 1  代表会放大。
  • flex-shrink: 1:该属性默认为 1 ,如果空间不足,元素缩小。
  • flex-basis: 0%:该属性定义在分配多余空间之前,元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ,即项目本身大小。设置为 0%  之后,因为有 flex-grow  和 flex-shrink  的设置会自动放大或缩小。在做两栏布局时,如果右边的自适应元素 flex-basis  设为 auto  的话,其本身大小将会是 0 。​
  1. transfrom了解吗:使用硬件加速
    解析CSS样式,解析的顺序是浏览器的样式 -> 用户自定义的样式 -> 页面的link标签等引进来的样式 -> 写在style标签里面的内联样式

CSS最终表现 查找并计算样式 -> 排布 -> 绘制 -> 组合层
transform是位于Composite Layers层 不会引起重拍重绘

  1. 垂直局中布局:
  • 利用定位+margin:auto:父级设置为相对定位,子级绝对定位
  1. var变量提升
  2. 原型链
  3. 相对定位 绝对定位:
  4. script 标签中 defer 和 async 的区别?
  • script :会阻碍 HTML 解析,只有下载好并执行完脚本才会继续解析 HTML。
  • async script :解析 HTML 过程中进行脚本的异步下载,下载成功立马执行,有可能会阻断 HTML 的解析。
  • defer script:完全不会阻碍 HTML 的解析,解析完成之后再按照顺序执行脚本。
  1. html语义化作用:
  • 让人更容易读懂(增加代码可读性)。
  • 让搜索引擎更容易读懂,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重(SEO)。
  • 在没有 CSS 样式下,页面也能呈现出很好地内容结构、代码结构。
  1. ssr:
  • 利于SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
  • 更快的内容到达时间,页面渲染的更快。
    SSR初始化数据:
    服务端渲染和浏览器渲染是有区别的,在服务端只有beforeCreate和created两个生命周期,因为SSR只会生成HTML字符串,不会渲染DOM结构,也就没有beforeMount和mounted,也就不会进行更新,所以也不会有beforeUpdate和updated。
  1. http结构:请求行、消息报头、请求正文,状态行、消息报头、响应正文
  • 通用头
  • 请求头:请求头用于说明是谁或什么在发送请求、请求源于何处,或者客户端的喜好及能力。
  • 响应头:响应头向客户端提供一些额外信息,比如谁在发送响应、响应者的功能,甚至与响应相关的一些特殊指令。
  • 实体头:提供了有关实体及其内容的大量信息,从有关对象类型的信息,到能够对资源使用的各种有效的请求方法。
  1. http和https不同之处 :
  • Http协议运行在TCP之上,明文传输,客户端与服务器端都无法验证对方的身份;Https是身披SSL(Secure Socket Layer)外壳的Http,运行于SSL()上,SSL运行于TCP之上,是添加了加密和认证机制的HTTP。二者之间存在如下不同:
  • 端口不同:Http与Http使用不同的连接方式,用的端口也不一样,前者是80,后者是443;
  • 资源消耗:和HTTP通信相比,Https通信会由于加减密处理消耗更多的CPU和内存资源;
  • 开销:Https通信需要证书,而证书一般需要向认证机构购买;
  • Https的加密机制是一种共享密钥加密和公开密钥加密并用的混合加密机制。
  1. https如何加密传输:
    SSL的实现这些功能主要依赖于三种手段:
  • 对称加密:采用协商的密钥对数据加密
  • 非对称加密:实现身份认证和密钥协商
  • 摘要算法:验证信息的完整性
  • 数字签名:身份验证
  1. http状态码
  • 1xx:指示信息–表示请求已接收,继续处理
  • 2xx:成功–表示请求已被成功接收、理解、接受
  • 3xx:重定向–要完成请求必须进行更进一步的操作
  • 4xx:客户端错误–请求有语法错误或请求无法实现
  • 5xx:服务器端错误–服务器未能实现合法的请求
  1. 异步操作:settime一定是设置的时间执行吗(比执行时间长)
  2. 浏览器原理:监听器 解析器
  3. ES6新特性
  4. 三次握手
  5. 四次挥手
  6. 为什么要有三次握手与四次挥手
  7. 双向数据绑定:
  8. v-if v-show
  9. 隐藏元素方法:display:none后,元素在页面上将彻底消失
  10. vue生命周期
  11. 数据通信
  12. call apply bind
  • apply:apply接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入
  • 改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次
  • bind:bind方法和call很相似,第一参数也是this的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
    改变this指向后不会立即执行,而是返回一个永久改变this指向的函数
  • call:call方法的第一个参数也是this的指向,后面传入的是一个参数列表,跟apply一样,改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次
  1. vue computed watch 使用场景
  • computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果
    计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例,通过计算出来的属性不需要调用直接可以在 DOM 里使用
  • watch一个对象,键是 data 对应的数据,值是对应的回调函数。当 data 的数据发生变化时,就会发生一个回调
    如果一个数据需要经过复杂计算就用 computed
    如果一个数据需要被监听并且对数据做一些操作就用 watch
  1. 数组遍历的方法
  • forEach 循环接受三个参数,[第一参数]为数组中的每一项,[第二参数]为数组的下标,[第三个参数]为你要遍历的数组本身。第二和第三参数都是可选的。

arr.forEach((item, index, arr) => {
    console.log(item)
});

# 输出结果:
# 1 2 3 4 5 6 7 8 9

  • map循环返回一个经过调用函数处理后的新的数组

const res = arr.map((item,index,arr)=>{
    return item + 1
})
console.log(res)

# 输出结果:
# [2, 3, 4, 5, 6, 7, 8, 9, 10] 

  • filter() 循环返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

const res = arr.filter((item,index,arr)=>{
    return item > 3;
});
console.log(res)

# 输出结果:
# [4, 5, 6, 7, 8, 9] 

云联万维+谷斗科技:

  1. 闭包原理
  2. 作用域
  3. 垃圾回收
  4. 原型链 原型链继承
  5. 两个实例形成关系 a.proto=b
  6. url到展示页面过程
  7. 怎么生成的虚拟DOM
  8. 两个函数实现继承
  9. 对战游戏封装成类 之间的关系是什么
    别的忘了

税友:

  1. 水平居中实现
  2. 数组去重
  3. vue生命周期
  4. 常用数组方法
    忘了…
举报

相关推荐

0 条评论