前端工程师的武功秘籍Mark--持续更新

一、前言

前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。
我希望这篇博客可以帮到大家的，能让大家提升技术水平的。希望能给大家起到一个引导，指路或者解惑的作用。如果大家有什么好的资源，也欢迎分享！😗

二、技能

1.必备技能–CSS 🤟

(1)、基于css的拓展语言，如：sass、less等

引用sass官网一句名言：“世界上最成熟、最稳定、最强大的专业级CSS扩展语言！” 🧐是不是有一点点厉害呢！
事实上就是CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
换言之就是说，CSS预处理器是一种专门的变成语言，在通过这种语言编写之后，再将其编译成正常的CSS文件。
CSS预处理器给CSS增加了编程的特性，例如可以使用变量、函数、以及逻辑。
学习官网：sass：https://www.sass.hk/
less：http://lesscss.cn/

(2)、postcss(css代码转换工具) 🤟

postcss是一个用JavaScript 工具和插件转换CSS代码的工具，可以更舒适的编写css啦🥳
官网：https://www.postcss.com.cn/
常用插件（手动mark）
autoprefixer //自动添加浏览器兼容前缀
postcss-pxtorem //px转rem
cssnano //css压缩
postcss-cssnext //自动添加浏览器兼容前缀
postcss-sprites //多张小图转成雪碧图

(3)、编程式css 🤟，如：styled-components

styled-compnents，正如其名，就是有样式的react-component，是对react组件的再封装，它不仅可以往添加了固定的css样式，还可以通过组件的属性让css和一个组件紧密的联系起来。
除此之外它支持几乎所有sass/less等css预处理器具有的功能，嵌套、&、变量、插值，甚至更加强大！👏👏

(4)、移动端适配（百分比、rem、vw）🤟

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：1px问题、UI图完美适配方案、iPhoneX适配方案、横屏适配、高清屏图片模糊问题…
上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？
这里掘金到了一片好仔细问文章，有兴趣对移动端适配的可以阅读👌
链接：https://juejin.im/post/5cddf289f265da038f77696c

(5)、PC端浏览器兼容方案🤟

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，例如项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了
当然你也可以选择渐进增强或者是优雅降级。

(6)、相应式布局 🤟

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

(7) 、优化策略 🤟

CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。
mark一些技巧，实践型：内联首屏关键CSS（Critical CSS）、异步加载CSS、文件压缩、去除无用CSS；建议型：有选择地使用选择器、减少使用昂贵的属性、优化重排与重绘、不要使用@import。
摘自：https://juejin.im/post/5b6133a351882519d346853f

说了那么多css！！那么来瞧瞧我们的JavaScript吧😜

2.必备技能–js

(1)、按需加载 🤘

无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于加载js文件时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中。
减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。所以按需加载是项目中绝对必备！👏

(2)、PWA 🤘

PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用。PWA是Google 在2016年提出的概念，2017年落地的web技术。
目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
由此可见，PWA将来取代的目标对象正是IOS和Android的原生App（Native app），web前端暗自窃喜。

(3)、使用外部方式 🤘

例如npm、yarn、cnpm等等

(4)、多线程 🤘

由于js是单线程的，在一些需要处理big数据的时候，列入上传大文件，就会耗费大量的时间来处理，所以要合理使用多线程Web Workers，Web Workers使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。

(5)、减少、合并DOM访问 🤘

这个就不必举栗啦🧐

…这个省略号代表还有很多的小细节可能描述的不全，技术在每天进步，每个技术人员都应该时刻学习新技能。

三、小结

其实在这个信息发达的时代最不缺的就是资源，如何从众多的资源中获取到真正精华的部分，是非常重要的，资源在于精不在于多，强烈建议在保证深度的情况下再保证广度。希望你阅读本篇文章后可以对前端有一定的了解，从文章中获取到了有用的资源，文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。
如果你有什么好的知识、资源推荐，欢迎在评论区留言。关注我的博客，后续的文章我也会持续补充，你的star✨、点赞和关注是我持续创作的动力！🥳🥳🥳