前端底层知识体系构建

1.4.1 组件间通信和传值

❝

Vue组件的通信可以是：子父关系，也可以是子祖关系、兄弟关系。不同的的关系也就意味方式不同，主要包括以下几种方式：

❞

• $parent与 $children

• $emit

• bus $eventBus

• provide与inject

• props 与 $refs

???拓展阅读：

• Vue 组件间通信六种方式[18]

• vue组件通信全揭秘(共7章)[19]

1.4.2 Slot 插槽

❝

来自Vue官方介绍：slot元素作为承载分发内容的出口，简单理解就是“占坑”，子组件预先把位置占好，然后根据业务场景需要，子组件在编写相应的信息

❞

???拓展阅读：

• 细谈 vue - slot 篇[20]

1.4.3 Mixin 混入

❝

mixin提供了一种非常灵活的方式，可以用来分发Vue组件中的可复用功能，借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数也将会在两个都被调用（Mixin中的钩子会先执行）

❞

更多了解mixin实践可以阅读树酱的 ???组件库源码中这些写法你掌握了吗？[21] 中关于组件库mixin的用法

1.4.4 高阶组件

❝

高阶组件也称为HOC，它被描述为一种在组件之间共享公共功能而不需要重复代码的方法。作用在于增强组件的功能，简单定义就是：你向一个方法传入组件，然后返回一个新的组件，这就是一个HOC

❞

???拓展阅读：

• Vue 进阶必学之高阶组件 HOC[22]

• 探索Vue高阶组件[23]

• Vue HOC 高阶组件 实践[24]

1.5 axios

❝

应用离不开请求库，而vue技术栈中请求库谈及最多的，非axios莫属，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，涉及知识内容包括以下几点

❞

• axios 如何做二次封装（拦截器）？

• 如何结合axios做API管理 ？

• axios 如何取消请求？

• token过期如何在axios刷新？

关于前三者的学习可以阅读树酱的???如何更好管理 Api 接口[25]

???拓展阅读：

• 聊聊 Vue 中 axios 的封装[26]

• 封装 axios 拦截器实现用户无感刷新 access_token[27]

1.6 vue-cli

❝

vue-cli是vue官方的脚手架，可以使用Vue-cli来快速构建项目，且对 Babel、TypeScript、ESLint、单元测试等提供了开箱即用的支持，简化了部署、打包、代码扫描、单元测试等流程，涉及知识内容包括以下几点

❞

• 如何基于vue-cli部署项目？

• 如何配置vue.config.js 打包性能最佳应用？

• 本地开发跨域如何解决？

1.6.1 vue-cli 部署项目

❝

前端部署离不开几个环境包括本地、mock、开发、测试、预生产、生产等等，需要根据不同环境定义不同的配置文件（管理api等），还需要定义好编译脚本（packjson中的scripts），还需要注意publicpath的定义是否需要修改

❞

更多了解可以阅读树酱的???基于 Vue-cli 3x的项目部署[28]

???拓展阅读：

• vue官方：环境变量和模式[29]

• publicPath的配置[30]

1.6.2 配置最佳打包

❝

前端SPA应用上线服务器本质上是编译好的静态资源上传，那编译打包就是影响性能较大的因素，那么如何配置vue.config.js打包性能最佳，可以阅读第4节的webpack配置插件，主要解决这几个问题

❞

• 针对请求数进行优化: (去除prefetch)

• 公用代码提取，使用cdn加载: (config.externals)

• 配置代码压缩

???拓展阅读：

• 我在项目中是这样配置Vue的[31]

1.6.3 本地开发devServer

❝

本地开发中存在跨域问题？我们可以通过vue.config.js中devServer配置来做反响代理解决！如何做？看下面这篇

❞

???拓展阅读：

• vue.config.js中devServer配置[32]

2.工程化知识体系

---

❝

关于前端工程化，本质上是通过规范和工具来提高前端应用质量，树酱在之前曾梳理过，更多了解请阅读 ??? 前端工程化那些事[33]，本文在原来文章的基础上拓展和补充

