Web标准与前端开发 | 青训营笔记

160 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第五天


​ 今天的课程是李松峰老师给我讲解前端技术相关知识,从起源讲到Web标准,内容非常丰富。让一个不是很了解前端的小白(我)对这个岗位有了更加深入的认识。

关于前端开发

​ 这一切还得从互联网开始,它的标志性协议是TCP/IP, 而Web的标志性协议是HTTP。Web诞生之初由三种技术构成:

  • HTML
  • HTTP
  • URL

Web技术之变迁

  • 只读时代: HTML、CSS、JavaScript
  • 体验时代:Ajax、Web API、JQuery
  • 敏捷时代:Fetch、Node.js、Webpack

发展到现在整个前端形成了一个模块化、组件化的趋势

前端应用领域

To Business企业级应用,用于管理自己资源,监控自己服务的状态等

To Customer 指面向客户的实现信息共享的平台

To Developer 面向开发者的工具,主要目的为开发者提供便利

前端应用场景

Desktop

目前市面上的主流浏览器,也就是前端的主要战场:谷歌浏览器、欧朋、edge等,同时包括物联网等嵌入式开发等

Mobile

在移动端,主要是H5(手机网页)、小程序、app开发等

Server

在服务端的应用可以使npm包的开发、node.js、express等服务端技术。其中使用的最多的是express来实现前后端分离的项目。

浏览器

身为一名前端,不了解浏览器就不能说是一个好的前端。关于浏览器的知识,从在导航栏中输入URL到用户交互每一步都至关重要。可能在平时编码时,我们只关注自己怎么写代码,如何提高自己的效率。但是到达一定程度,我们更应该想一想,浏览器是如何实现我们的内容的,如何才能提供更好的用户体验。举个很简单的例子,当我已打开浏览器,它默认开启了几个进程呢?想知道其实很简单,你可以自己打开电脑的任务管理器,找到对应浏览器点开就能看到。那么问题来了,如果我输入了URL开启了一和新网页,他会有什么变换呢?那么你也可以在那里看到。浏览器每打开一个新标签页就会分配一个渲染器进程,各个渲染器进程互不影响。至于之后的内容可以去自行了解!

学习路线

学习路线仅供参考,结合老师的推荐我做了如下总结:

  • 网络(HTTP、DNS、HOST)
  • 亘古不变的三件套(HTML、CSS、JavaScript)
  • 浏览器Web API,浏览器渲染机制,js执行机制 (DOM、BOM、Ajax)
  • 为后面框架学习打下基础的ES6
  • Node.js、npm、终端命令
  • 前端工程化,重要的Webpack
  • 框架Vue、React、Angular
  • 其它框架(Bootstrap、elementUI等)