Web前端编码优化

转自：Web前端编码优化

渲染器渲染原理

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

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





2. 重绘 repaint

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

3. 重排 reflow

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



HTML优化

1. 避免空链接属性

1

2


<img srg="">

<a href=""></a>


2. 避免节点深层级嵌套

3. 避免table布局

4. 显示设置图片高度

1


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


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

CSS优化

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

不推荐

1

2


ul#menu{}

.nav #logo{}

2. 简写CSS

推荐

1


padding margin backgroung font border

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

不推荐

1


.list table tr .line td{}

推荐

1


.list table .line td{}

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

5. 图标采用图片base64

图片压缩推荐 https://tinypng.com/

图片base64 FEhelper

JavaScript优化

1. 变量

(1) $前缀

推荐

1


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


(2) 缓存变量

1

2


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

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

推荐

1


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

2. 更新节点

1

2

3


for(var i=0;i<items.length;i++){ 

   $('#list').append('<li>'+items.name+'</li>');  

}

推荐

1

2

3

4

5


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. 选择节点

1


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

推荐

1

2


$('#list').find('.btn')

var $checkbox = $('.form input:checkbox')

前端打包工具

1. grunt 前端自动化工具

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

2. yeoman

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

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

3. grunt

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


转载请并标注: “本文转载自 linkedkeeper.com (文／乔淑夷)”
时间：