Web前端开发的前期是网页制作，简单的ps和dw就可以制作网页，后来为了更好的用户体验，应用于企业，那么就需要掌握基本的Web前端开发技术。
虽然不同的公司都有Web前端开发，但是职能也有不同，可以是做网站设计、网页界面开发的，只做网页界面开发的，做网页界面开发、前台数据绑定和前台逻辑的处理的，也有设计、开发、数据的。
主要是根据具体的公司职位需求来定，但是需要掌握的技术还是没差的。
Web前端开发学习
基础：HTML、CSS 、JavaScript
前端三大基础，学习顺序为：HTML＞CSS＞JavaScript。
了解HTML的基础知识，学会将页面分为多个部分，知道如何正确的建立DOM，最好至少能够制作五个页面（这里的重点是了解页面结构）。
然后大家再来考虑美观问题，认识CSS，网格和弹性盒子的知识要去了解，还有媒体查询和响应式知识，然后把CSS样式套用到你制作的HTML网页。
基础知识的最后一步JavaScript，这里会比前面两点稍有提升，但是不难，了解语法和基本的结构，开始学习操作DOM，理解一些相关概念，了解Ajax（XHR）。
推荐几本书籍：
《html5从入门到精通》
这本书讲的很系统，作为入门书籍，也比较容易懂，最重要的是有光盘教学，可以放电脑上看看。
css的书籍，这本书也有涵盖html5，有承上启下的作用。
比较出名的一本javascript，被读者称为犀牛书，很推荐。
框架：React、Angular 或者 Vue
学习完前端的三大基础之后，你还需要了解最新的前端框架。
这里就提出Vue 、Angular 、React，大部分人称为VAR，这三个是目前最流行的前端框架。
为什么没有jQuery？确实，初学者认为使用jQuery就可以写出任何特效效果，但是它并不是前端的全部，在工作时间久了之后才会发现，jQuery只是满足当下的业务需求，技术框架是随时会变的。
当然，学习jQuery没有问题，只是多学会框架，有助于提升你的个人技术能力，和你的职场竞争力。
打包工具：Webpack 和 gulp
进阶：Node.js 体系（包括 Node.js 服务端开发，npm 等）还需要什么？
不急，还没完呢，前端开发中有一个重要的知识：前端布局，主要是对页面模块和内容进行科学合理的组织与呈现。
其实前端布局没有引起多大的重视，但是它又是Web前端开发的核心，在工作中的比重也不小。
可能在你认为已经掌握了前端知识后，信心满满的去面试，但是却被一个看似简单的切图问题给难倒了，即便是混过了面试，工作中也不得心应手。
布局的好坏直接影响着后续的所有工作进展的顺利与否与效率的高低。
对于如何掌握前端布局的技能，W3Cschool APP最近新上线了一个专栏，有兴趣的可以看看。
最后偶想说，Web前端开发的前景好不好，还是得看你的技术怎么样，技能过关，网站界面做得好看，用户体验好，那自然好，如果想要更上一层楼，建议了解一下Web全栈开发，这是前端行业内重要的发展趋势。
如何在js文件中动态加载另一个js文件？
就像正常的下载文件一样。把服务的js文件下载下来，然后在本地浏览器执行。
另外你需要补充一下浏览器加载、解析、渲染的一些知识。复制一下偶之前整理的笔记。
浏览器加载
加载过程 当浏览器获得一个html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。 加载过程中遇到外部CSS文件，浏览器另外发出一个请求，来获取css文件。 遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载。 但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。加载外联js和css的阻塞情况
一个不太严谨但方便记忆的口诀：JS 全阻塞，CSS 半阻塞
JS 会阻塞后续 DOM 解析以及其它资源(如 CSS，JS 或图片资源)的加载。CSS不阻塞DOM的加载和解析（它只阻塞DOM的渲染呈现。这里谈加载），不会阻塞其它资源(如图片)的加载，但是会阻塞 后续JS 文件的执行（原因之一是，js执行代码可能会依赖到css样式。css只阻塞执行而不阻塞js的加载）。鉴于上面的特性，当css后面存在js的时候，css会间接地阻塞js后面资源的加载（css阻塞js，js阻塞其他资源 ）。现代浏览器会进行 prefetch 优化，浏览器在获得 html 文档之后会对页面上引用的资源进行提前下载
外联js文件使用defer属性和asyn可以达到异步非阻塞加载的效果，由于现代浏览器都存在 prefetch，所以 defer, async 可能并没有太多的用途，可以作为了解扩展知识，仅仅将脚本文件放到 body 底部(但还是在之前)就可以起到很不错的优化效果（遵循先解析再渲染再执行script这个顺序）。当把js放在最后的时候，其实浏览器将自动忽略标签，从而自动在最后的最后补上。
浏览器解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。2、HTML 文件加载后，开始构建 DOM Tree（DOM树）3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree4、Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree
浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree（渲染树）2、布局阶段——在屏幕上绘制渲染树中的所有节点的几何属性，比如： 位置，宽高，大小等等，这个过程称为 Flow 或 Layout 。3、绘制元素——绘制所有节点的可视属性。4、合并渲染层——把以上绘制的所有图层（类似于PhotoShop中的“图层”）合并,最终输出一张图片
其中的阶段3、4可称之为Paint
Repaint和Reflow
当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时，以上的部分操作有可能重复运行，此过程称为 Repaint 或 Reflow。
Repaint
当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。
Reflow
当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）
Reflow 的成本比 Repaint 的成本高得多的多。大家应当尽量避免Reflow。
如何优化浏览器渲染过程
1、创建有效的 HTML 和 CSS ，不要忘记指定文档编码，比如。2、CSS 样式应该包含在 中， Javascript 脚本出现在末尾。3、减少 CSS 嵌套层级和选择适当的选择器，可参考 如何提升 CSS 选择器性能。4、不要通过 JS 逐条修改 DOM 的样式，提前定义好 CSS 的 Class 进行操作。5、尽量减少将 DOM 节点属性值放在循环当中，会导致大量读写此属性值。6、尽可能的为产生动画的 HTML 元素使用 fixed 或 absolute 的 position ，那么修改他们的 CSS 是不会 Reflow 的。
css样式表项的组成为？
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。
CSS的主要优点是提供了便利的更新功能。设计网站时，可以创建一个CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。
怎么制定Web前端学习计划？
一个非常好的问题。先解释下Web前端开发的新发展。
随着移动互联网的发展，前端开发成为重点。移动端有多个平台，Android，iOS，微信小程序，支付宝小程序，还有不断出现的新操作系统，比如阿里YunOS，华为鸿蒙，等等。
为了支持这些平台和系统，越来越多的应用开始使用H5跨平台架构，现在有个新名词叫做“大前端”。
一，H5跨平台开发
这时的H5前端开发已经不再是单单的网页开发了，而是前端应用开发。具体到H5 Hybrid架构，常用三剑客：HTML, css, JavaScript
1) HTML和css是页面设计，没有代码逻辑
2) JavaScript编程，还有其它衍生语言，比如常用的TypeScript
JavaScript是一种脚本语言，由解释器加载执行，常用在网页前端动态展示、和服务后端交互等场景。接下来重点介绍JavaScript开发。
二，学习阶段和时间计划
1）编程基础，一到两周
学习JavaScript语言基础，掌握基本的编程方法。如果对着课本教程学习比较枯燥，难以坚持，那么可以使用网上的一些学习练手资源，边学习边动手，比如HackerRank
2）开发框架，一到两月
JavaScript前端开发有很多成熟的框架可用，比如JQuery, AngularJS，React，还有前后端都跑通的NoteJS。阿里开源框架Ant Design Pro是一个功能完善的脚手架，推荐新学者练手。
新手学习时，推荐当前普遍使用的Top3开发框架，太新或者太旧的都不适合用来学习练手。
3）项目经验，一到两年
学习的最终目的是学以致用，在实际项目中积累经验，不断提升。有了一定技术基础后，推荐尝试参与开源项目，在开发功能、提交代码的过程中，提升非常快。而且开源项目经验，和工作经验一样，应聘时非常受欢迎。
偶是工作多年的Web应用架构师，欢迎关注偶，了解更多IT专业知识。
