Web前端编码优化

浏览器渲染原理

HTML

CSS

JavaScript

浏览器-加载，解析，渲染

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

重绘repaint

重排reflow

节点外观改变（不会重新布局）

background-color、color、visibility

节点结构、定位、大小、边距（重新布局）

Javascript优化

1、变量

1) $前缀  var $btn = $('.btn-submit')

2) 缓存变量 var $btn = $('.btn-submit');

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

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

2、更新节点

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

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

}

3、选择节点

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

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

推荐：var temp = [],$list = $('#list');

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

   temp.push('<li>'+items.name+'</li>');  

}

$list.append(temp.join(''));

HTML优化

1、避免空链接属性

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

2、避免节点深层级嵌套

3、避免table布局

4、显示设置图片高度

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

5、避免脚本阻塞加载

CSS优化

1、避免过度约束

ul#menu{}   .nav #logo{}

2、简写css

padding margin background font border

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

  .list table tr.line td{}   .list table .line td{}  

4、CSS sprites减少http请求

5、图标采用图片base64

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

图片base64 FEhelper

 ​ 

前端打包工具

1、grunt前端自动化工具

压缩文件、合并文件、简单语法检查

2、yeoman

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

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

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