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

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

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

• DOM
• Element
• Attribute

• Selector
• Priority
• Specificity
• Box Model

CSS Architecture

• BEM
• OOCS
• SMACSS

CSS Preprocessore

• Sass
• PostCSS
• Less

Framework

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

• 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（内容安全策略） 定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。

网络层面

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

存储层面

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

CDN

• 缓存
• 回源

渲染层面

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

事件的节流与防抖

• 节流
• 防抖

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

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