Web 开发基本情况 | 青训营

芦苇269
119 阅读5分钟

1.Web开发基本情况介绍

1.前端开发起源

web标准协议：http
internet标准协议：TCP/IP
1989年web诞生时，web由3种技术构成：

  • HTML
  • HTTP
  • URL

image.png
CSS 和 JavaScript 是几年后才出现的

2.前端开发发展

image.png

3.前端应用的领域

三个方向：to Business / to Customer / to Developer

4.关于前端开发：语言、框架、工具

语言：

  • HTML：structure
  • CSS：presentation / appearance
  • JavaScript：dynamism / action
  • WebAssembly ：Web 汇编(最新的官方标准，非常具有前景)
1.WebAssembly快速了解

WebAssembly 是一种低级的类似汇编的语言，其实它是一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术，够在浏览器中实现接近本机的执行速度

2.JavaScript 存在什么问题？

JavaScript ：解释型语言，动态类型语言（变量类型在运行时才决定）[ 静态类型语言：变量类型在定义时就决定了 ]
通过同一条指令，因为静态类型语言在定义时就决定了类型，编译器就可以知道变量 x 的类型和内存位置，但是对于JavaScript 执行同样操作，每次程序执行时，引擎必须检查变量 x 的数据类型，所以 JavaScript 中每条指令都要经过几次类型检查和转换，这就会影响到执行速度。
💡下图是JavaScript在运行代码时花费的时间分布：
image.png
💡对比来看，下面是WebAssembly花费的时间：
image.png
🤓显而易见，与JavaScript相比，WebAssembly花费的时间更少，简化了整个编译过程。

3.什么是WebAssembly ？

WebAssembly 可以将任何高级语言转换成可以在所有的主流浏览器上运行的机器码，但是WASM不是一种编程语言🙂（并非和 C / Java / C++ 这些主流编程语言一样），简而言之，WebAssembly 是一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术方案。

4.webAssembly的优点：
  1. 快速、高效性
  2. 可移植性
  3. 可读、可调试
  4. 安全性
5.JS vs WebAssembly

从上面所写到的来看，传统的解释型语言在执行时免不了要进行词法分析 -> 语法分析 -> 预解析 -> 解释执行等过程，导致 JS 的性能比不上WebAssembly，为何现在还在使用 JS ?
1.现代浏览器的JS引擎在进化的过程中引入了许多优化手段，比如字节码缓存，可以省掉每次解释执行时重新遍历语法树的过程，会简化执行过程，减少不必要的资源浪费。
2.现在大部分Web应用的性能瓶颈其实在于网络资源的加载，而不是语言本身了，这样看来，Web汇编就没有优势可言。
3.开发时，选用的高级编程语言（C/C++/Java）就已经让成本高于JS了，而选择WebAssembly又是有一定风险的，往极端情况想，如果遇到了无法兼容WebAssembly的浏览器，就得降级为JS实现，增加了业务复杂性。

🔗附上资料参考文章：
十分钟搞懂WebAssembly
快速入门 WebAssembly

框架：
💬建议：学习框架前最好可以去了解一下作者，大神的传奇人生😎
现阶段三大主流框架：

  • Vue.js : 尤雨溪开发的一款轻量级、灵活且易于学习的框架，听说更适合中国程序员宝宝的体质😛
  • React ：Facebook开发的一款用于构建用户界面的JavaScript库。它采用了组件化的开发模式，能够实现高效的DOM更新和渲染。
  • Angular：Google开发的一款用于构建Web应用的框架。

适用场景：三种框架各有所长，怎么选择取决于个人偏好以及项目开发的需求，无论选择哪种框架，都需要对HTML、CSS和JavaScript等前端技术有一定的了解，并熟悉框架的使用方法和开发规范，三剑客只有差不多都熟悉后，才能更快的上手框架，当然使用框架也会简化开发中一些不必要的工作，可见框架的妙用！会用不是最终目的，用好才是关键，可见基本功扎实对于前端开发程序员的重要性了~
工具：

  • 文本编辑器
  • Web浏览器
  • 开发者工具
  • 版本控制系统
  • 包管理工具
  • CSS预处理器
  • 图片编辑工具
  • 前端框架和库

小结：工具用的好，功夫省不少，此所谓聪明的偷懒😜~

5.关于前端开发：浏览器、网络、服务器

image.png
🔗深入理解现代浏览器
image.png
🔗mdn-An overview of HTTP
前端学习路线参考：roadmap

2.关于 Web 标准

1.标准组织

🔍拓展：为什么不会有CSS4了？

简单地说，就是从CSS3开始，CSS规范就被拆成众多模块（module）单独进行升级，或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更，有的只是CSS某个模块级别的跃迁。正因为如此，CSS理论上永远不会出现CSS4，但是，CSS中的某个模块还是可以到Level 4甚至更高级别的🤠！

1.三种模块

CSS采取模块化路线后，就有了三种模块，而且它们的命名方式非常值得注意

  • CSS Level 2原有模块
  • 新模块
  • CSS2.1从CSS2中删除的内容

上述任何模块的规范只要从WD推进到REC阶段，要么意味着新CSS模块诞生，要么意味着旧CSS模块重新焕发了生机🌱！

avatar
文章
阅读
粉丝