Web前端编码优化

您目前处于：笔记 2016-04-08

乔淑夷

乔淑夷，京麦前端架构师。精通html5，css3，js，jquery等，熟悉vim，angular等开源框架。

渲染器渲染原理

1. 浏览器：加载、解析、渲染

构建DOM树 - 构建渲染树 - 布局渲染树 - 绘制渲染树

2. 重绘 repaint

节点外观改变，但不会重新布局，如 background-color、color、visibility 等

3. 重排 reflow

节点结构、定位、大小、边距等都会重新布局

HTML优化

1. 避免空链接属性

<img srg="">
<a href=""></a>

2. 避免节点深层级嵌套

3. 避免table布局

4. 显示设置图片高度

<img src="logo.png" width=100 height=100>

5. 避免脚本阻塞加载 script脚本放body结束标签前

CSS优化

1. 避免过度约束推荐使用：

不推荐

ul#menu{}
.nav #logo{}

2. 简写CSS

推荐

padding margin backgroung font border

3. 避免不必要的命名空间

不推荐

.list table tr .line td{}

推荐

.list table .line td{}

4. CSS sprites（雪碧图）减少http请求

5. 图标采用图片base64

图片base64 FEhelper

JavaScript优化

1. 变量

(1) $前缀

推荐

var $btn = $('.btn-submit')

(2) 缓存变量

$('.btn-submit').text('提交中...')          
$('.btn-submit').text('提交')

推荐

var $btn = $('.btn-submit')

2. 更新节点

for(var i=0;i<items.length;i++){ 
   $('#list').append('<li>'+items.name+'</li>');  
}

推荐

var temp = [],$list = $('#list');
for(var i=0,len=items.length;i<len;i++){ 
   temp.push('<li>'+items.name+'</li>');  
}
$list.append(temp.join(''));

3. 选择节点

var $btn = $('#list .btn')

推荐

$('#list').find('.btn')
var $checkbox = $('.form input:checkbox')

前端打包工具

1. grunt 前端自动化工具

压缩文件、合并文件、简单预发检车

2. yeoman

yo 项目初始化工具，生成一套启动某类项目必须的项目文件

bower 客户端技术的软件包管理器，它可以用于搜索、安装和卸载，如JavaScript、HTML、CSS之类的网络资源

3. grunt

基于JavaScript 的命令行构建工具，它可以帮助开发者们自动化重复性的工作