

首页  思维导图  详情



前端知识体系

2016-07-28 15:05:19   0  举报





仅支持查看

AI智能生成

2015年个人总结，有许多要跟进完善。没有开放编辑和克隆。

网页前端开发知识体系

模版推荐

作者其他创作

大纲/内容

约定俗成的共识

设计

形式感+ 网页视觉设计创意拓展与快速表现

规范

HTML规范

CSS规范

工程师规范

网易NEC

标准

HTTP/1.1/2

ECMAScript3/5/6

W3C: DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS Modules/AMD

HTML5/CSS3

Semantic Web：MicroData

Web Accessibility：WAI-ARIA

计算机知识储备

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

Unicode

软技能

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

用户界面的展现

HTML

HTML5

新的标签

header/nav/list/datalist/section/article/summary/details/figure/figcaption/aside/footer

input

url

progress/keygen/output/datalist/command

音视频 audio&video

拖放 drag&drop

画布绘制图形 Canvas

通过 JavaScript 逐像素来绘制 2D 图形

一旦图形被绘制完成，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

可伸缩矢量图形 SVG

使用 XML 描述 2D 图形的语言

可为 SVG DOM 中的每个元素附加 JavaScript 事件

每个被绘制的图形均被视为对象

SVG 对象的属性发生变化，浏览器能够自动重现图形

地理定位 Geolocation

客户端存储数据

localStorage

sessionStorage

应用程序缓存 cacheManifest

离线Web应用

webWorker

运行在后台的 JavaScript，独立于其他脚本

服务器发送事件 server-sent Event

网页自动获取来自服务器的更新

CSS

预处理器 sassCore3.0

Core

变量设计 Setting

CSS3

响应式设计 mediaQueries

@mixin、%、@function

布局 Grid

Reset

Extend

动画 Animate

字体图标 @font-face

配色 Message

按钮 Btn

表单 Form

表格 Table

排版 Typography

辅助 Helper

宿主

虚拟现实VR

投影仪

智能电视

台式电脑

笔记本

平板

手机

微信

按显示分辨率划分

按平台系统划分

类库框架

BootStrap

用户体验的交互

JavaScript

JavaScript 对象

Array

Boolean

Date

Math

Number

String

RegExp

Global

Browser 对象

Window

Navigator

Screen

History

Location

HTML DOM对象

Document

Meta

Link

Style

Body

Anchor

Area

Base

Button

Canvas

Event

Form

Select

Option

Textarea

Frame

Frameset

IFrame

Image

Input

Object

Table

类库框架

jQuery

语言

对象

选择器

筛选

事件

事件对象

回调函数

动作

效果

文档处理

Ajax

延迟对象

Css

属性

其它

核心

工具

插件

validation

form

editor

timepicker

jqUI

JS模块化加载

NodeJS Browserify

commonjs规范

AMD

强依赖

软依赖

CMD

编程知识储备

数据结构

OOP/AOP

原型链/作用域链

闭包

编程范型

设计模式

Javascript Tips

后端数据的填充

HTTP过程

域名解析

DNS缓存

hosts文件

DNS根域名镜像服务器

DNS根域名服务器

.com

baidu DNS

.cn

.edu

.gov

NetBIOS 名称缓存

WINS服务器

Windows Internet Name Service，即Windows网络名称服务

IP地址和计算机名称的映射

广播

Lmhost文件

TCP/IP的三次握手连接

建立TCP连接后发起HTTP请求报文

GET /1.HTML HTTP/1.1

服务器端响应http请求

服务器返回给客户端HTTP响应包

1xx: 信息性状态码,100,101

2xx: 成功状态码 200:OK

3xx: 重定向状态码

301: 永久重定向, Location响应首部的值仍为当前URL,因此为隐藏重定向

302: 临时重定向，显式重定向, Location响应首部的值为新的URL

304：Not Modified 未修改

4xx: 客户端错误状态码

404: Not Found 请求的URL资源并不存在

5xx: 服务器端错误状态码

500: Internal Server Error 服务器内部错误

502: Bad Gateway 前面代理服务器联系不到后端的服务器时出现

504: Gateway Timeout 这个是代理能联系到后端的服务器，但是后端的服务器在规定的时间内没有给代理服务器响应

浏览器解析html代码，并请求html代码中的资源

keep-alive特性

多线程随机下载资源

浏览器对页面进行渲染呈现给用户

AJAX

JSON

JSONP

XML

NodeJS

BackBone

AngularJs

数据库

SQL

数据缓存

Memcached

编程语言

PHP

网页服务器

Apache

文件缓存/代理

Varnish

前端的整合优化

性能

页面级优化

减少HTTP请求次数

脚本&样式表

合并&Gzip压缩

脚本放置于底部

优化图片

图像映射 image-map

map、area

CSS Sprites

内联图片 Inline Images

data:image/gif;base64,AAAA

缓存

Last-Modified：服务器上文件的最后修改时间

Etag：文件标识

Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）

Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由于浏览器根据间隔生成具体的时间）

CDN

Post-Onload Download

主文档加载后发送其它资源加载

异步执行inline脚本

Script元素的Defer属性

setTimeout

webWorkers

不必要

重定向

HTTP跳转

重复的资源请求

DNS查询

代码级优化

JS最小化DOM操作

避免 Reflow & Repaint 的开销

未指定图片宽高的话，图片的载入会使页面reflow, 因为要根据图片宽高来更新frame

CSS的display来切换可见性产生reflow

visibility则不存在reflow问题

慎用with

减少作用域链查找

避免使用eval和Function

数据访问

直接量(字符串、正则表达式)、变量、对象属性以及数组的访问是最快的

对对象属性以及数组的访问需要更大的开销

字符串拼接

+号来拼接字符串效率是比较低的，使用数组的join方法

优化工具

HTTP请求图表使用IBM PAGE DETAILER

响应时间的测量使用Gomez的WEB监视服务

页面性能Yslow

抓包工具HTTP Analyzer

开发工具

编辑器和IDE

SublimeText

WebStorm

调试工具

Chrome

版本管理

GitHub

代码质量

Coding style

JSLint

CSSLint

Markup Validation Service

HTML Validators

单元测试

QUnit

自动化测试

phantomjs

部署流程

项目构建工具-脚手架

Grunt

文档输出

JSDoc

压缩合并

UglifyJS

代码组织

类库模块化

CommonJS/AMD

业务逻辑模块化

bower/component

文件加载

SeaJS/Require.js

模块化预处理器

Browserify

安全

CSRF/XSS

CSP

Same-origin policy

移动Web

SEO

 Collect

Get Started

Web前端知识体系大全

 Collect

Get Started

前端知识体系

 Collect

Get Started

前端知识体系

 Collect

Get Started

Technical Antenna Engineer 岗位知识体系理体系





0 条评论

下一页