popring's Blog

探索、记录、分享

2021年度总结

这是在我入职后,一位同事机缘巧合下送给我的一句话。

这个世界缺的不是完美的人,而是从心底给出的真心、正义、无谓与同情。

—出自《无问东西》

这句话是我今年说的最多的口头禅,无论是对自己,还是对别人。

Everything will be okay in the end. If it’s not okay, it’s not the end. 

一切都将会好起来的。

阅读全文 »

可替换元素(置换元素)

浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input> 标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的<img><input><textarea><select><object> 都是置换元素。这些元素往往没有实际的内容,即是一个空元素。

置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。

不可替换元素(非置换元素)

(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。

例如:标签

1
<label>label中的内容</label>

牛客题目

mdn 可替换元素

  • GET在浏览器回退时是无害的,而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark,而POST不可以。
  • GET请求会被浏览器主动cache,而POST不会,除非手动设置。
  • GET请求只能进行url编码,而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的,而POST么有。
  • 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
  • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
  • GET参数通过URL传递,POST放在Request body中。

额外可以聊

  • GET 的body中也可以放数据,但是由于规范中不建议,所以大多数浏览器也没有处理,也就导致不会接收到 GET请求中body的数据
  • URL限制长度,在http statue code(状态码)中 415 就是URL Too Long。本身协议没有限制长度,但浏览器会有限制,太长了也不方便后端、爬虫处理。

GET 和 POST 到底有什么区别? - 大宽宽的回答 - 知乎

概括

  • 客户端发起连接,提供协议版本号、随机数(Client random)、支持加密方法
  • 服务端收到后,确认双方的加密方法,然后生成随机数(Server random),以及自己的数字证书,发送给客户端
  • 客户端收到后,确认数字证书是否有效,然后生成新的随机数(Premaster secret),使用数字证书加密这个随机数,发送给服务端。
  • 服务端使用自己的私钥,对随机数进行解密。
  • 此时服务端和客户端就可以根据前面约定的加密方法进行通信,使用前面生成的三个随机数生成 **对话秘钥(session key)**,用来加密接下来的整个对话过程

细节

  • 数字证书的加密和解密过程是属于非对称加密,在之后使用对话秘钥加密的方式是对称加密

图解SSL/TLS协议

SSL/TLS协议运行机制的概述

大致分为以下几个过程

  • URL 解析
  • DNS 解析
  • TCP 握手
  • 检查是否有缓存
  • 构建 DOM 树,解析 html
  • 构建 CSSOM
  • 执行 JavaScript 代码
  • 构建渲染树:根据 DOM 树和 CSSOM 生成渲染树
  • 根据渲染树对每个节点布局在正确位置
  • 对每个元素进行绘制
阅读全文 »

更多面经请移步:https://www.nowcoder.com/profile/464647589/myDiscussPost

微店

一面电面(25min 左右)

面了不到半个小时,我以为凉了,,,没想到中午约二面了

  • 自我介绍
  • ES 6 class 继承怎么理解
  • 深浅拷贝
  • 实现深拷贝思路
  • 如何判断函数、对象
  • 从 url 输入一个地址到页面渲染经历了什么
  • https 建立过程
  • 浏览器如何渲染页面,渲染过程(之前这里说的不够详细)
  • http 缓存(协商缓存少说一个,尴尬)
  • 强缓存返回 http code 是多少,协商缓存返回的 http code 是多少
  • http 2.0 聊一下
  • 自己实现一个脚手架,你觉得需要考虑什么
  • webpack 的 loader 和 plugin有自己写过,去了解它的原理吗
  • 总结自己,竞争前端岗位,你觉得自己有哪些优势

二面视频面(40min)

基本毫无准备,一天面两次,还是有点累的。

话说面试感觉面试官怕我是过来练手的,太难了。

  • 自我介绍
  • 介绍目前正在做的项目,在项目中负责的部分
  • 项目中遇到的困难
  • 栈和堆有什么区别
  • 有没有深入了解过 Vue,了解的 Vue 原理有哪些
  • 从 url 输入一个地址到页面渲染经历了什么
  • 知道的 HTTP 请求头有哪些
  • referer 知道是什么吗
  • 什么是跨域,如何解决
  • 浏览器本地缓存有什么,localStorage、sessionStorage、cookie 区别
  • cookie 不能使用 js 获取或设置吗(上一题说区别时候,说cookie 一般只在服务端调用就被问了)
  • cookie 有什么字段,http-only 作用是什么
  • ts 中对 装饰器 Decorators 怎么理解
  • 垂直居中布局
  • px、rpx、em、rem、vw/vh 区别
  • 有没有关注新技术的发展
  • 聊一下什么是微前端(上一个问题,我提到了一嘴,就被问了)
  • 场景题,移动端一个商品搜索结果页面,如果数据过大,怎么解决?(其实这里没有 get 到面试官想问的点,所以我就大概提了下服务端渲染和分页)
  • 还能怎么解决,导致前端卡顿,怎么优化(长列表怎么优化,滑动窗口)
  • 服务端渲染是什么
  • AST 有没有听过
  • 你觉得自己竞争有什么优缺点
  • 反问阶段