SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
Fl介绍
Fl
  A Js/Html/Css Toolkit That Support Template




2012年9月21日 / welefen
提纲




• 为什么有这个工具?
• 功能介绍
• 后续规划
• Q&A
为什么有这个工具



• 意识到编码规范的重要性

• 有些疏忽会引起严重的后果

• 现有的一些工具不支持模版语法,不能满足需求

• 安全问题非常重要,但不好解决

• 需要一套自动化的工具来解决这些问题
为什么有这个工具



• 开发了一套前端编译平台FCP

• 将前端语言处理相关的部分作为一个独立的工具开发Fl

• 主要解决Js/Html/Css中的规范、安全、压缩等功能

• 第一版功能简单,今年年初进行了v2.0的设计和开发

• 目前完成了全部的80%功能
Fl功能列表
Fl功能列表
功能



• 词法分析
 - 需要支持模版语法和各个浏览器的兼容情况


• 语法分析

• 所有的功能都是基于词法和语法分析结果进行
HTML处理
HTML词法分析需要注意的点

• IE的条件注释
  - <!—[if
• 一些通用的status ok
  - <!—status ok
• 文本中<>字符与tag中的<>识别
  - <div>welefen<<<</div>
• Pre, textarea, script等特殊tag
  - script的type=“text/html”
• Tag名可能是模版语法的识别
  - <{%$tagName%} class=“cls” >
  - <<&$tagName&> class=“cls” >
• XML的兼容
HTML标签属性切割

• 标签名
  - <script/defer src=“xxx.js”>


• 属性列表
  - 属性值2边的引号
  - 2边没有引号,但有空格隔开
  - 只有属性名,没有属性值



http://www.w3.org/TR/html5/syntax.html
HTML压缩

•   移除注释
•   简化doctype, charset
•   将多个空格替换为一个
•   移除相邻2个块级元素之间的空格
•   移除可选的闭合标签
•   移除可选的属性
•   移除可选的属性值
•   移除属性值2边的引号
•   移除http和https协议
•   压缩style值
•   压缩内联的JS和CSS
•   去除空的script和style
•   合并相邻内联的JS和CSS
HTML压缩

•   移除注释
•   简化doctype, charset
•   将多个空格替换为一个
•   移除相邻2个块级元素之间的空格
•   移除可选的闭合标签
•   移除可选的属性              所有的功能
•   移除可选的属性值              都可配置
•   移除属性值2边的引号
•   移除http和https协议
•   压缩style值
•   压缩内联的JS和CSS
•   去除空的script和style
•   合并相邻内联的JS和CSS
XSS自动修复

• 一切用户输入的数据都是不安全的

• 转义环境
 - HTML环境
 - JS环境
 - URL环境
 - 异步接口数据innerHTML环境
 - HTML里事件参数环境



• 自动识别,并添加对应的转义方式
HTML美化

• 构建DOM树
 - 可选的闭合标签




• 根据DOM树遍历美化
HTML其他的功能



• HTML编码规范检查

• HTML2JSON

• HTMLQuery
CSS相关
CSS词法分析

• @相关
 - @import url
 - @media
 - @charset
 - @namespace
 - @font-face
 - @-xxx-keyframes
 - @-moz
• IE的* _ 9 等hack
• [;color:red;]
• Expression
  - 需要调用JS的词法分析,通过匹配()个数
CSS Selector相关

• CSS3 Selector
  Id, Type, Class, Attribute, PseudoElement, PseudoClass


• 计算Selector的优先级




  http://www.w3.org/TR/selectors/#specificity
CSS 压缩

•   移除空格注释等
•   移除最后一个分号
•   移除空的Selector
•   覆盖相同的属性
    - 需要识别hack
• 简化value
• 对属性和选择器重排
    - 需要识别hack
• 合并选择器里相同的属性
    - 需要识别hack
CSS 其他功能



• 编码规范检查

• 美化

• CSS3自动完成
JS相关
JS词法分析和语法分析



• JS词法分析
 - @cc_on


• JS语法分析
后续规划

• 开发其他的功能

• 提供NodeJS版本

• 官网
 - http://www.flkit.org/ 官网
 - http://www.flkit.org/test/ 单元测试
 - https://github.com/welefen/Fl github
谢谢!




北京市朝阳区建国路71号惠通时代广场D座1号楼 100025
Block 1, Area D, Huitong Times Plaza No.71 JianGuo Road, ChaoYang District Beijing 100025, P.R.C.
Tel: +86 10 5878 1000         Fax: +86 10 5878 1001

Mais conteúdo relacionado

Destaque

百度新首页性能优化
百度新首页性能优化百度新首页性能优化
百度新首页性能优化Welefen Lee
 
前端编译平台
前端编译平台前端编译平台
前端编译平台Welefen Lee
 
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目Welefen Lee
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践Welefen Lee
 
Fiddler for chrom extension
Fiddler for chrom extensionFiddler for chrom extension
Fiddler for chrom extensionWelefen Lee
 
Impact of web latency on conversion rates
Impact of web latency on conversion ratesImpact of web latency on conversion rates
Impact of web latency on conversion ratesAlistair Croll
 

Destaque (6)

百度新首页性能优化
百度新首页性能优化百度新首页性能优化
百度新首页性能优化
 
前端编译平台
前端编译平台前端编译平台
前端编译平台
 
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Fiddler for chrom extension
Fiddler for chrom extensionFiddler for chrom extension
Fiddler for chrom extension
 
Impact of web latency on conversion rates
Impact of web latency on conversion ratesImpact of web latency on conversion rates
Impact of web latency on conversion rates
 

Semelhante a Fl介绍

Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editortaobao.com
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2yiming he
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editortaobao.com
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例Will Huang
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合Qiangning Hong
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuildWebrebuild
 
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild裕波 周
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & developmentXuefeng Zhang
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计fangdeng
 
Html5培训内容
Html5培训内容Html5培训内容
Html5培训内容Jun Yu
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
Comment System of 56.com
Comment System of 56.comComment System of 56.com
Comment System of 56.comHo Kim
 
使用Dsl改善软件设计
使用Dsl改善软件设计使用Dsl改善软件设计
使用Dsl改善软件设计mingjin
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 

Semelhante a Fl介绍 (20)

Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
 
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & development
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Html5培训内容
Html5培训内容Html5培训内容
Html5培训内容
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Comment System of 56.com
Comment System of 56.comComment System of 56.com
Comment System of 56.com
 
使用Dsl改善软件设计
使用Dsl改善软件设计使用Dsl改善软件设计
使用Dsl改善软件设计
 
Html js css_aha
Html js css_ahaHtml js css_aha
Html js css_aha
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 

Fl介绍