对JavaScript优化及规范的一些感想
变量......
1.一个变量只存一种类型的数据,
2.尽量减少对隐式转换的依赖,这样可增强程序的可读性,日后修改程序时不至于混乱,
3.使用匈牙利命名法,
4.使用局部变量时记得加 var 进行声明,不然会与全局变量冲突,
网站性能优化方面
1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。
2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
- 通过removeChild()或者replaceChild()实现真正意义上的删除。
- 设置该元素的display样式为“none”。
修改操作完成后,将上面这个过程反转过来,建议使用第2种方式。
3.CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue";
每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:
- 使用更改className的方式替换style.xxx=xxx的方式。
- 使用style.cssText = '';一次写入样式。
- 避免设置过多的行内样式
- 添加的结构外元素尽量设置它们的位置为fixed或absolute
- 避免使用表格来布局
- 避免在CSS中使用JavaScript expressions(IE only)
4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。
5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。
一、避免大字符串字面量对象操作,如 字符串.lenth,尽量转换为new String(字符串)后再进行操作
二、在做字符查找替换等操作时善用正则表达式快速掌握ECMAScript正则表达式。
三、减少语句,利用运算符优先级实现if else表达式,使用三元表达式,使用连续表达式(看情况,将损失程序可读性)
四、将CSS,JS文件合并到一个文件(非BT爱好者还是不要玩了^_^)
五、避免Javascript事件绑定出现内存泄漏"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog
六、使用WEB Workers技术(支持html5的浏览器)Web Workers为JavaScript提供了一种能在后台进程中运行的方法,Web Workers进程能够在不影响用户界面的情况下处理任务。
七、Y!14条(14 Rules for Faster-Loading Web Sites)
* Rule 1 - Make Fewer HTTP Requests
* Rule 2 - Use a Content Delivery Network (Server端)
* Rule 3 - Add an Expires Header (Server端)
* Rule 4 - Gzip Components (Server端)
* Rule 5 - Put Stylesheets at the Top
* Rule 6 - Put Scripts at the Bottom
* Rule 7 - Avoid CSS Expressions
* Rule 8 - Make JavaScript and CSS External
* Rule 9 - Reduce DNS Lookups (Server端)
* Rule 10 - Minify JavaScript
* Rule 11 - Avoid Redirects (Server端)
* Rule 12 - Remove Duplicate Scripts
* Rule 13 - Configure ETags (Server端)
* Rule 14 - Make AJAX Cacheable
* Rule 15 - Use Iframes Wisely
八、微软早期的DHTML优化建议 * 使用数组push替代字符串累加
javascript的and运算符的操作
逻辑AND运算的运算数可以是任何类型的,不止是Boolean值,如果某个运算数不是原始的Boolean型值,逻辑AND运算并不一定返回Boolean值
1)如果一个运算数是对象,另一个是 Boolean 值,返回该对象。
2)如果两个运算数都是对象,返回第二个对象。
3)如果某个运算数是 null,返回 null。
4)如果某个运算数是 NaN,返回 NaN。
5)如果某个运算数是 undefined,发生错误。
6)如果两个运算数都是boolean类型,则返回boolean值
javascript小知识点......
1、==和===的区别:"==" 只要求值相等; "===" 要求值和类型都相等
2、isFinite() 函数用于检查其参数是否是无穷大,如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。
3、判断空值用 val === null 即可
4、|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快.顺便说句,
//!!将一个值方便快速转化为布尔值 !!window===true 。
var foo = (12.4 / 4.13) | 0;//结果为3 var bar = ~~(12.4 / 4.13);//结果为3
5、不声明第三个变量的值交换
var a = 1, b = 2; a = [b, b = a][0];
6、对于传统的if语句,如果执行体代码超过了1 条语句,则需要加花括号,而利用逗号表达式,可以执行任意条代码而不用加花括号。
if (conditoin) alert(1), alert(2), console.log(3);
7、&&的妙用
var day = (new Date).getDay() === 0;
//传统if语句
if (day) {
alert('Today is Sunday!');
};
//运用逻辑与代替if
day && alert('Today is Sunday!');
8、禁止别人以iframe加载你的页面
if (window.location != window.parent.location) window.parent.location = window.location;
对JavaScript优化及规范的一些感想的更多相关文章
- 前端性能优化(三)——传统 JavaScript 优化的误区
注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- javascript 变量 命名规范 变量的作用域
原文:javascript 变量 命名规范 变量的作用域 大家好,我是小强老师,今天讲解的是变量 变量 小时候我们学过 这个 应用题 : X+1=2; 问 X 等于几? 答案是 1 对了,很聪 ...
- Javascript 优化
Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...
- JavaScript 中语法规范及调试
JavaScript 中语法规范及调试 版权声明:未经博主授权,内容严禁分享转载 JavaScript 开发环境 JavaScript 脚本可以使用任意一款纯文本编辑器进行编程开发. 常见的前端开发编 ...
- JavaScript standard 代码规范的全文
这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. 细则 使用两个空格进行缩进. eslint: indent function hel ...
- javascript模块化编程规范
一.javascript模块化编程规范: 二.关于commenjs规范和AMD规范: 根本不同:前者用于服务器端同步加载模块:后者是客户端异步加载模块. 同点:两者都有一个全局函数require(), ...
- 5.JavaScript优化及导航菜单背后的秘密
JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...
- 常用html、CSS、javascript前端命名规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
随机推荐
- C#发展历程以及C#6.0新特性
一.C#发展历程 下图是自己整理列出了C#每次重要更新的时间及增加的新特性,对于了解C#这些年的发展历程,对C#的认识更加全面,是有帮助的. 二.C#6.0新特性 1.字符串插值 (String In ...
- [已开源/文章教程]独立开发 一个社交 APP 的源码/架构分享 (已上架)
0x00 背景 真不是和被推荐了2天的博客园一位大神较真,从他那篇文章的索引式文章内容也学习到了很多东西,看评论区那么多对社交APP源码有兴趣的,正巧我上周把我的一个社交APP开源了,包括androi ...
- EditPlus怎样自动换行
如果只是使用快捷键Ctrl+Shift+W或者使用文档→自动换行,的话,关闭软件之后再次打开时就会重新出现不能自动换行的问题. 中文版的是:文档→固定值设置(文档 菜单的最后一个),会打开一个“工具→ ...
- [BZOJ1143][CTSC2008]祭祀river(最长反链)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1143 分析: 最长反链==最小路径覆盖==n-二分图最大匹配数 某神犇对二分图的总结: ...
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- 由Nullable模式想到的ToString的扩展
虽然关于null的一切争论永不停息,但根据实际开发经历,很多时候需要判断无聊的null,并且有些的判断是可有可无的,尤其是在表现层. string e = null; if (e != null) { ...
- Android activity跳转方式
方法一:通过SetContentView切换Layout来实现界面的切换,这种方法相当于重绘Activity. protected void onCreate(Bundle savedInstance ...
- 2016年GitHub 排名前 100 的安卓、iOS项目简介(收藏)
排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不相关的项目, 所以排名并不具备任何官方效力, 仅供参考学习, 方便初学者 ...
- 不停止MySQL服务的情况下修改root的密码
首先我们得知道一个MySQL普通用户的密码 这里我来记录一下我的操作过程 这里我刚刚到一家公司上面装的是cacti,但是之前的运维不记得MySQL的root密码了 但是他知道cacti的密码, 用户: ...
- swift 学习(三)(面向对象基础)
面向对象的基本特征包括:封装,继承,多态 在swift中,类,结构,枚举都具有面向对象特性 但结构和枚举的实例不称为对象,因为结构和枚举不是彻底的面向对象类型,比如他们不能继承. 结构体 struct ...