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 (文/乔淑夷)”

此条目发表在web分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注