前端优化整合

最新推荐文章于 2023-10-31 01:19:39 发布

小米小米呀

最新推荐文章于 2023-10-31 01:19:39 发布

阅读量224

点赞数

分类专栏：前端常用技巧总结

本文链接：https://blog.csdn.net/qq_36478297/article/details/109775633

版权

前端常用技巧总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.避免全局查找
在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

function search() {  
 //当我要使用当前页面地址和主机域名 
 alert(window.location.href + window.location.host); 
 }

最好的方式是如下这样先用一个简单变量保存起来

 function search() {  
 var location = window.location; 
 alert(location.href + location.host); 
 }

2.数字转换成字符串
般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，
性能上来说：(“” +) > String() > .toString() > new String() .
如：var str=""+1;
3.避免低效率的脚本位置
HTML 4 规范指出低效率脚本位置示例：

<html><head> 
 <title>Source Example</title> 
 <script type="text/javascript" src="script1.js"></script> 
 <script type="text/javascript" src="script2.js"></script> 
 <script type="text/javascript" src="script3.js"></script> 
 <link rel="stylesheet" type="text/css" href="styles.css"></head><body> 
 <p>Hello world!</p></body></html>

然而这种常规的做法却隐藏着严重的性能问题。
在清单 2 的示例中，当浏览器解析到因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。下图描述了页面加载过程中脚本和样式文件的下载过程。
我们可以发现一个有趣的现象：第一个 JavaScript 文件开始下载，与此同时阻塞了页面其他文件的下载。
此外，从 script1.js 下载完成到 script2.js 开始下载前存在一个延时，这段时间正好是 script1.js 文件的执行过程。每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中，用户看到的是一片空白的页面。
从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息，因为尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。因此，尽管最新的浏览器通过允许并行下载提高了性能，但问题尚未完全解决，脚本阻塞仍然是一个问题。
由于脚本会阻塞页面其他资源的下载，因此推荐将所有推荐的代码放置位置示例：

<head> 
 <title>Source Example</title> 
 <link rel="stylesheet" type="text/css" href="styles.css"></head><body> 
 <p>Hello world!</p> 
 <!-- Example of efficient script positioning --> 
 <script type="text/javascript" src="script1.js"></script> 
 <script type="text/javascript" src="script2.js"></script> 
 <script type="text/javascript" src="script3.js"></script></body></html>

这段代码展示了在 HTML 文档中放置这是优化 JavaScript 的首要规则：将脚本放在底部。
4.避免与null进行比较
由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，尝试使用以下技术替换：
1、如果值应为一个引用类型，使用instanceof操作符检查其构造函数
2、如果值应为一个基本类型，作用typeof检查其类型
3、如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上
5.字符串连接
如果要连接多个字符串，应该少使用+=，如

s+=a;  
s+=b;  
s+=c;

应该写成

s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

var buf = []; 
 for (var i = 0; i < 100; i++) { buf.push(i.toString()); 
 } 
var all = buf.join("");

6.各种类型转换

var myVar = "3.14159", 
 str = "" + myVar, // to string  
 i_int = ~ ~myVar, // to integer  
 f_float = 1 * myVar, // to float  
 b_bool = !!myVar, /* to boolean - any string with length and any number except 0 are true */ 
 array = [myVar]; // to array

如果定义了toString()方法来进行类型转换的话，推荐显式调用toString() ，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。
7.多个类型声明
在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，如下代码，上面代码格式也挺规范，让人一看就明了。

var myVar = "3.14159", 
 str = "" + myVar, 
 i_int = ~ ~myVar, 
f_float = 1 * myVar, 
 b_bool = !!myVar,  
array = [myVar];

8.插入迭代器
如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]。
9.使用直接量
var aTest = new Array(); //替换为 var aTest = [];
var aTest = new Object; //替换为 var aTest = {};
var reg = new RegExp(); //替换为 var reg = /…/;
//如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
var oFruit = new O;
oFruit.color = “red”;
oFruit.name = “apple”;
//前面的代码可用对象字面量来改写成这样： var oFruit = { color: “red”, name: “apple” };
10.避免双重解释
如果要提高代码性能，尽可能避免出现需要按照JavaScript解释的字符串，也就是
1、尽量少使用eval函数
使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用Eval带来的安全性问题也是不容忽视的。
注：eval() 函数
定义和用法：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法：eval(string)
例子：eval(“2+3”) // 返回 5
2、不要使用Function构造器
不要给setTimeout或者setInterval传递字符串参数
var num = 0;
setTimeout(‘num++’, 10);
//可以替换为：
var num = 0;
function addNum() {
num++;
}
setTimeout(addNum, 10);
11.缩短否定检测
if (oTest != ‘#ff0000’) {
//do something
}
if (oTest != null) {
//do something
}
if (oTest != false) {
//do something
}
//虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
if (!oTest) {
//do something
}
12.释放javascript对象
在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。
对象：obj = null
对象属性：delete obj.myproperty
数组item：使用数组的splice方法释放数组中不用的item

