Fridolph Notes

Appearance

A1 ​

1. 简单的自我介绍，做过哪些项目，使用哪些技术栈？ ​

您好，我叫付寅生，支付的付，因为寅时出生，所以叫付寅生。喜欢动漫、摄影和运动，最爱棒球，位置是一垒和投手。 目前就职于成都网思科平，做了威胁分析、robin文件检测，流量监控系统等，目前主要是负责EDR威胁响应系统，公司前端主要是webpack+vue技术栈。

2. 如何看待前端框架选型？ ​

结合自身及公司来说，在该时间节点上最适合的才是最好的

  • 快速开发
  • 前后端分离
  • 可扩展、可维护

3. 主流框架的数据单向/双向绑定实现原理? ​

双向绑定 = 单向绑定(数据一份、setState就render，手动收集合到原数据) + UI事件监听 (双向收集数据的过程自动 - 由框架来做了)

vue数据双向绑定是通过 Object.defineProperty 数据劫持结合发布者-订阅者模式的方式来实现的

4. React VirtualDOM 是什么？如何实现？ ​

  • 一个用来描述真实DOM节点的JavaScript对象

5. react和vue的比较 ? ​

  • react 和 vue 构建方式类似通过各自脚手架搭建用webpack打包，前后端分离的是现代前端框架

  • 数据是否可变

    • React整体是函数式思想，把组件设计为纯组件，状态和逻辑通过参数传入，在React中，是单向数据流，易记录状态变化，易追朔数据源
    • Vue是响应式思想，基于数据可变，对每个属性进行依赖收集，通过watcher来监听

  • 更新

    • React setState 进入重新渲染流程，可用shouldComponentUpdate钩子控制是否更新
    • Vue 当响应式属性变化时，有watcher派发nofity，触发patch进行前后virtual dom对比然后更新dom

  • 编码和操作

    • React 是all in js，jsx. 类的声明方式，易与ts搭配
    • Vue vue-template单文件，自己的模版语法，

双向绑定把数据变更的操作隐藏在框架内部，双向和单向只不过是框架封装程度上的差异，本质上两者是可以相互转换的。UI控件 中(通常是类表单操作)，我会使用双向的方式绑定数据 其他则为单向

6. React Diff 算法 ? ​

diff算法

  • js对象描述DOM树结构，然后用该树构建真正DOM树
  • 状态改变时，重新构造对象树，然后对比并记录新旧树的差异
  • 将差异用于重新构建真正DOM，从而更新视图

7. 观察者模式实现 ? ​

8. http报文头部有哪些字段? 有什么意义 ? ​

  • General
    • Request URL
    • Request Method
    • Status Code 状态码
    • Remote Address 根节点
    • Referrer Policy referrer策略
  • Request Header
    • accept MIME，告诉服务器所支持格式
    • accept-encoding 支持的编码格式
    • accept-language 当前支持语言
    • cache-control 强缓存策略
    • Expires 同上
    • cookie 携带的cookie
    • if-none-match 协商缓存策略
    • if-modified-since
    • referer 来源（防盗链）
    • user-agent 浏览器
  • Response Header
    • cache-control: 服务端强缓存策略
    • content-encoding 内容编码
    • content-type 返回文件的格式
    • date 日期
    • etag 唯一内容标识
    • server: Tengine
    • set-cookie

9. 移动端高清方案如何解决 ? ​

  • lib-flexible
  • hotcss

参考 https://www.cnblogs.com/lovesueee/p/4618454.html

10. webpack的原理, loader 和 plugin 是干什么的? 有自己手写过么 ? ​

11. 简述从网页输入url到网页展示的过程发生了哪些事情 ? ​

12. SSR 和 客户端渲染有什么区别 , vue是如何实现绑定事件的 ? ​

  • 客户端
    • 下载html <div id="root"></div> <script src="./bundle.js"></script>
    • 加载css、js等资源
    • 执行js
    • 渲染页面
  • SSR
    • 下载html (服务端返回可渲染的html页面，已包含基本框架和css)
    • (没有上面的过程，所以用户看到页面会更快)
    • 渲染页面
    • 对SEO更友好

13. 聊聊前端安全 ​

  • XSS 跨站脚本攻击 Cross Site Scripting
    • 原理：攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码~ SQL注入也属于这一类
    1. 前台输入过滤，进行转义
    2. 后台输出编码。服务器端输出到浏览器的数据
    3. 设置HttpOnly Cookie
  • CSRF 跨站请求伪造 Cross Site Request Forgery,
    • 原理：CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作
    1. 验证码
    2. Referer Check
    3. CSRF Token
  • 文件上传漏洞
    1. 检查服务器是否判断了上传文件类型及后缀。
    2. 定义上传文件类型白名单，即只允许白名单里面类型的文件上传。
    3. 文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。

14. 浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ? ​

高程上写，事件绑定在冒泡阶段可以最大限度兼容各大浏览器

  • 事件捕获阶段
  • 事件目标处理阶段
  • 事件冒泡阶段

addEventListener(event, fn, useCapture)

  • preventDefault 阻止默认事件
  • stopPropagation 阻止冒泡

15. 面向对象如何实现? 需要复用的变量 怎么处理 ? ​

  • 组合继承
  • es6 class extends

16. 移动端300ms延时的原因? 如何处理? ​

https://www.cnblogs.com/chaojidan/p/4517895.html

17. 你觉得自己在前端工作的最大的优点是什么 拿实际工作的内容举例 ? ​

18. 工作中最出色的点，和你最头疼的问题？ ​

19. 平时如何学习？最近接触了解了哪些新的知识？ ​

  • 琐碎时间 （上班，吃饭，地铁时）看早读课、文章推送、刷知乎、掘金

  • 小段时间 （周五下，睡前）看专栏或书籍

  • 大段时间 （每晚、周末）视频、敲代码，实战

  • graphQL

  • vue3.0改动

  • react 16.8.0改动

  • 前端测试Jest、Enzyme

共 20 个模块，1301 篇 Markdown 文档。

Built with VitePress