前端学习路线及重点

来自千禾小姐姐的“学前端感觉很吃力怎么办？方法不对努力白费，来看看怎么学习事半功倍吧”，我只是个搬运工嘿嘿~~
点这里看小姐姐的源视频哦(●ˇ∀ˇ●)

一、HTML

重点掌握语义化根据适当的内容来选择对应的html标签，要理解所有的htm标签都是容器这个概念，区分块级和内联标签，其他查文档即可
然后是html5首先是增强型表单，例如进度条，刻度尺等各种表单元素的新属性等 还有音频和视频标签也要掌握，canvas和svg标签一定要掌握，现在很多网页端，移动端的数据展示页面动画很多都是使用canvas和svg来绘制的，然后是Geolocation地理定位，很多项目上的定位需求都是使用js来获得当前所在的地理坐标，应用非常广泛的webStorage的浏览器，存储WebSocket的长链接一定要掌握

二、css

盒子模型， 定位浮动，文档流，优先级，权重一定要熟练掌握
css3的transition和animation动画要熟练应用，因为在移动端有非常多的css3的动画需求
接下来学习几种常见的布局，完了之后再搞flex
最后搞一下sass，less

三、JavaScript

this，new，语法分析new生成一个对象的过程
prototype
constructor
call&apply
继承
原型和原型链
闭包
IIFE
作用域链Scope
递归
面向对象相关
同步异步/回调/promise/async/await
模块化 commonjs AMD

四、框架

先搞懂上述几个比较难的概念，对你js理解更加深入，接下来在开始看框架方面。
框架方面，前期要学会用 后期要搞原理，新人可以先搞Vue， 上手容易。学习框架之前建议了解一下Babel和webpack，一些原理方面的东西工作中也会用到，Babel里面会有一些教你如何编辑代码 ，webpack教你如何打包文件。
搞完vue全家桶去了解下react ， react hooks学习下新的理念，再回过头来看vue会发现它们原来如此的相似却有不同

如何看待一些源码

首先找一个比较简单的上手，不要一开始就搞vue react webpack，会直接劝退新人，按照难易程度： 函数库， 组件库 ，框架 ，工程化， 分别代表lodash ，vant， vue， webpack

五、手撸简易模型

六、调试开源项目

七、前端工程化

首先重点搞一下Babel webpack
学习一下编译打包的原理自己配置下webpack
尝试去写一下webpack的loader和plugin
学习之前需要懂一点node.js（不需要全部学习，一般就日常用到读写文件 fs接口 path路径接口，这些api都不难基本上写几个demo就懂了）
之后自己学会配置webpack的配置文件，如果想深入去优化打包体积和速度就需要去了解很多webpack插件，webpack里面最核心的就是插件。当然前端工程化不仅仅是这些， CI/CD可持续集成 Umi了解一下 shell各种脚本自动化命令 代码生成技术…

八、性能优化的方案

完全靠一些经验和自己的实践

访问页面地址
页面首次加载数据渲染出完整页面的时长
非首次情况下
命中缓存的加载缓存数据
渲染出完整页面的时长

一般我们从下面几个方面着手去做
减小资源大小 压缩代码HTML CSS JS 压缩图片音视频大小， Tree-sharking消除无用代码 以上webpack都可以搞定
避免同一时间的过多次数请求 CSS实现雪碧图 图片懒加载（监听滚动后offsettop 使用data-src 替换src） 列表懒加载（监听滚动后offsetTop 发送请求加载下一页数据 ）路由懒加载 （代码分包分块加载） 预加载技术 小程序分包预下载 等
利用缓存CDN内容分发 获取更近网络节点缓存下来的静态资源
浏览器缓存 部分资源保存再LocalStorage或者app缓存中
其他 SSR服务器渲染 解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题

九、学习移动端web开发

最后

以上就是壮观毛巾为你收集整理的前端学习路线及重点前端学习路线及重点二、css三、JavaScript五、手撸简易模型六、调试开源项目七、前端工程化八、性能优化的方案九、学习移动端web开发的全部内容，希望文章能够帮你解决前端学习路线及重点前端学习路线及重点二、css三、JavaScript五、手撸简易模型六、调试开源项目七、前端工程化八、性能优化的方案九、学习移动端web开发所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。