本文介绍了前端开发中的关键技术和工具，包括UI框架如Bootstrap、SemanticUI和TailwindCSS，SEO优化的重要性，Node.js和包管理工具，CSS预编译和自动化工具，React、Vue和Angular的组件化开发，以及性能优化、安全和团队协作的最佳实践。
UI 框架提供了页面的基本 UI 样式和布局系统，比如按钮、对话框、轮播图，省了自己去开发，常用的有 Boostrap, Semantic UI， Tailwind CSS。
#SEO
SEO 全称是 Search Engine Optimization，搜索引擎优化。咱们常见的百度、谷歌这些搜索引擎会定期爬取线上的网站内容，然后进行收录，网站内容质量优秀、结构良好、访问量大的还会排名比较靠前。为了给自己的网站增加曝光量，这就需要针对搜索引擎给咱们的网站添加一些内容，比如关键字。
如何带着 SEO 的思维将 MDN 的 Web 文档写的更符合搜索引擎展现
#Node.js、npm / yarn
因为 Node.js 的出现，JavaScript 的开发可以脱离浏览器了，这样就产生了好多借助 Node.js 来写前端代码的方式，然后用相应的打包工具去打包成浏览器可用的代码。这样的好处是，咱们可以充分利用 node.js 的包管理工具来方便开发，比如使用 npm 或者 yarn 管理项目的依赖。
#CSS 预编译
咱们在写 CSS 的时候可能一段代码要重复好多次，写一连串的选择器，重复的属性组合等等。这时 CSS 预编译工具就派上用场了，比如 SASS、LESS，它们支持 CSS 选择器嵌套、定义变量、Mixins、函数、继承等等。
#自动化工具
自动化工具有 grunt、gulp 等，可以监控文件变动，或者做一些自动化操作，比如编译 SASS 或 LESS 的代码为 CSS 等。
#React, Vue, Angular
这里就不得不提当下十分热门的前端开发框架了，React、Vue、Angular 三大件。它们都提供组件化开发的方式，这就让前端开发模式发生了巨大的变化，以往以页面为核心现在转为了以组件为核心，有了这些组件可以方便的在不页面进行复用。另外基于状态的数据管理，也让改变组件状态变得十分简单。这三个框架可以都学，但是工作中基本上只会用到一个，深入一个就可以了。至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。
#模块化 CSS
因为 React 等组件化工程的出现，CSS 分散在不同的组件中，很容易因为命名冲突而导致样式被覆盖，模块化的 CSS 开发方式通过使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免这些问题，它们也提供了其它类似 SASS/LESS 的功能。
#工程化工具
所谓工程化的工具，也就是打包工具，前端项目的各种 JS、SASS 源代码可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它们打包成一个单一的 js 和 css 文件，它们支持按需打包，用到的代码才会打包到最终产品上，没用到的则不会。另外图片等静态资源也可以指定规则进行打包。
#测试工具
没有人想要不健壮的代码，在改动一个地方之后引起全局崩塌~，咱们写好的组件需要进行详尽的测试才能确保不出问题，另外也方便咱们工程师节省时间，因为只要添加的新功能保证测试结果还是正常，那么就不需要再人工去测试了。常用的 UI 测试工具有 jest, enzyme 等等。
#高级技能
在把编写网页的技能掌握熟练以后，就要从多端开始拓展自己的技能了，另外还要深入已经掌握的技能。
#TypeScript
TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码可以编译成普通的 JavaScript，但是编写的时候支持强类型，并且支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。
#移动开发
移动开发包括移动的页面 H5 开发、小程序和移动 APP 开发，好在这些有统一的开发平台，使用 React 或者 Vue 就可以进行一次开发，多平台使用。React 生态的有开发移动 APP 的 React Native，开发多端平台的 taro。 Vue 有多端开发的 uni-app。
#桌面开发
桌面应用到现在还是有用武之地的，比如音乐软件，聊天软件，写作软件等等，这些也可以用前端技术开发，具体的工具有 eletron、proton native 等等。
#静态网站生成工具
静态网站因为是纯 html、css 和 JavaScript 网站，所以拥有最快的速度、对 SEO 搜索引擎优化友好，最适合用于数据不常变动的展示、博客类的网站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。
#SSR（服务端渲染）
如果使用 React、Vue 等前端框架开发网站，那么最终的页面源代码是没有 html 的，因为它们是用 JavaScript 去动态生成 html 代码，这样对 SEO 很不利，不过有了 serer side rendering，服务端渲染技术，就可以解决这个问题，它是把 JavaScript 生成好 HTML 之后，再把页面发送给浏览器。常用的有 react 系的 next.js，vue 系的 nuxt.js。
#GraphQL
GraphQL 是一种查询语言，跟普通的 restful 结构不一样，它是按照类型来组织数据的，不同的类型之间也会有对应关系，就像数据一样，前端开发者根据自己的需要编写 graphql 语句来按需查询想要的数据，它的这种模式非常适合 React 这种项目结构的开发。
#性能优化
性能优化的概念比较广泛，而且根据应用的用户量、用户类别而不同。总体来说就是提高页面首次加载的时间、动画执行的效率、事件响应的效率。这些可以通过优化代码结构、文件大小、DNS 缓存、lazy loading 等来实现。
书籍：Web 性能权威指南
#安全
安全也是一个宽泛的概念，要了解 CORS（跨域资源共享）, XSS（跨站脚本攻击）, CSRF（跨站请求伪造） 等常见安全问题，也要了解 HTTPS 等安全协议，要尽量以周全的形式考虑，不要相信任何用户的输入，严格检查需要接收用户输入的地方。
书籍：Web 安全测试
#工作与团队技能
工作与团队技能是在工作中所必备的，无论是初级还是高级前端工程师，这些只要在工作遇到了，就都需要掌握。
#Git
Git 是一个分布式的代码协作工具，几乎所有的公司都在用。Github 是 git 的一个远程仓库，咱们可以把代码发布到 github 上，既可以作为公开的向全世界展示自己的代码、进行合作，也可以作为私有的只限自己或者公司内部使用。
书籍：精通 Git 第 2 版
#Docker
Docker 是一种新的虚拟化技术，介于虚拟机和操作系统之间，它所用的资源少，并且能自动化管理镜像的运行环境和集群。因为前后端开发的分离的方式，大型的前端应用也会部署到 Docker 上。
#CI
CI，持续集成，是一个自动化的部署过程，开发人员只需要改动代码，提交到 git 仓库，CI 系统会抓取代码进行打包部署并发布，节省了人工运维的时间。
#ESLint 和 Prettier
代码合作经常会有风格和规范不统一的情况。ESLint 除了可以检查语法错误外，还可以定义开发规范，比如缩进字符的数量、命名方式等，而 prettier 则可以根据一些规范自动格式化代码。
#最新技术
#WebAssembly
Web Assembly 是浏览器新支持的编程语言，用于辅助 JavaScript。确切的说，它不是一个编程语言，咱们可以用它的编译器编译其它语言，用来编写更强大的功能，它目前支持 c++和 rust
#Web Components
Web Components 是类似 React、Vue 开发的方式，但是是 JS 原生支持的方式，不再需要依赖额外的库。它的核心概念有 Custom elements（自定义元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理，区别，亮点，作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
-
项目里用到了react，为什么要选择react，react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗？
-
React的jsx，函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西，接受几个参数
-
redux请求中间件如何处理并发
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
