Enviar pesquisa
Carregar
Fl介绍
•
2 gostaram
•
1,281 visualizações
Welefen Lee
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 25
Baixar agora
Baixar para ler offline
Recomendados
设计高性能mysql应用-TechClub技术沙龙
设计高性能mysql应用-TechClub技术沙龙
banping
Node develop expirements
Node develop expirements
aleafs
深入淺出Node.JS
深入淺出Node.JS
國昭 張
Xhtml 2 Introduction
Xhtml 2 Introduction
Mayy May
Dpl in action
Dpl in action
Pu Shiming
Share module
Share module
dpf2e
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
Mais conteúdo relacionado
Destaque
百度新首页性能优化
百度新首页性能优化
Welefen Lee
前端编译平台
前端编译平台
Welefen Lee
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
Welefen Lee
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
Fiddler for chrom extension
Fiddler for chrom extension
Welefen Lee
Impact of web latency on conversion rates
Impact of web latency on conversion rates
Alistair Croll
Destaque
(6)
百度新首页性能优化
百度新首页性能优化
前端编译平台
前端编译平台
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Fiddler for chrom extension
Fiddler for chrom extension
Impact of web latency on conversion rates
Impact of web latency on conversion rates
Semelhante a Fl介绍
Html&css培训 舒克
Html&css培训 舒克
jay li
美团前端架构简介
美团前端架构简介
pan weizeng
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
Joseph Chiang
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
编辑器设计U editor
编辑器设计U editor
taobao.com
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
编辑器设计2
编辑器设计2
yiming he
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
白玉磊 Webrebuild
白玉磊 Webrebuild
裕波 周
N-layer design & development
N-layer design & development
Xuefeng Zhang
Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
Html5培训内容
Html5培训内容
Jun Yu
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Comment System of 56.com
Comment System of 56.com
Ho Kim
使用Dsl改善软件设计
使用Dsl改善软件设计
mingjin
Html js css_aha
Html js css_aha
Cheng-Yu Lin
前端性能测试
前端性能测试
tbmallf2e
Semelhante a Fl介绍
(20)
Html&css培训 舒克
Html&css培训 舒克
美团前端架构简介
美团前端架构简介
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
浅析浏览器解析和渲染
浅析浏览器解析和渲染
编辑器设计U editor
编辑器设计U editor
2011新版首页总结 技术篇
2011新版首页总结 技术篇
编辑器设计2
编辑器设计2
编辑器设计Kissy editor
编辑器设计Kissy editor
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
合久必分,分久必合
合久必分,分久必合
石玉磊 Web rebuild
石玉磊 Web rebuild
白玉磊 Webrebuild
白玉磊 Webrebuild
N-layer design & development
N-layer design & development
Postoffer前端架构设计
Postoffer前端架构设计
Html5培训内容
Html5培训内容
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Comment System of 56.com
Comment System of 56.com
使用Dsl改善软件设计
使用Dsl改善软件设计
Html js css_aha
Html js css_aha
前端性能测试
前端性能测试
Fl介绍
2.
Fl A
Js/Html/Css Toolkit That Support Template 2012年9月21日 / welefen
3.
提纲 • 为什么有这个工具? • 功能介绍 •
后续规划 • Q&A
4.
为什么有这个工具 • 意识到编码规范的重要性 • 有些疏忽会引起严重的后果 •
现有的一些工具不支持模版语法,不能满足需求 • 安全问题非常重要,但不好解决 • 需要一套自动化的工具来解决这些问题
5.
为什么有这个工具 • 开发了一套前端编译平台FCP • 将前端语言处理相关的部分作为一个独立的工具开发Fl •
主要解决Js/Html/Css中的规范、安全、压缩等功能 • 第一版功能简单,今年年初进行了v2.0的设计和开发 • 目前完成了全部的80%功能
6.
Fl功能列表
7.
Fl功能列表
8.
功能 • 词法分析 -
需要支持模版语法和各个浏览器的兼容情况 • 语法分析 • 所有的功能都是基于词法和语法分析结果进行
9.
HTML处理
10.
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的兼容
11.
HTML标签属性切割 • 标签名
- <script/defer src=“xxx.js”> • 属性列表 - 属性值2边的引号 - 2边没有引号,但有空格隔开 - 只有属性名,没有属性值 http://www.w3.org/TR/html5/syntax.html
12.
HTML压缩 •
移除注释 • 简化doctype, charset • 将多个空格替换为一个 • 移除相邻2个块级元素之间的空格 • 移除可选的闭合标签 • 移除可选的属性 • 移除可选的属性值 • 移除属性值2边的引号 • 移除http和https协议 • 压缩style值 • 压缩内联的JS和CSS • 去除空的script和style • 合并相邻内联的JS和CSS
13.
HTML压缩 •
移除注释 • 简化doctype, charset • 将多个空格替换为一个 • 移除相邻2个块级元素之间的空格 • 移除可选的闭合标签 • 移除可选的属性 所有的功能 • 移除可选的属性值 都可配置 • 移除属性值2边的引号 • 移除http和https协议 • 压缩style值 • 压缩内联的JS和CSS • 去除空的script和style • 合并相邻内联的JS和CSS
14.
XSS自动修复 • 一切用户输入的数据都是不安全的 • 转义环境
- HTML环境 - JS环境 - URL环境 - 异步接口数据innerHTML环境 - HTML里事件参数环境 • 自动识别,并添加对应的转义方式
15.
HTML美化 • 构建DOM树 -
可选的闭合标签 • 根据DOM树遍历美化
16.
HTML其他的功能 • HTML编码规范检查 • HTML2JSON •
HTMLQuery
17.
CSS相关
18.
CSS词法分析 • @相关 -
@import url - @media - @charset - @namespace - @font-face - @-xxx-keyframes - @-moz • IE的* _ 9 等hack • [;color:red;] • Expression - 需要调用JS的词法分析,通过匹配()个数
19.
CSS Selector相关 • CSS3
Selector Id, Type, Class, Attribute, PseudoElement, PseudoClass • 计算Selector的优先级 http://www.w3.org/TR/selectors/#specificity
20.
CSS 压缩 •
移除空格注释等 • 移除最后一个分号 • 移除空的Selector • 覆盖相同的属性 - 需要识别hack • 简化value • 对属性和选择器重排 - 需要识别hack • 合并选择器里相同的属性 - 需要识别hack
21.
CSS 其他功能 • 编码规范检查 •
美化 • CSS3自动完成
22.
JS相关
23.
JS词法分析和语法分析 • JS词法分析 -
@cc_on • JS语法分析
24.
后续规划 • 开发其他的功能 • 提供NodeJS版本 •
官网 - http://www.flkit.org/ 官网 - http://www.flkit.org/test/ 单元测试 - https://github.com/welefen/Fl github
25.
谢谢! 北京市朝阳区建国路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
Baixar agora