❞

2.1 Git

❝

众所周知，git不单单只是代码管理工具，还可以做分支管理、commit message检验、Pull Request等

❞

???拓展阅读：

• 一些Git规则和 Git 工作流[34]

• 优雅的提交你的 Git Commit Message[35]

2.2 Npm

❝

只会npm install? npm其实提供很多功能包括如下几个常用的

❞

• npm publish ：发包管理

• npm link ：用来在本地项目和本地npm模块之间建立连接，可以在本地进行模块测试

???拓展阅读：

• vue组件发布npm最佳实践[36]

• 13 个 npm 快速开发技巧[37]

2.3 构建工具

❝

前端项目构建工具很多包括Rollup、Webpack、Parcel，然而最近在Vue.js 3.0 Beta里，尤大大提到他在做的这个小工具 vite，关于vite是否能替代wepack？

❞

• Webpack：适⽤于⼤型项目构建：webpack目前生态最完善，应用场景更多，社区人气高，有强⼤的loader和插件⽣态

• Rollup：适⽤于工具库的打包: 可以将各个模块打包进⼀个⽂件中，具备 Tree-shaking 来删除⽆⽤的代码,降低代码体积,但是不具备webpack强大的插件生态，定位更适用于聚焦于库的打包

• Parcel：适⽤于试验: 虽然无配置的优势，可以快速打包应用，且打包效率，但是不具备Tree-shaking，导致输出文件偏大

???拓展阅读：

• Vite 原理浅析[38]

2.4 CI/CD 和项目部署

❝

自从有了DevOps，持续集成，持续交付（CI/CD）成了项目部署主流，前端SPA项目部署需要打包???应用，我们可以结合 Jenkins + Docker + Nginx 来完成，如果是SSR应用还需要用PM2来管理进程

❞

更多了解可以阅读树酱的???前端运维部署那些事[39]

???拓展阅读：

关于DevOps和工程化系列 推荐 shanyue山月[40]老哥的专栏文章

• 如何使用 docker 部署前端项目[41]

• 前端部署的发展历程[42]

3 Node知识体系

---

❝

树酱之前梳理了两篇关于node的面试官系列，感兴趣的童鞋可以看看面试官问你关于node的那些事（基础篇）[43] 和 面试官问你关于node的那些事（进阶篇）[44]。同时对于node平时工作业务场景少，树酱的node体系也比较小，后期会调整补充，目前可能不太适合高阶的童鞋。

❞

???拓展阅读：

• 有助于理解前端工具的 node 知识[45]

• 一篇文章构建你的 NodeJS 知识体系[46]

4.性能优化

---

4.1 性能指标

❝

性能指标是用来通过获取数据来衡量应用的性能，并通过数据来体现出性能的好坏，常用的性能指标有以下几种

❞

我们也可以通过lighthouse这个工具来测试下我们当前的应用

• FCP: 首次内容绘制

• FMP:首次有效绘制

• TTI：首次可交互时间

下通过页面一个手机页面加载截图来帮助我们理解性能指标时间点所带来的体验

???拓展阅读：

• Lighthouse 测试内幕[47]

