Code Monkey home page Code Monkey logo

前端架构师进阶之路

架构

笔记

Vue

React

NodeJS

夸端

  • uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
  • uni-app x是下一代 uni-app，是一个跨平台应用开发引擎。uni-app x 没有使用 js 和 webview，它基于 uts 语言。在 App 端，uts 在 iOS 编译为 swift、在 Android 编译为 kotlin，完全达到了原生应用的功能、性能。
  • Taro是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

ThreeJS

构建工具

CLI

手写代码

工具

CDN 网站

各种解决方案总结

  • 编程规范解决方案
  • 换肤解决方案
  • 多端响应式适配解决方案
  • 性能优化解决方案
    • 前端性能优化
    • Vue 性能优化方法有哪些？
    • 网站性能查看-chrome network 、 Performance 、Lighthouse 扩展程序
    • 数据懒加载 (IntersectionObserver) vueuse 中的 useIntersectionObserver
    • 图片懒加载 (img src 占位图，构建 vue 自定义指令 mounted 生命周期 + IntersectionObserver 更换路径)
    • 打包体积过大 与 CDN 优化
    • gzip、http 缓存、service worker
  • 图表解决方案
  • SVG & Canvas
    • svg
      • svg 的 xml 中 svg 标签需要增加 id 属性，<svg><use xlink:href="./image/svg.svg#idName" style="fill:red"/></svg>
      • path 的 fill 属性需要删除 才可以变色
  • 路由&应用渲染解决方案
    • hash 模式
    • history 模式
    • CSR 客户端渲染是指前端框架(vue、react 等)，在浏览器中执行 JavaScript，根据接口返回的数据进行动态生成 HTML、CSS、和 JavaScript，渲染页面的流程。 浏览器白屏 -> 服务器 -> HTML 页面 -> 渲染页面 -> 想服务器请求 css、js 文件 -> api 接口数据 -> 渲染页面
    • SSR 服务端渲染原理：浏览器 -> 服务器 -> API -> 获取数据 -> 模版+数据 -> HTML 页面 -> 浏览器渲染
    • Prerender 预渲染针对非动态项目的解决方案。Prerender 预渲染是一种在服务器上预先渲染页面内容，并将其缓存到静态 HTML 文件中，当用户访问该页面时，将直接提供缓存的 HTML 文件，而不必生成页面内容，从而提高页面的渲染速度和性能。
    • 同构渲染：首页通过服务端渲染，其他内容通过客户端渲染的一种方式；会使得应用复杂且难以维护。
  • 前端安全解决方案
    • XSS 跨站脚本攻击：攻击者将恶意的脚本注入到合法网站的页面中，使得用户在访问页面时，执行这些脚本，从而达到攻击者的目的。典型案例，v-html 显示评论内容--恶意脚本。
      • 阻止注入：判断评论内容是否合规
      • 阻止执行：DOMPurify 库
    • CSRF 跨站请求伪造：利用用户已经登录了的目标网站的身份，在用户不知情的情况下完成非法操作。
      • 攻击
        • 构造一个假的网页，用户打开，输入信息，
        • 用户登录过的其他网站，伪装请求进行恶意操作
      • 防止
        • token 令牌因为 token 存放于 header 中，只有自己知道。
    • 点击劫持(Clickjacking)： 用户点击操作，网站拦截了点击操作去执行其他事情
      • 需要一个恶意网站，用户访问，利用一个透明可以点击的控件放于想要点击的按钮上面，用户点击进行攻击，例如下载恶意程序
    • 其他安全防护
      • 内容安全策略(CSP):在 meta 中的 content 增加代码，会限制本地访问和指定域名访问，这样图片 CDN 会被拦截了，导致应用问题
      • 严格传输安全(HSTS):在服务端配置响应头用来通知浏览器应该只通过 HTTPS 访问该站点，并以后使用 HTTP 访问该站点的所有尝试都应该自动重定向到 HTTPS
  • WebGL 和 3D 渲染解决方案
    • Canvas：2D 渲染环境
    • OpenGL：跨平台图像编程接口规范
    • WebGL：使用 OpenGL 绘制 3D 图形渲染(canvas 上使用 OpenGL)
      • 框架
        • Three.js 国内使用最多
        • Babylon.js
        • A-Frame 基于 Three.js 的 webVR 框架
        • PlayCanvas 面向游戏开发的 WebGL 引擎
  • 模块化与打包工具解决方案
    • 模块化处理规范 CMD、AMD 和 UMD(兼容 AMC 和 CMD) 基本上不使用了太老了
      • CommonJS(CJS) 基于 Node
      • ES6 Modules(ESM) 基于浏览器
    • 打包模块化构建工具
      • vite
        • devServer 开发服务器，基于原生 ES(ES6 Modules)模块进行实现
        • 打包，使用 Rollup 进行打包
      • webpack 构建整个应用
      • rollup
  • 第三方工具解决方案
    • 统计类工具
      • 友盟统计分析 收费
      • 百度统计
    • 云服务平台
      • 阿里云 使用率最广
      • 腾讯云
      • 七牛云
    • UI 组件库
      • Ant Design 阿里
      • element ui vue 社区维护
      • arco design 字节
      • vant vue 有赞
      • vuetify vue 社区维护
      • material-ui react 社区维护
    • Mock 数据平台
      • YApi
      • APIFox
      • swagger
      • Mock.js 需要代码实现
    • 验证服务工具(行为验证、身份验证(app 本机登录))
      • 极验 需要人工审核
      • 网易易盾 行为验证码
      • 友验 个人免费
    • 设计协作工具
      • 蓝湖
      • 墨刀
      • 摹客

