web性能优化浅显理解

Posted 2021-04-30 菜鸟杂文

1、可缓存的AJAX

ajax经常被提及的一个好处就是由于从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的javascript和xml响应上花费时间。

在很多应用中，用户是否需要等待响应取决于ajax如何来使用,例如在一个基于web的email客户端，用户必须等待ajax返回符合他们条件邮件的查询结果，记住（异步并不是意味着是即时）。

为了提交性能，优化ajax响应是很重要的，提交ajax性能的措施中最重要的方法就是使响应具有可缓存性。

3.1、gzip压缩文件

3.2、减少dns查找次数

3.3精简jacascript

3.4、配置etags

2、推迟加载内容

可以仔细看一下网页，有哪些内容是页面呈现时所必须首先加载的？那些内容和结构可以稍后在加载？

把整个过程按照ONLOAD事件分隔成两部分，JAVASCRIPT是一个理想的选择，例如，如果你有用于实现拖放和动画的javascript，那么它就以等待稍后记载，因为页面上的拖放元素是在初始化呈现后才发生的。其它的例如隐藏部分的内容（用户操作之后才显示的内容）和处于折叠部分的图像也可以推迟加载。

当性能目标和其它网站开发实践一致时就会相得益彰，在贼众情况下，通过程序提高网站性能的方法告诉我在支持javascript的情况下，可以先去除用户体验，不过这要保证你的网站在没有javascript也可以正常运行，在确定页面运行正常后在加载脚本来实现如拖放和动画等更加花哨的效果。

3、预加载

预加载和后加载看起来狮视乎恰恰相反，但是实际上预加载是为了实现另外一种目标，预加载是在浏览器空闲时请求将来可能会用到的页面内容（如css\images\js）。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大提高访问速度。

无条件加载：onload事件时，直接加载额外的内容页面。

有条件的加载：根据用户的操作来有根据的判断用户下面可能去往的页面并相应的预加载内容。

有预期的加载：载入重新设计过的页面时使用预加载

4、不要在html中缩放图片

在html中不要为了设置长宽而使用比实际要大的图片。应该应该使用50*50而不是把100*100的图片缩小

代码级优化7、 Javascript(1). DOMDOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：a. HTML Collection（HTML收集器，返回的是一个数组内容信息）　　在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。　　因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。b. Reflow & Repaint　　除了上面一点之外， DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的，具体的可以参加以下文章：如何减少浏览器的repaint和reflow?Understanding Internet Explorer Rendering BehaviourNotes on HTML Reflow(2). 慎用 withwith(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。　　因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。(3). 避免使用 eval和 Function　　每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。(4). 减少作用域链查找（这方面设计到一些内容的相关问题）　　前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。　　低效率的写法：// 全局变量 var globalVar = 1; function myCallback(info){ for( var i = 100000; i--;){ //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次 globalVar += i; }} 　　更高效的写法：// 全局变量 var globalVar = 1; function myCallback(info){ //局部变量缓存全局变量 var localVar = globalVar; for( var i = 100000; i--;){ //访问局部变量是最快的 localVar += i; } //本例中只需要访问 2次全局变量在函数中只需要将 globalVar中内容的值赋给localVar 中区globalVar = localVar; }　　此外，要减少作用域链查找还应该减少闭包的使用。(5). 数据访问Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：a. 对任何对象属性的访问超过 1次b. 对任何数组成员的访问次数超过 1次　　另外，还应当尽可能的减少对对象以及数组深度查找。(6). 字符串拼接　　在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。