未加星标

Web前端编码优化

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Web前端编码优化

You are here:开发&语言 -html5

小乔2016/04/08阅读: 172评论: 0收藏: 0

渲染器渲染原理1. 浏览器:加载、解析、渲染构建DOM树 - 构建渲染树 - 布局渲染树 - 绘制渲染树2. 重绘 repaint节点外观改变,但不会重新布局,如 background-color、color、visibility 等3. 重排 reflow节点结构、定位、大小、边距等都会重新布局HTML优化1. 避免空链接属性2. 避免节点深层级嵌套3. 避免table布局4. 显示设置图片高度... 渲染器渲染原理

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

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


Web前端编码优化

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 的命令行构建工具,它可以帮助开发者们自动化重复性的工作

转载请并标注:

“本文转载自 http://www.linkedkeeper.com/detail/blog.action?bid=95 (文/小乔)”

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSHTMLJavaScriptJava浏览器HTML5定位变量雪碧
分页:12
转载请注明
本文标题:Web前端编码优化
本站链接:http://www.codesec.net/view/482482.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(28)