popring's Blog

前端打工人一枚,如果有有趣的问题,欢迎电邮,koler778@gmail.com。

0%

  1. 找到host文件位置,window下位置如图所示,mac下host位置 /etc/hosts

  2. 按照下图规则添加host记录

  3. 打开 free-ss.site 网站

  4. V 账号 => v2ray,S账号 => shadowsocks

  5. 使用代理软件添加规则,Windows 下推荐 v2rayN,或者使用 Clash For windows 在win和mac下都可使用,然后就可以畅游网络世界了。

2021年度总结

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

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

—出自《无问东西》

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

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

一切都将会好起来的。

阅读全文 »

Linux入门时做的笔记, shell 相关笔记没有学完不全,以后有空继续学习。

主要为常规的一些命令、压缩打包、权限等。

阅读全文 »

可替换元素(置换元素)

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

例如:浏览器会根据 <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 有没有听过
  • 你觉得自己竞争有什么优缺点
  • 反问阶段