Front-End-Alpha-To-Omega  

Front-End-Alpha-To-Omega 是一个帮助初学者从零开始学习前端的项目。整个项目包含14个模块，从前端的知识技能图谱，到有趣的技术文档学习资源以及在前端前行路上长期关注的前端开发相关的网站、博客和活跃开发者。

               

• 如果你正在学习如何成为一名前端工程师，可点击右上角Star此项目, 我会持续更新资源和链接。

Table of Contents

1. Start here
2. HTML
3. CSS
4. JavaScript
5. Security
6. Performance
7. SEO
8. Tools
9. 工程化
10. 测试
11. 小程序
12. 面试

---

由此开始

• 📖 互联网是如何工作的? | 📹 视频
• Front End & Back End
• HTTP协议
• 从输入URL到页面加载完成，发生了什么

HTML

• DOM
• Element
• Attribute

CSS

• Selector
• Priority
• Specificity
• Box Model

CSS Architecture

• BEM
• OOCS
• SMACSS

CSS Preprocessore

• Sass
• PostCSS
• Less

JavaScript

Framework

• React
  • Redux
  • Mobx
• Vue
  • VueX
• AngularJS
  • RxJS
  • NgR

Security

• HTTPS 每个页面和所有外部内容(插件、图像...)都使用HTTPS。
• HTTP严格传输安全性(HSTS) HTTP头设置'Strict-Transport-Security'
• 跨站点请求伪造攻击(CSRF) 确保向服务器端发送的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。
• 跨站点脚本攻击(XSS) 确保页面或网站没有XSS攻击的可能性
• Content Type Options 防止Google Chrome 和 Internet Explorer 尝试将响应的内容类型从服务器声明的内容类型中嗅探出来
• X-Frame-Options (XFO)（外部框架连接设定） 保护网站的访问者免受劫持攻击。
• Content Security Policy（内容安全策略） 定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。

Performance

网络层面

• 减少请求次数
• 减少单次请求所花费的时间
• 图片优化 (JPG / PNG / SVG / Base64 / WebP )

存储层面

• 浏览器缓存
  • 强缓存
  • 协商缓存
• 本地缓存
  • Cookie
  • localStorage & sessionStorage
  • IndexedDB

CDN

• 缓存
• 回源

渲染层面

• 服务器端渲染
• 浏览器端渲染
• DOM优化
• Evvent Loop 与异步更新策略
• 回流与重绘

事件的节流与防抖

• 节流
• 防抖

SEO

• Google Analytics
• Headings logic
• sitemap.xml
• robots.txt
• Structured Data
• Sitemap HTML
• Pagination link tags

Tools

Package Managers

• npm
• yarn

Version Control

• Git

IDE

• Visual Studio Code
• Atom
• Sublime Text
• WebStorm
• Vim
• Emacs
• Brackets

调试工具

• Firebug/Firebug-lite/Web Inspector
• YSlow/Smushit
• IEDeveloperToolBar/IETester
• SuperPreview/JsBeautifier
• Fiddler/WireShark/tcpdump

工程化

Code Quality

• JSCS
• ESLint
• stylelint
• htmlhint

构建系统

• webpack
• gulp
• grunt

代码分析

• Code climate

测试

单元测试

• Jasmine
• Mocha
• Protractor
• Karma
• Jest

UI测试

集成测试

测试覆盖率

小程序

• Taro
• WePY
• mpvue

面试