八股文

ECMAScript

视频库

面试

  • 浏览器相关
  • CSS
  • HTML
  • JavaScript
  • VUE
    • vue 组件间通信方式
    • vue3 内置指令
    • vue-router 有几种模式
    • vue 首屏渲染优化有哪些? 图片压缩/懒加载 - 禁止生成 .map 文件 - 路由懒加载 - cdn 引入公共库 - 开启 GZIP 压缩
    • watch 和 computed 区别和使用场景
    • vue2.0&vue3.0 双向绑定的实现原理
    • vue 生命周期函数
    • v-show 和 v-if 有什么区别
    • 什么是 SPA-有什么优点和缺点
    • v-if 与 v-for 那个优先级更高？怎么优化？
      • v-for 优先级更高，因为源码中优先判断 el.for 再到 el.if
      • 同一个标签中的时候，每次渲染都会先执行循环再判断条件，浪费性能
      • 优化方式一是外层增加一个 template 标签做 v-if 判断，内部 v-for 循环
      • 优化方式二 使用 computed 得到最终结果渲染
    • Vue 组件 data 为何必须是个函数？Vue 的根实例则没有此限制？
      • data 必须为函数是为了同个组件多个实例的时候，使用不同的 data(源码中，初始化 data 的时候会检测是否是个 function，是则执行然后赋值给 data，否则使用传入的 data。实际是运行不了，vue 报错提示 data 必须是个函数)
      • 根实例没有限制是因为每次创建是使用 new Vue() 创建不同实例
    • key 的作用&工作原理？
      • key 的作用是高效地更新虚拟 Dom
      • 原理是 Vue 在 patch 过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使 patch 过程更加高效，减少 dom 操作，提高性能。
      • 如果不设置 key，key 就会=undefined，每个元素的 key 都是相等的，可能会引发 bug
    • vue 的 diff 算法？
      • diff 是新旧虚拟 Dom 的对比，将变化的的 Dom 更新到真实的 Dom 上。高效的 diff 算法降低对比的时间复杂度
      • vue 中每个组件都会有一个 watch，组件改变的时候触发更新函数，此时会执行 diff，他会比对上一次渲染结果 oldVnode 和新的渲染结果 newVnode，此过程是 patch-打补丁
      • vue 的 diff 算法遵循深度优先、同层比较的策略；两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同的操作；比较两组子节点的时候，是假设头尾节点可能相同做 4 次对比尝试，如果没有找到相同的节点才按照通用方式遍历查找，查找结束批量删除或者新增处理剩余的节点；借助 key 通常可以非常精确找到相同节点，因此整个 patch 过程非常高效。
    • vue 组件化的理解？
      • 组件系统是 Vue 的核心特效，频繁更新的数据显示定义为组件可以优化性能，因为每个组件有一个 watch，改变后更新组件
      • 组件化可以提供开发效率、复用性等
      • 组件一般分为页面组件、业务组件、通用组件
      • vue 的组件是基于配置的，我们编写的 template 组件的 vue 文件是组件配置，框架会生成其构造函数，它们基于 VueComponent，扩展与 Vue
      • vue 的组件化技术：属性 props、自定义事件、插槽，自定义指令等，用于组件的通信和扩展
      • 组件要遵循单向数据流
      • 组件要高内聚、低耦合
    • MVC、MVP、MVVM 的理解？
      • MVC - user -> C -> M -> V 、 M -> V 、 C -> V ； C 可以操作 V，M 也可以操作 V，user 通过 V 调用 C
      • MVP - M -> <- P -> <- V ; P 负责管理一切操作
      • MVVM - VM 是 ViewModel 类似 P，
      • 三个都是框架模式，主要是为了解决 Model 和 View 的耦合问题
      • MVC 很早期，前端还是模版时期
      • MVP 是 MVC 的进化，P 层处理 MV 之间的通信
      • MVVM 主要是前端中使用，类似于 MVP，VM 解决两者的映射关系
    • Vue 性能优化方法有哪些？
    • Vue3.0 新特性
    • VueX 的使用以及理解
      • vue component ->dispatch -> Action(后端 API 获取数据) ->commit -> Mutations(Devtools) ->Mutate -> State ->Render -> vue component
      • vuex 是 vue 的专用状态管理库，以全局方式管理应用的状态
      • vuex 解决多个组件之间的状态共享问题
      • vuex 并非必须使用
      • vuex 实现单向数据流醉倒数据的响应式
    • vue 的 nextTick，是什么？干什么？实现原理？
      • 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取到更新后的 Dom
      • Vue 在更新 DOM 的时候是异步的。只要侦听到数据变化，Vue 将开启一个队列，并缓存在同一个事件循环中发生的所有数据变更。如果同一个 watcher 被多次出发，只会被推入到队列中一次，避免不必要的 DOM 计算。nextTick 方法会在队列中加入一个回调函数，确保该函数前面的 DOM 操作全部完成后才调用
    • Vue 响应式的理解？
      • 响应式：就是能够使数据变化可以被检测到并对这种变化做出响应的机制
      • MVVM 框架中要解决的一个核心问题就是连接数据层和视图层，通过数据驱动视图更新
      • vue 的数据响应式结合虚拟 DOM 和 patch 算法，让我们只需要操作数据，不用繁琐的操作 DOM
      • Vue2 中数据响应式会根据不同的数据类型进行处理，如果是对象会采用 Object.defineProperty()的方式定义数据的拦截，当数据被访问或者发生变化时，做出响应。对象初始化后在追加属性是不会有响应式的，需要使用 Vue.set/delete 才能生效。如果是数组则通过覆盖数组原型的方法，扩展它的 7 个变更方法，使这些方法可以做出响应。对于 es6 的 Map、Set 这些数据结构不支持等问题
      • Vue3 重写了这部分，使用了 es6 的 proxy 机制代理要这些需要响应式的数据。
    • 如何扩展某个 Vue 组件？
      • 扩展的方式 mixins(vue3 推荐使用 composition api)、slots、extends
      • mixins:一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中。
      • extends:使一个组件可以继承另一个组件的组件选项。
      • slots
      • composition api 逻辑复用

ryanlyc's Projects

imglazyload icon imglazyload

图片懒加载组件。显示区域外的图片不加载。

koa-mongodb icon koa-mongodb

koa2 + mongoDb5 + mongoose + jwt + log4js + redis + websocket

vite-vue3-template icon vite-vue3-template

Vite + Vue3 + TypeScript + Element Plus + sass + ESLint + Prettier + husky + lint-staged + Commitizen + jest

zg-create-app icon zg-create-app

脚手架--根据create-vite改写根据文件夹来选择template js or ts

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.