前端知识体系
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
email
url
search
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
0 条评论
下一页
