Web前端技术栈

最新推荐文章于 2024-05-06 11:15:40 发布

Panda_Joy

最新推荐文章于 2024-05-06 11:15:40 发布

阅读量5.9k

点赞数 5

分类专栏：前端架构文章标签：前端技术 web前端开发

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/yongxiaokang1/article/details/49175311

版权

前端架构专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web前端技术栈

比较全面的浏览器、平台、类库、框架、工具等。

自行生成预览图

准备环境

您应该安装Visual Studio 2010+。

安装 nodejs.
安装 Phantomjs.
安装 Python 2.7.
npm install

如果出现错误，您可以检查 [phantomjs-node] 的依赖(https://github.com/sgentle/phantomjs-node/wiki), node-gyp.

运行命令

npm start 运行服务并直接打开主html文件。

npm run build 生成预览图。

选项


  -h, --help                           Display this message.
  -p, --port number                    (Default: 3000) Set the port what express listening.
  -ues, --update_existed_stargazers    (Default: false) Update project's stargazers including existed.
  --phantomjs                          The task to generate the image.
  --readme                             The task to update readme.
  --updatestargazers                   The task to update the count of the stargazers.

为什么？

大家是否想过：

Web前端开发究竟包含哪些技术呢？
我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？
我究竟还没有掌握多少Web前端技术呢？
面试的时候会考哪些技术呢？

那么，Web前端开发是否也应该有这样的技术栈概览图呢？搜索了很久，没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。

这个图表里的分类未必准确，相关技术也难免会有遗漏，欢迎大家指点以便不断改进。

Web前端技术实在太繁多限于篇幅，，这里没有罗列一些技术。

您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站)：

https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm?locale=zh-cn

Web前端技术栈

Web前端开发技术栈
- 浏览器
  - Internet Explorer
  - Chrome
  - Firefox
  - Safari
  - Opera
  - Edge
  - Netscape ;-)
- 协议
  - HTTP/1.1
    - 链接
    - 会话
    - 授权
    - 请求
    - 响应
  - HTTP/2
    - 压缩
    - 打包
    - 服务器端推送
  - WebSocket
- Web三剑客
  - HTML (HyperText Markup Language)
  - CSS (Cascading Style Sheets)
  - JavaScript
- 标准
  - W3C
    - HTML
    - CSS
    - XHTML
    - XML
- 核心概念
  - HTML
    - DOM
    - Element
    - Attribute
  - JavaScript
  - CSS
    - Selector
    - Priority
    - Specificity
    - Box Model
- 渲染引擎
  - Trident (IE)
  - Blink / prev. WebKit (Chrome)
  - Gecko (Firefox)
  - WebKit (Safari)
  - Blink / prev. Presto (Opera)
  - EdgeHTML (Edge)
- 脚本引擎
  - JScript (IE8- / ASP)
  - Chakra (IE9+ / Edge)
  - V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]
  - SpiderMonkey (Firefox)
  - Nitro (Safari)
- 运行时
  - Cookie
  - Local Cache
  - Session Storage
  - Local Storage
  - Components
    - Extensions
    - Plugins
  - Resources
    - Images
    - Icons
    - Fonts
    - Audios
    - Videos
- 编辑器
  - Sublime Text
  - WebStorm
  - Atom [GitHub]
  - Vim
  - Emacs
  - Brackets [GitHub]
  - Light Table [GitHub]
  - Visual Studio
  - Visual Studio Code
  - Dreamweaver ;-)
  - FrontPage / SharePoint Designer ;-)
- 编译任务
  - 精简
  - 编译
  - 合并
  - 混淆
  - 图像优化
  - 单元测试
- 编译工具
  - Grunt [GitHub]
  - Gulp [GitHub]
  - Brunch [GitHub]
  - Yeoman
  - Broccoli [GitHub]
- 调试
  - Developer Tools
  - Firebug [GitHub]
- 基础工具
  - Node.js [GitHub]
  - Phantom.js [GitHub]
  - SpiderMonkey
- 质量控制
  - JSLint [GitHub]
  - JSHint [GitHub]
  - jscs [GitHub]
  - Closure Linter
- 包管理
  - npm [GitHub]
  - Bower [GitHub]
- 测试
  - 工具
    - QUnit [GitHub]
    - Jasmine [GitHub]
    - Mocha [GitHub]
    - Selenium [GitHub]
    - WebDriverIO [GitHub]
    - Protractor
    - Chai [GitHub]
    - Sinon.JS [GitHub]
    - Karma [GitHub]
    - nodeunit [GitHub]
    - tape [GitHub]
    - speckjs [GitHub]
  - 在线工具
- 库 / 框架
  - 基础库
  - 模块化
    - ES6 Module
    - CommonJS
      - webpack [GitHub]
      - browserify [GitHub]
    - AMD
      - RequireJS [GitHub]
    - UMD
      - umd [GitHub]
  - 框架
  - UI框架
  - WebSocket
    - Socket.io [GitHub]
    - web-socket-js [GitHub]
  - 数据可视化
  - WebGL
  - CSS3 动画
  - 流程控制
    - ES6
      - Promise
      - Generator
    - ES7
      - yield
      - await
    - async [GitHub]
    - co [GitHub]
    - Promise
      - Bluebird [GitHub]
      - q [GitHub]
      - when.js [GitHub]
  - 函数式编程
  - 手机 UI 框架
- CSS 预处理器
  - LESS
    - LESS [GitHub]
    - Hat [GitHub]
  - Sass(SCSS)
  - Stylus
    - nib [GitHub]
- 未来标准
  - babel [GitHub]
- 模板引擎
  - Handlebars [GitHub]
  - Haml [GitHub]
  - Slim [GitHub]
  - Jade [GitHub]
  - Ejs
  - Spacebars
  - mustache [GitHub]
- 统一化
  - Normalize [GitHub]
  - Reset
- 最佳实践
  - SEO
  - Responsiveness
  - CDN
- 安全
  - Sandbox
  - XSS
  - CORS
- 中间语言
  - CoffeeScript [GitHub]
  - TypeScript [GitHub]
  - ClojureScript [GitHub]
  - JSX (Facebook)
- 移动应用开发
  - PhoneGap / Cordova [GitHub]
  - MUI [GitHub]
  - React Native [GitHub]
  - Ionic [GitHub]
- 桌面应用开发
  - Electron [GitHub]
  - NW.js [GitHub]

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
Web前端技术栈

Web前端开发究竟包含哪些技术呢？我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？我究竟还没有掌握多少Web前端技术呢？面试的时候会考哪些技术呢？
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。