最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

前端知识拓扑图

rockyxia 6913浏览

写在前面

web前端知识拓扑图,供前端新同学供参考。来自【IMWeb】

本图会继续补充,希望前端工程师能够在面前这片大海自由的畅游。

web前端知识拓扑图

web前端知识拓扑图

JavaScript

  • JavaScript编码规范
  • JavaScript设计模式
  • 高性能JavaScript
  • JavaScript面向对象开发
  • nodeJS
  • AMD/CMD
  • jQuery/requireJS等常用库
  • jQuery等经典库源码分析

页面重构

  • CSS开发规范
  • SASS/LESS
  • CSS2/CSS3
  • 图片类型及方案选型
  • SEO
  • HTML4/HTML5
  • 响应式布局
  • 浏览器兼容性
  • 模块化和工具化建设
  • 无障碍化

网络知识

  • HTTP 1.1/2.0
  • SPDY
  • CDN网络
  • DNS及解决方案
  • SSL&TLS
  • 流量/带宽等成本评估和优化
  • 代理及反向代理原理及应用
  • cache策略
  • cookie及降域策略
  • skey/pskey管理(ptlogin)
  • 本地存储策略

安全知识

  • XSS
  • CSRF
  • SQL Injection
  • 域名劫持/内容劫持
  • hijacking等其他安全攻击
  • 敏感词过滤
  • DDOS/雪崩防范
  • 门神等公司安全工具和策略

浏览器相关

  • BOM模型
  • DOM操作
  • 浏览器渲染机制
  • JavaScript运行时
  • 内存泄露及内存管理
  • CPU Profile/GPU
  • reflow/repaint

开发调试

  • 前端调试工具和方法
  • badJS及TryJS
  • fiddler及willow
  • weinre及扩展能力
  • 多浏览器兼容测试
  • 多终端调试/测试方法
  • git/svn技巧
  • JSLint等IDE插件
  • QQ API

发布流程

  • PC/手Q离线包策略
  • 发布系统/ars发布系统
  • 分支管理
  • 构建工具及发布

性能检测

  • pagespeed/yslow
  • webpagetest
  • dynatrace
  • 移动侧性能指标检查

运营相关

  • 点击流测速上报
  • 测速上报
  • TDW业务数据
  • 流失率监控
  • 用户端监控
  • 热力图