位置: 编程技术 - 正文

JavaScript知识点总结之如何提高性能(js知识总结)

编辑:rootadmin

推荐整理分享JavaScript知识点总结之如何提高性能(js知识总结),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js必学知识点,js相关知识,js所有知识点,js必学知识点,js的知识点,js所有知识点,js的知识点,js所有知识点,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货。

先给大家巩固下javascript基本语法:

javascript基本语法

定义变量统一用var关键字

语法:var 变量名称=变量值

标示符:①、由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写

数据类型:

数值型:number

字符串:string

布尔型:boolean

特殊数据类型:undefined 空的 未定义的 未赋值的

空值:null

引用类型object function

检测参数的数据类型:typeof()返回该数据类型对应的字符串

两个等号==和三个等号===的用法

==:比较值相等 与数据类型无关

===:比较全等 与数值和数据类型都有关

布尔环境:遇到if自动转换成布尔值

字符串string中的布尔环境:空为假 非空为真

数值number中的布尔环境:0为假 非0为真

number与string之间的关系

①、遇到+做拼接操作

②、需要做运算操作时,要把字符串转换成数值型

转换方法1、字符串*1 变成数值型

转换方法2:Number(字符串) 转换成数值型

一:针对js文件的加载位置

JavaScript知识点总结之如何提高性能(js知识总结)

在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的。这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作。那么问题就来了,这样可能会出现页面空白or卡顿现象。作为一名前端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验。那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:

1. 如果js文件没有特殊要求指明需要在页面渲染之前载入及编译完成的,那么选择将js文件放到</body>标签前(既所有的页面所呈现内容的后面),css文件还是放到<head>区域(谁也不愿意看一个布局杂乱无章的页面)。这样做就能先让用户看到有布局的页面而不是空白页了,那么也会有人指出:那数据得通过js请求加载进来啊,怎么办呢?可以对数据的加载做排序,急需呈现的接口放前面执行,不是那么需要的可以延后执行,同时做个简单的载入动画or提示。

2. 如果这些js文件有指明需要先执行了,才能更好的展示页面内容,那么就在第一个js或者页面上先放个载入小动画,可以一些有趣的或者萌萌的动画场景。这样也是能较好的避免用户等待的无聊,说不定人家还对这个载入动画更感兴趣呢,这样可提升项目的用户体验感。

最终推荐:将<script>标签尽可能的放到</body>标签前面加载,以提升用户体验。

二:针对js文件的合并

在很多团队开发中,我们可能会将不同功能的代码块分别放置在不同的js文件中,以便于开发过程中众人合作写代码会更加方便,毕竟只需要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢?这正是问题所在,在这本书中指出:Each HTTP request brings with it additional performance overhead,so downloading one single KB file will be faster than downloading four KB files.

下载1个KB的文件比下载4个KB的文件要快,而开发过程中区分开各个文件又有很大的好处,那么合并这个问题也就放在开发完后再处理咯,相信这个操作大家都不会陌生吧,现在的前端工具这么丰富,各位习惯用什么压缩就用什么压缩吧~

这里简单提出下,在载入文件方面还可以用到defer和async属性,用于延迟加载和异步加载,在现代浏览器中,大多数是已经支持defer属性了,还没习惯用这个额,也不知道具体会不会存在什么问题。有兴趣的朋友可自行google该知识点,这里件简单提下吧。

现在的框架也大多配合懒加载和按需加载了。

三:更快速的数据访问

对于浏览器来说,一个标识符所处的位置越深,去读写他的速度也就越慢(对于这点,原型链亦是如此)。这个应该不难理解,简单比喻就是:杂货店离你家越远,你去打酱油所花的时间就越长... 熊孩子,打个酱油那么久,菜早烧焦了 -.-~

如果我们需要在当前函数内多次用到一个变量值,那么我们可以用一个局部变量先将其存储起来,案例如下:

四:DOM操作的优化

众所周知的,DOM操作远比javascript的执行耗性能,虽然我们避免不了对DOM进行操作,但我们可以尽量去减少该操作对性能的消耗。

让我们通过代码解释这个问题:

针对以上方法进行一次改写:

五:减少Dom的重绘重排版

元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排,而字体颜色或者背景色的修改则将导致重绘。对于类似以下代码的操作,据说现代浏览器大多进行了优化(将其优化成1次重排版):

针对多重操作,以下三种方法也可以减少重排版和重绘的次数:

