听说你在从事前端开发?那这10个JavaScript的优化问题你不得不知道!
JavaScript的高效优化一直都是我们前端开发中非常重要的工作,也是很多开发人员无法做好的一部分内容,今天我总结了10个优化问题,大家可以参考来做优化,这其中很多问题都是大家经常遇到的哦。
==和===的区别
应避免在if和while条件选择语句中的条件判断部分进行赋值,如if (a = b),应写成if (a == b),但是在比较是否相等的情况下,最好使用全等运算符,也就是使用===和!==运算符对比==和!=会好点。因为==和!=运算符会进行强制类型转换。
不要使用生偏语法
不要使用生偏语法,和写一些让人疑惑的代码,虽然计算机可以正常识别和运行,但是让人难懂的代码不方便后期维护。
函数返回统一类型
虽然JavaScript是弱类型的,在函数里,前面返回是整数型数据,后面返回布尔值都可以正常的编译和运行的,但为了规范和后期维护,应保证函数返回统一的数据类型。
总是检查数据类型
要检查你的方法传入的参数,一方面是安全性,另一方面是可实用性。用户随时都有可能会误操作传入错误的数据。这不是因为他们的问题,而是因为他们的思维方式和使用习惯和你不一样。所以可以使用typeof方法来帮助你检测function接受的参数是否合法。
何时用单引号,何时用双引号
在JavaScript当中,虽然双引号和单引号都可以用来表示字符串, 但是为了避免混乱,所以我们建议在HTML中使用双引号,在JavaScript中使用单引号。不过为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号。
删除DOM节点
删除DOM节点之前,记住要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式来注册的事件,否则会出现无法回收的内存。此外,在removeChild和innerHTML=’ ’这两个,尽量选择第二个. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放DOM节点。
多个类型声明
在JavaScript中所有变量都可以使用单个var语句来声明,这样就是组合在一起的语句,可以减少整个脚本的执行时间。
插入迭代器
如var name=values[i]; i++;这两条语句可以写成var name=values[i++]
浮点数转换成整型
很多人经常喜欢使用parseInt()来做转成整数,其实parseInt()是用于将字符串转换成整数的,而不是用于浮点数和整型之间转换的。浮点转整型我们应该使用Math.floor()或者Math.round()。
避免双重解释
要提高代码性能,就尽可能避免出现需要按照JavaScript解释的字符串,也就是:
1.尽可能少使用eval函数
使用eval相当于在运行时再次调用解释引擎对内容进行运行,需要消耗大量时间。同时,使用Eval带来的安全性问题也是不容忽视的。
2.不使用Function构造器
不要给setTimeout或者setInterval传递字符串参数
最后,建议大家永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好。
转载于:https://juejin.im/post/5d0a23daf265da1bbf6921c7
听说你在从事前端开发?那这10个JavaScript的优化问题你不得不知道!的更多相关文章
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 前端开发,页面加载速度性能优化,如何提高web页面加载速度
一个网页访问速度的快慢, 不仅看它服务器的配置,这里除去你空间主机配置很烂的情况以外,我们从网站开发方面来探讨,前端技术需要从哪些方面提高访问的速度,需要用到哪些技术手段. 文件的加载 图标的加载: ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- 前端开发【第三篇: JavaScript基础】
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
- 【WEB前端开发最佳实践系列】JavaScript篇
一.养成良好的编码习惯,提高可维护性 1.避免定义全局变量和函数,解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性: var myCurrentA ...
- 前端开发:这10个Chrome扩展你不得不知
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f ...
随机推荐
- 简单实现Win10炫酷下滑关机
实现效果如下图,鼠标左键按下下拉关机: 先说下实现思路和实现过程(包括失败过程),不想了解的可直接往下拉查看红色字体标注的最终实现方法. 首先实现下滑关机的Windows自带的一个功能(程序)Slid ...
- chrome浏览器的json格式化插件
JSON-Handle 下载地址: http://jsonhandle.sinaapp.com/ 插件下载后,在浏览器输入:chrome://extensions/ 将下载后的文件 ...
- 个人博客如何申请ICP备案
目录 前言 一定要备案吗? 备案前的准备 域名 备案资料 备案服务号 如何申请ICP备案 备案成功之后 总结 关于博客的搭建 参考资料 推荐阅读 前言 前一段时间,博客域名在申请ICP备案,暂时不能访 ...
- 微信小程序将外部数据从父组件中传入到子组件
小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个API,如下图所示. 如果这时候两个子组件各自导入同一个接口就会显得多余.另外的办法是由父组件导入接口数据,再从父组件将接 ...
- vue-shop项目第一天(用于记录 个人学习)
vue-shop 第一天 一.项目初始化 1.安装vuecli脚手架(依赖于webpack)[前端自动构建工具]. 2.安装插件(element-ui)[第三方插件库], 安装依赖(axios)[调用 ...
- String与StringBuffer和StringBuilder的根本区别(String为什么无法修改字符串长度)
从网上看了很多的信息,说的大部分是关于final修饰的原因,却没有详细的解释!根据自己收集的资料,跟大家分享一下我的观点(有错请指正).1.我们都知道在修改字符串长度的时候,StringBuffer和 ...
- iphone se2的优缺点分析:
4月15日晚间消息,在毫无征兆的情况下苹果公司刚刚正式发布iPhone SE二代手机,这款传闻多年的产品终于出现,国内定价人民币3299元起.本周五开始预定,4月24日开始送货. Phone SE ...
- ffmpeg使用ss与t参数对视频进行剪辑
ffmpeg能够实现对视频进行剪辑操作,ss为指定视频剪切开头的起始时间,t制定视频的总长度,ss与t的单位均为:秒. ffmpeg -ss 7200 -i 1080p.mp4 -c copy -t ...
- 【Java】Junit单元测试
什么是单元测试? 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证. 对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,Ja ...
- 《JavaScript 模式》读书笔记(6)— 代码复用模式2
上一篇讲了最简单的代码复用模式,也是最基础的,我们普遍知道的继承模式,但是这种继承模式却有不少缺点,我们下面再看看其它可以实现继承的模式. 四.类式继承模式#2——借用构造函数 本模式解决了从子构造函 ...