• [蚂蚁金服如何把前端性能监控做到极致?] (https://www.infoq.cn/article/Dxa8aM44oz*Lukk5Ufhy)

• 以用户为中心的性能指标【译】[48]

4.2 webpack

4.2.1 代码分割

❝

在业务场景中，项目中可能会引入很多第三方库，这些库可能跟业务无关且内容也可能不变，如果都打包到一起，那么用户通过浏览器想要浏览最新效果就必须重新执行完新的文件，如果能把不变的代码都单独打成一个文件，且文件名每次都一样。那么浏览器可以从缓存中读取，而不是重新发起请求，或者将公共部分去重，那这个时候代码分割就起了个重要的作用

❞

webpack 使用 SplitChunksPlugin去重和分离 chunk，而在vue-cli 3中是在的vue.config.js中只要配置chainWebpack中的splitChunks即可，如下：

???拓展阅读：

❝

引用一句话：代码分割的本质，就是在**“源码直接上线”「和」“打包为唯一的脚本main.bundle.js”**这两种极端方案之间寻找一种更符合实际场景的中间状态，用可接受的服务器性能压力增加来换取更好的用户体验。

❞

• webpack官方：代码分离[49]

4.2.2 UglifyJs 压缩

❝

通过UglifyJSPlugin来对js文件进行压缩，以此减小js文件的大小，加速资源加载速度，但是一般在生产环节开启，因为会拖慢了webpack原本的编译速度

❞

4.2.3  gizp  压缩

❝

我们可以使用compression-webpack-plugin插件进行压缩，相当于gzip的效果

❞

我们在vue-cli 3下的vue.config.js中configureWebpack配置如下：

4.2.4 Tree-shaking

❝

Tree-shaking也叫摇树优化，是webpack 2之后引入原本rollup特有的Tree-shaking。用来将无用代码移除。而tree-shaking 是在 ES6 modules 的静态特性基础上才得以实现的，也就是说只有你使用到 ES6 module  才能使用 tree-shaking

❞

???拓展阅读：

• 如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？[50]

4.2.5 webpack-bundle-analyzer

❝

开发中，生产环节或者开发环境我们想对比下，分析报告进行性能优化对比，确定vue项目的性能是否得到完善，可以通过配置webpack-bundle-analyzer插件，他能以图形化的方式展示bundle中所有的模块的构成的各自构成的大小，执行方式：npm run build --report

❞

???拓展阅读：

• vue-cli3配置webpack-bundle-analyzer插件[51]

4.3 Nginx

❝

Nginx对性能的优化思考以下几点：

❞

• 如何在nginx配置gzip ？

• 如何通过设置expires 缓存来调优？

• 如何在负载均衡做优化性能？

关于Nginx 体系化学习可以阅读树酱的Nginx那些事[52]

4.3.1 Gizp

❝

开启Nginx gzip，压缩后,静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,带来更好的响应和体验

❞

4.3.2 静态资源缓存设置

❝

有些静态资源更新频率低或者不更新，我们可以通过设置expires来配置缓存时间，以此来达到优化性能作用，那怎么配置呢？

❞

假设我想通过web应用的图片缓存一周，那你可以在nginx中配置如下，配置完之后一周之内的资源只会访问浏览器的资源，而不是去请求Nginx

• ???前端缓存那些事[53]

4.3.3 负载均衡

❝

众所周知，负载均衡器可以通过分配其他的服务器给用户，来增加的网站的稳定性和响应速度，而且负载均衡器有四种常用方式，这里要提的是响应时间来分配的模式，可以让多台服务器竞争，找出相应最快的并返回内容给用户，配置如下

❞

???拓展阅读：

• Nginx在高并发下的性能优化点！[54]

4.4 其他

4.4.1 预请求prefetch

❝

prefetch是link元素中的rel属性值，通过定义该属性，让浏览器加载下一个页面可能会使用到的资源。加速下一个页面的加载速度，常用的应用场景在SSR中，首页的资源加载都使用preload，而非首页的其他路由的资源，则用prefetch，那两者又有啥区别呢？看下面

❞

• preload 是通知浏览器，页面必定需要的资源，但浏览器一定会加载这些资源

• prefetch 是通知浏览器，页面可能需要的资源，但浏览器不一定会加载这些资源

???拓展阅读：

那发现请求数增多，是因为我们页面预先渲染了其它组件，我不想要预加载，我应该怎么处理？

❝

可以在vue.config.js 中delete 掉 preload 与 prefetch

❞

那dns-prefetch又是啥？跟prefetch一样吗？

❝

假设现在我们访问百度baidu.com，这个时候需要DNS把域名先转化为对应的 IP 地址，这过程非常耗时。可以通过DNS prefetch 分析这个页面需要的资源所在的域名，在浏览器空闲时提前将这些域名转化为 IP 地址，减少DNS的请求次数，进行DNS预先获取

❞

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）