1.Dom先隐藏,操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片段处理,操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本,修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排

五:循环的优化

这应该是较多人都知道的写法了,简单带过即可(后面还是用代码+注释形式说明)~

六:合理利用二进制

如:对2取模,则偶数最低位是0,奇数最低位是0,与1进行位与操作的结果是0,奇数的最低位是1,与1进行位与操作的结果是1。

代码如下:

虽说现代浏览器都已经做的很好了,但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响,但是从多个点进行优化后,可能产生的就会质的飞跃了~

探讨JavaScript标签位置的存放与功能有无关系 在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。一般来说,script元素放在哪里与其的功能作用是紧密相关的

JavaScript程序开发之JS代码放置的位置 JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下。一般来说有两种方式,写在界面上和使用.js文件。1.1界面上的Head部分可以

input点击后placeholder中的提示消息消失 html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用。但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,

标签: js知识总结

本文链接地址:https://www.jiuchutong.com/biancheng/383817.html 转载请保留说明!

上一篇:JavaScript焦点事件、鼠标事件和滚轮事件使用详解

下一篇:探讨JavaScript标签位置的存放与功能有无关系(javascript标签大全)

  • 免税肉类主要品种目录
  • 什么情况下个人资产会被冻结
  • 增值税开票软件口令锁定怎么办
  • 增值税专用发票可以开电子发票吗
  • 企业所得税会计分录怎么做
  • 二手房交易需要购房发票吗
  • 继续教育报名发什么文件
  • 会计分录的含义及三要素
  • 其他应付款贷方负数怎么调整
  • 其他债权投资有减值吗
  • 不动产租赁属于经营租赁吗
  • 增值税发票税号0和O
  • 一般纳税人房租费的税率是多少
  • 申报入库税款怎么分税种发给税管员
  • 小规模纳税人减征增值税
  • 单位职工医疗补助
  • 教育费附加会计分录
  • 个人投资借款长期不还要缴纳个人所得税吗?
  • 营改增以后小规模纳税人如何纳税
  • 上个月有留抵税这个月怎么结转税金
  • 餐费适用税率
  • 为什么增值税普通发票不能抵扣
  • 开发经济适用房是否需要缴纳土增税
  • 公司社保和公积金没有足额缴纳
  • 支票收款
  • 转移性支出与转移性收入相对应主要包括
  • 充值销售技巧和话术总结
  • 交付使用资产科目核算
  • 合伙企业分红是免税企业需要缴纳什么税
  • 应收股利属于其他业务吗
  • 汇算清缴税务审计报告
  • 老板请客吃饭拿餐饮发票公司报销怎么账务处理?
  • 如何正确安装锯条
  • mac和wondows
  • Win7系统中如何快速查询文件内容
  • 退货的增值税专票怎么开
  • framework core
  • 固定资产清查盘盈盘亏的账务处理
  • 增值税缓交政策
  • vue3.0用法
  • 2023值得推荐的手机
  • IntersectionObserver 翻译
  • 劳务费个税申报流程
  • 契税计税依据是否包含耕地占用税
  • 第一次购买金税盘会计分录
  • 农业技术服务费税率
  • 企业新成立刻章要求
  • 净营业周期为负数
  • sql server2005使用方法
  • 建筑业成本核算表格
  • 企业中间投入
  • 社会组织志愿者参观泉州华侨历史博物馆
  • 餐费计入哪个科目合理避税
  • 发票融资贷款怎么做账
  • 国家土地补偿款
  • 预缴的增值税放哪个科目
  • 发票金额和付款金额差几毛钱
  • 小规模纳税人购买原材料会计分录
  • 资产减值损失和资产减值准备的区别
  • 分期付款购无形资产怎么入账?
  • 建设工程中设备计入包干价是否合法
  • 借主营业务成本贷库存商品什么意思
  • 如何填写记账凭证视频
  • 银行汇票如何兑现金
  • 发票丢失了怎么报销
  • mysql新手入门
  • mysql 5.7启动
  • 安装 apt
  • win8.1使用
  • win7系统怎么把c盘的内存加到d盘
  • Win10预览版更新弹窗如何关闭
  • javascript字体属性
  • 根据安全生产法的规定,生产经营单位
  • python中导入语句
  • linux的python
  • 修改update.zip
  • js 判断
  • 税务评估风险等级是什么
  • 车没交车船税上路什么后果
  • 农夫山泉水质量合格吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设