20200221前端入门怎么学【必备技能】

本文为转载后整理，仅供初学者学习~

需要掌握的必备技能

1. HTML
   这个是最简单的，也是最根本的。要谙练把握html中的div、formtable、ulli、p、span、font这些标签，这些都是最常用的，特别是div和table，div用于构造、table也可以用于构造，可是不矫捷，根基table是用来和数据打交道。
2. CSS
   这里说的css不网罗css3，一样平常我们看到web前端开发工程师的要求里面，有一个会使用css+html或者css+div来停止界面构造，所以css是用于辅助html来构造和展现的，我们称之为“css款式”，为什么会说css+div呢?由于我上面说了div就是html首要用于构造的工具，所以div就是焦点把握的工具！那么css必定必需要配合div来使用才好。css要谙练把握float、position、width、height，以及对付的最大最小、会使用百分百、overflow、margin、padding等等，这些都是跟构造有关系的款式，必定要把握。
3. JavaScript
   可能前两个大师感受还过的去，看到js就蛋疼了，其实吧，js入门很简单的，不必要会良多工具的，只需会按照某个id、或者name拿到网页dom或者款式、或者值，然后会给某个id或者name的元素标签赋值、或者追加数据、追html，这个是跟数据有关系的把持，然后数据逻辑断定，了局方面的，无非就是跳转、弹框、潜匿什么的，把这些全数连系其他就是实际用处了，代码一点都不难，会了这些根本js，其他的直接百度就好了。然后看多了，用多了，就什么都不是问题了。
4. jquery【暂时不学】
   jquery是相称于把js封装了一套的一个js插件，目的就是把持起来更便当，代码写的更少，jquery入门也很简单，那些是入门必要学的和js一样，只是换成了jq的代码。其他的一样百度就够了。
5. vue和react（框架）【暂时不学】
   目前这两个框架对于许多公司来说已经是必要掌握的，而且对于想要进入行业的人来说，确实是必不可少的。

什么是「页面渲染」

页面渲染都是浏览器的工作。大致分为以下几步：

加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）

这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。

★★★在浏览器端发生了什么？★★★
有一道经典的面试题是说：从浏览器输入url到页面渲染完成这一过程都发生了什么？这个问题可以说是一个非常常见的场景，足以涵盖大量的计算机知识，可深可浅。我们来简单的了解一下在浏览器端发生的过程，以此来学习前端的一些概念。一般情况下，一个url会对应了服务器上的一个HTML文件（这个叫网页文件，格式类似于XML），浏览器获得HTML文件后，开始解析并渲染HTML文件，遇到带有src的link标签，或带有src的script标签时，就会再去下载对应的CSS文件或JS文件。style和script标签，也可以直接包含相应的语言内容，这样浏览器就直接解析或执行了。什么是CSS文件呢？CSS(层叠样式表)的内容是一些样式的规定，规定了什么？HTML文件的主体内容其实是网页的结构化的表示，其中的标签都有一定特殊的含义，相当于网页内容的骨架，而CSS文件则是骨架上的装饰语，告诉了浏览器这些 结构内容的外貌。什么是JS文件呢？即Javascript脚本文件，JavaScript是一门运行在浏览器端的脚本语言，生动的网页靠的就是JavaScript。所以浏览器发生的过程大致应该是，渲染HTML所声明的网页结构内容，根据CSS的规定来修饰这些结构，执行JavaScript来修改结构或赋予其中一些结构一些动作功能（白话，非真实过程）

三剑客的学习链接

①——W3school

②——菜鸟教程

③——百度前端技术学院

菜鸟教程 看起来更有眼缘~~

HTML + CSS这部分建议在在线教程上学习，边学边练，每个属性后还有在线测试。然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练、多练、多练！JavaScript要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先通过在线教程学习一些基本语法和定义。然后你必须要看书，然后实践(好多人问有没有快速捷径，我只能告诉你：如果有捷径，码农们就不用天天如此苦逼了吧)。

注：要买参考书的话，先上知乎啥的搜搜，好多人在网上推荐好书、各种奇淫技巧！

前端框架

目前流行的三大前端框架：React、Vue、Angular，三大框架各有特点，Vue易上手，Angular大而全，React生态好，总的来说都能胜任开发工作，具体对比可以自行搜索。框架虽然有好几个，但他们解决的问题其实是一个问题，即通过Javascript控制网页。现代的JS框架都是MVVM框架了，在这些MVVM框架以前还有MVC框架如backbone.js，更简单的就是直接一把梭，jquery来操作DOM，拼接HTML字符串这种来控制网页。现代的MVVM（Model-ViewModel-View-Controller）主要改善了如何更新视图（即操作网页的DOM），通过操作数据，数据的变化映射到DOM的改变。避免了直接修改DOM。我们知道浏览器内部是有一个DOM树来表示网页的结构，前端框架一般会有一个虚拟DOM，来与之对应，当JS修改数据时，可能会影响虚拟DOM的变化，虚拟DOM变化后，会将其变化通过JS的DOM的API应用到浏览器的DOM树上，进而触发网页的变化。前端框架还有一个特点就是组件化，通过将能重复利用的DOM结构封装成可复用的组件来提高开发效率，但这种组件的封装都跟框架有关，只适用于同一种框架。框架无关的WebComponent还在发展中。