13.性能方面的注意事项
1、尽量使用原生方法
2、switch语句相对if较快
通过将case语句按照最可能到最不可能的顺序进行组织。
3、位运算较快
当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快。
4、巧用||和&&布尔运算符
function eventHandler(e) {
if (!e) e = window.event;
} //可以替换为：
function eventHandler(e) {
e = e || window.event;
}
if (myobj) {
doSomething(myobj);
} //可以替换为：
myobj && doSomething(myobj);
14.避免错误应注意的地方
1、每条语句末尾须加分号
在if语句中，即使条件表达式只有一条语句也要用{}把它括起来，以免后续如果添加了语句之后造成逻辑错误。
2、使用+号时需谨慎
JavaScript 和其他编程语言不同的是，在 JavaScript 中，’+'除了表示数字值相加，字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符’++’混淆而引起计算错误。

var valueA = 20; 
 var valueB = "10"; 
 alert(valueA + valueB); //ouput: 2010  
 alert(valueA + (+valueB)); //output: 30  
 alert(valueA + +valueB); //output:30  
 alert(valueA ++ valueB); //Compile error

3、使用return语句需要注意
一条有返回值的return语句不要用()括号来括住返回值，如果返回表达式，则表达式应与return关键字在同一行，以避免压缩时，压缩工具自动加分号而造成返回与开发人员不一致的结果。

function F1() { 
 var valueA = 1; 
 var valueB = 2; 
 return valueA + valueB; 
 } 
 function F2() { 
 var valueA = 1; 
 var valueB = 2; 
 return 
 valueA + valueB; 
 } 
 alert(F1()); //output: 3  
 alert(F2()); //ouput: undefined

15.和=的区别
避免在if和while语句的条件部分进行赋值，如if (a = b)，应该写成if (a == b)，但是在比较是否相等的情况下，最好使用全等运行符，也就是使用===和!操作符会相对于和!=会好点。==和!=操作符会进行类型强制转换。
var valueA = “1”;
var valueB = 1;
if (valueA == valueB) {
alert(“Equal”);
}
else {
alert(“Not equal”);
}
//output: “Equal”
if (valueA === v

alueB) { 
 alert("Equal"); 
 } 
 else { 
 alert("Not equal"); 
 } 
 //output: "Not equal" 
16.何时用单引号，何时用双引号
虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号。
17.部署
1、用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
2、部署之前推荐使用压缩工具将JS文件压缩
3、文件编码统一用UTF-8
4、JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。
18.页面出现音视频标签，我们不让页面加载的时候加载这些资源（资源太大）
只需设置preload=“none”,页面加载完时就会开始加载。
19.交互时，数据尽可能基于json格式进行传送（处理方便，资源偏小）==》相对于XML

20.进行js封装，减少冗余代码。
21.css中设置定位后，最好使用z-index改变层级，让盒子不在同一平面上，性能会提高一丢丢。
22.基于AJAX的get请求根据需求产生缓存（非304），但不建议使用。
23.尽量减少filter属性滤镜的使用。
24.css导入尽量减少@import是同步操作，资源返回才向下渲染，而link是异步请求。
重量级优化：CDN加速（有钱上面的都是浮云。）
25.减少递归的使用，避免栈内存嵌套，尽量使用尾递归。
26.避免使用iframe
27.浏览器缓存

前端优化2
前端性能优化的原则其实就是更好的用户体验，具体实现的目标大体有两个：
合理使用内存或缓存，减少请求；
减少CPU或者GPU的计算，达到更快的展现。
前端在性能优化的方向大体有两个：
减少页面体积，提升网络加载
优化页面渲染
一.减少页面体积，提升网络加载
1、静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）
1）压缩是为了减小文件体积，减轻网络负载，达到更快的下载；
2）.合并和雪碧图都是为了减少文件的请求次数，但不是合并的就一个比没有合并时加载快，要看合并之后的体积，若文件合并后太大了也不太利于性能优化，所以在实际的项目中要做好权衡。
2、静态资源缓存（资源名称加 MD5 戳）
可以通过链接名称控制缓存：通过前端构建工具为打包的文件添加md5后缀，这样当打包上线时请求的链接发生改变，这样可以防止由于缓导致静态资源更新失效；
3、使用 CDN 让资源加载更快
二.优化页面渲染
1、CSS 放前面，JS 放后面
1)浏览器在渲染解析过程中，若遇到和