js总结(四):关于高性能
参考《高性能网站建设进阶指南》
不仅仅关注页面加载时间,也要关注下页面操作时的相应速度。页面操作是我们写程序中 实实在在需要的
1、使用局部变量
任何非局部变量,在函数中使用次数超过一次时,就应该将其变成局部变量。
var setName = function (){
if(!$("#name").val()){
$("#name").val("ddd");
}
}
//下面应该变成一个局部变量
var setName = function (){
var $name= $("#name");
if(!$name.val()){
$name.val("ddd");
}
}
全局变量对象始终是作用域中的,最后一个;所以对全局变量的解析是最耗时的。
2、数据存储的位置
4种地方可以存储:字面量值、变量、数组元素、对象属性
字面量值和局部变量中读取值的开销差异很小,可以忽略不计。主要差别是数组和对象中读取值。
在循环,将函数中使用超过一次的对象属性或者数组元素,存储为一个局部变量
var a = ["a","b","c"]
for(var i =0 ;i<a.length){
console.log( a[i]) }
//减少读取数据的长度
var a = ["a","b","c"]
var b =a.length;
for(var i =0 ;i<b){
console.log( a[i]) }
3、流控制
流程的控制是提升性能的重要一环。条件判断,尽可能尽快结束。当仅判断一两个条件时,if语句通常比switch更快。当有2个以上条件判断且条件比较简单时(不是进行范围判断),switch语句更快。
4、减少dom操作
如果必须dom操作,在没显示之前,可以先隐藏再dom操作
js总结(四):关于高性能的更多相关文章
- 前端总结·基础篇·JS(四)异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 玩转Node.js(四)-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
- js 第四章 cookie的操作
js 第四章 cookie的操作 一.学习要点 掌握cookie的简单应用 二. js 第四章 cookie的操作 了解cookie 什么是cookie? cookie 是存储于访问者的计算机中的变量 ...
- bootstrap学习总结-js组件(四)
这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,博主自身技术有限,写的东西都 ...
- JavaScript--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收机制是啥)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第四篇,是红宝书第四章内容(主要是变量和作用域问题),当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的 ...
- JS正则四个反斜杠的含义
我们首先来看如下代码,在浏览器中输出的是什么? // 在浏览器中输出的 console.log('\\'); // 输出 \ console.log('\\\\'); // 输出 \\ 一:js正则直 ...
- node.js(基础四)_express基础
一.前言 本次内容主要包括: 1.express的基本用法 2.express中的静 ...
- python自动化开发-[第二十四天]-高性能相关与初识scrapy
今日内容概要 1.高性能相关 2.scrapy初识 上节回顾: 1. Http协议 Http协议:GET / http1.1/r/n...../r/r/r/na=1 TCP协议:sendall(&qu ...
- js第四天学习小结:
(1)函数的四种形式小结: 无参无返回值 function tellstory(){ console.log("从前有座山"); console.log(" ...
- JS--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收机制是啥)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第四篇,是红宝书第四章内容(主要是变量和作用域问题),当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的 ...
随机推荐
- Codeforces Round #544 (Div. 3) C. Balanced Team
链接:https://codeforces.com/contest/1133/problem/C 题意: 给n个数, 在这n个数中选最多n个数,来组成一个队伍. 保证这n个数的最大最小差值不大于5. ...
- Marriage Ceremonies LightOJ - 1011
Marriage Ceremonies LightOJ - 1011 常规状压dp.popcount(S)表示S集合中元素数量.ans[S]表示S中的女性与前popcount(S)个男性结婚的最大收益 ...
- linux的目录结构详细介绍
linux的目录结构详细介绍 1. /目录(根目录) 2./ect/目录 特定主机系统范围内的配置文件. 3./usr/目录 默认软件都会存于该目录下.用于存储只读用户数据的第二层次:包含绝大多数的用 ...
- ImageView加载长图(适用不需要缩放的情况)
此案例适用于加载网络长图且图片的宽和高已知的情况.由于ImageView加载图片有一个4096*4096的限制,所以对于巨长图的加载比较麻烦,需要我们自己去手动处理. 有两种解决方案:第一种就是比较l ...
- leetcode315 Count of Smaller Numbers After Self
思路: bit + 离散化. 实现: #include <bits/stdc++.h> using namespace std; class Solution { public: int ...
- poj2139 Six Degrees of Cowvin Bacon
思路: floyd 实现: #include <iostream> #include <cstdio> #include <cstring> #include &l ...
- chrome inspect出现白屏的解决方案
点inspect后 弹出框,可是里面一片白色 PS:原效果不是这样,只是图找不到随便p的 原因可以看这个:http://www.cnblogs.com/slmk/p/7591126.html 大概意思 ...
- How `new’ operator works ?
这是2013年写的一篇旧文,放在gegahost.net上面 http://raison.gegahost.net/?p=15 February 15, 2013 How `new’ operator ...
- 原生js的容易忽略的相似点(二)
1.new Object 和字面量 {}测试; <script type="text/javascript"> //1.new出来对象 console.log(obj, ...
- (译)IOS block编程指南 1 介绍
Introduction(介绍) Block objects are a C-level syntactic and runtime feature. They are similar to stan ...