Web前端编码优化
渲染器渲染原理 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 图片压缩推荐 https://tinypng.com/ 图片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 的命令行构建工具,它可以帮助开发者们自动化重复性的工作 转载请并标注: “本文转载自 linkedkeeper.com (文/乔淑夷)” ©著作权归作者所有 |