网站优化之页面优化

2016-02-19 17:07 2 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是网站优化之页面优化,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

  效率和开始的节奏以及功能的丰富彼此相互制约。最近忙着做功能,明知道有些地方可以优化的也得先放放,但是老大一关注,你的马上去做。

  在老大的眼中,一次优化好后就可以不再优化,或者只需要很少的时间来维护,却不知道,优化是一个持续的过程,想法赶不上变化。

  做人难,做事情更难!

  优化如何开始,怎么开始,以及做些什么还是值得思量的。

  优化的一些准则:

  1 优化是持续存在的,当你开始做一个功能的时候,优化就开始了。而我们往往认为新做的功能就是一个优化好的功能,殊不知这个功能或者会影响到其他的功能,

  或者先把功能做到70%,稍后再去优化也不迟。

  2 不到万不得已的时候不要去优化。用户对于性能是有一定的忍耐性的,有时一个小小的加载图标就能让用户感到很满足的。

  3 优化时需要写下用例来驱动,什么条件下测试的结果如何,有了测试用例,我们才能做到有的放矢;优化时需要保存系统的一个快照;有了这些历史信息我们才能更好的去对比,去寻找不足和需要继续优化的地方。

  4 优化需要针对的是系统的瓶颈所在,找到系统的性能瓶颈,攻破他,我们得到的是事半功倍的效果。

  对于一个网站的页面优化又该从何入手呢?

  一个web网站的页面的生命周期有3个阶段:

  1 加载

  2 渲染

  3 响应用户的交互

  针对这三个阶段需要采取不同优化策略:

  1 对于加载阶段:

  加载的核心是网络传输,因此重点就是将页面折腾到最小、放到离用户最近的地方,这样加载就快了。具体的实施细则可以参考:yahoo的14条建议

  摘要如下:

  折腾小的话,需要将页面中无用的信息去掉,gzip压缩。

  1)采用yui compressor来进行压缩css和js等

  2)合并js和css文件,使用jsmin等工具

  3)压缩图片,合并背景图。常用工具PngCrush、PngOptimizer。

  4)延迟加载,等用户用到了相应的素材时才对素材进行加载。

  离用户最近的话,那就是用户的浏览器cache了,所以要设置页面元素的尽量长的过期时间,能够cache的统统cache住,能够放到cdn的都放到cdn上去

  2 对于渲染阶段:

  渲染阶段的核心是让用户尽快的看到页面的展现,能够与页面进行交互,因此重点是显示首屏的内容,让用户提早的能够看到页面,感受交互。

  1 页面首屏先显示出来的话,需要将js代码的事件处理在dom树构建好之后,如同jquery的ready事件。

  2 对于html中一些默认可以不关闭的标签,尽早的关闭掉,这样也有助于提高渲染的速度。如果让浏览器去判断何时关闭才是ok的,那需要不少的回溯操作,花费不少的代价。

  msdn上有详细的描述 Close Your HTML Tags

  Unlike XML, HTML has the notion of implicitly closed tags. This includes frame, img, li, and p. If you don’t close these tags, Internet Explorer renders your pages just fine. If you do close your tags, Internet Explorer will render your pages even faster.

  3 一些大图片的延迟加载。由于浏览器并发的连接有限,对于一些大图片会被block住,所以尽量的延迟加载,或者按需加载,渲染的速度也会快一些

  4 将web服务器缓冲区中的内容尽早的输出,会提浏览器开始渲染的时间。

  5 页面首屏的显示尽量不要依赖于js代码。这一点很重要,这样做的话,你的一些css和js就可以延迟加载进来,而不影响首屏的展示

  6 页面onload的时候可以考虑做一些预加载的事情,把一些其它页面需要用到的素材预先加载进来。搜索引擎如google,yahoo都这样做的,悄悄的加载一些大的背景图进来。

scriptwindow.onload = function () {var script = document.createElement(script);script.src = ;document.body.appendChild(script);};/script

  4 对于运行阶段:

  运行阶段的核心是对js代码的优化,根据js代码的执行原理,写出高效的js代码来。

  1)变量使用就近原则

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  js有作用域链的概念,如果本作用域找不到,就会到上一个作用域去找,如果过多的使用全局变量,就会导致每次使用变量都要去层层的检查各个作用域,性能花费不菲啊。

  声明变量时记得要加上var,否则这个变量会被放到window这个顶级作用域下

  不要使用with来遍历,它会阻止js执行器从本地来查找,而是遍历作用链来查找。

  对于一些不得不用的全局变量,利用局部变量来缓存它

var arr = ;var globalVar = 0;(function () {var i;for (i = 0; i  arr.length; i++) {globalVar++;}})();var arr = ;var globalVar = 0;(function () {var i, l, localVar;l = arr.length;localVar = globalVar;for (i = 0; i  l; i++) {localVar++;}globalVar = localVar;})();

  2)对于prototype链也是一样,尽量的避免prototype链的遍历

function A () {}A.prototype.prop1 = 1;function B () {this.prop2 = 2;} B.prototype = new A();var b = new B();alert(b.prop1);

  从b读取属性prop1,就需要从b的prototype链遍历到a的ptototype链,想想如果链很长的话,结果会如何呢

  3)还是prototype,如果要创建许多的对象,建议将对象的公共方法放到prototype中,而不是放到构造函数中。

  由于prototype是公用的,构造函数是每个对象都需要初始化的,会节约不少的内存。

  这个需要根据情况使用,通过prototype会增加对象成员的查找时间。

function Foo () {}Foo.prototype.bar = function () {};function Foo () {this.bar = function () {};}

  4)尽量不要使用eval,除非性能不是问题或者必须使用eval来解决问题。

  同理在seTtimeout或者setInterval是最好使用匿名函数,使用字符串的话,会导致一次eval操作。

setTimeout(function () {// 业务代码}, 50);

  5)字符串的连接操作,尤其实在循环中的连接操作,在ie的一些版本的浏览器上会导致频繁的临时变量的拷贝(如c语言中的realloc),建议使用Array对象的join方法来解决。

  更多可以参考javascript优化

var i, s = ;for (i = 0; i  10000; i++) {s += x;}var i, s = [];for (i = 0; i  10000; i++) {s[i] = x;}s = s.join();

  6)除非是为了动态构建正则表达式,尽量少的使用Regexp对象;而且为了判断一个字符串是否匹配,建议使用test而不是exec,exec有一些性能问题。

  还有,正则表达式尽量的简单,如果复杂的话,想想来回的字符串匹配,复杂度提高不少。

  7) 能够cache的地方尽量的使用cache,尤其使一些循环中使用到的大数据集,相对稳定,又只是大量的读操作。

//没有使用缓存,每次调用都要生成vvar fn = (function () {var b = false, v;return function () {if (!b) {v = ;b = true;}return v;};})();//将v存储到fn中function fn () {if (!fn.b) {fn.v = ;fn.b = true;}return fn.v;}//延迟加载var fn = function () {var v = ;return (fn = function () {return v;})();};

  7)对于一些大数据集的处理,尽量放到server中去做,js处理大数据集没有优势。

  不要让js执行导致ui被阻塞住,这个效果就太差了。

  尽量将长时间js代码通过分块在setTimeout中来做,每块不要超过300ms。否则用户就会有意见了。

function doSomething (callbackFn) {// 做一些初始化的工作(function () {// 做一小块工作,时间不要长if (termination condition) {callbackFn();} else {// 执行下一个块setTimeout(arguments.callee, 0);}})();}

  这和ajax的原理是一样的,多线程,分小块的去执行,提高ui交互的效率。

  原语操作比函数的性能要高很多。尽量使用原语操作

//小于操作var a = 1, b = 2, c;c = Math.min(a, b);c = a  b ? a : b;//数组操作myArray.push(value);myArray[myArray.length] = value;myArray[idx++] = value;

  9)少在循环或者性能关键点处使用异常处理,因为异常处理需要保存不好的堆栈信息。

//循环中使用try、cache不明智var i;for (i = 0; i  100000; i++) {try {...} catch (e) {...}}//将try、cache提取出来var i;try {for (i = 0; i  100000; i++) {...}} catch (e) {...}

  10)性能关键点处少使用for、in,with这种操作,因为涉及到prototype链的查找

var key, value;for (key in myArray) {value = myArray[key];...}//换成数组来操作var i, value, length = myArray.length;for (i = 0; i  length; i++) {value = myArray[i];...}

  11)在if、else的分支中如果分支一样,在外面定义它

function fn () {if (...) {...} else {...}}var fn;if (...) {fn = function () {...};} else {fn = function () {...};}

  12)操作dom树的时候使用innerHtml,一次性的构造,而不是append,每次还需要调整

  不过使用innerHtml也有不少的危险,比如插入script钓鱼脚本等,更多参考

  The Problem With innerHTML

var i, j, el, table, tbody, row, cell;el = document.createElement(div);document.body.appendChild(el);table = document.createElement(table);el.appendChild(table);tbody = document.createElement(tbody);table.appendChild(tbody);for (i = 0; i  1000; i++) {row = document.createElement("tr");for (j = 0; j  5; j++) {cell = document.createElement("td");row.appendChild(cell);}tbody.appendChild(row);}var i, j, el, idx, html;idx = 0;html = [];html[idx++] = ";for (i = 0; i  1000; i++) {html[idx++] = " ;for (j = 0; j  5; j++) {html[idx++] = "   ;}html[idx++] =  ;}html[idx++] =  ;el = document.createElement(div);document.body.appendChild(el);el.innerHTML = html.join(");

  13) 修改dom树时尽量使用clone,而不是动态的再创建。

  至少可以省去不少初始化的时间

var i, j, el, table, tbody, row, cell;el = document.createElement(div);document.body.appendChild(el);table = document.createElement(table);el.appendChild(table);tbody = document.createElement(tbody);table.appendChild(tbody);for (i = 0; i  1000; i++) {row = document.createElement("tr");for (j = 0; j  5; j++) {cell = document.createElement("td");row.appendChild(cell);}tbody.appendChild(row);}var i, el, table, tbody, template, row, cell;el = document.createElement("div");document.body.appendChild(el);table = document.createElement("table");el.appendChild(table);tbody = document.createElement("tbody");table.appendChild(tbody);template = document.createElement("tr");for (i = 0; i  5; i++) {cell = document.createElement("td");template.appendChild(cell);}for (i = 0; i  1000; i++) {row = template.cloneNode(true);tbody.appendChild(row);}

  14)使用documentfragment

var i, j, el, table, tbody, row, cell, docFragment;docFragment = document.createDocumentFragment();el = document.createElement("div");docFragment.appendChild(el);table = document.createElement("table");el.appendChild(table);tbody = document.createElement("tbody");table.appendChild(tbody);for (i = 0; i  1000; i++) {...}document.body.appendChild(docFragment);

  15)事件绑定的时候尽量绑定到最少的页面元素的子集。

  我们用jquery的选择器,常常一下子就选择了许多的元素,each一下,然后绑定事件处理函数。

  如果选择出来的集合很大的话,不仅选择费时间,绑定事件处理操作是比较费时间的。

  适当的时候可以借助事件的冒泡机制来实现事件的绑定。

  要较快页面的显示,光有js的优化是不够的,css也需要进行相应的优化。

  css优化点:

  1)css sprite合并背景图

  2)js不要参与到布局中来,这样的话,在没有js的情况下页面也能够正常的显示,

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  就可以吧js放到后米去加载了。

  3)不要使用ie的表达式,不要难过使用ie的过滤器

  4) 优化table的布局,让table能够在接收到全部数居前就可以进行渲染

Use table-layout:fixedExplicitly define a COL element for each columnSet the WIDTH attribute on each col

  后续还会跟进ajax的优化,以及一些常用的优化工具介绍。

来源:https://www.tulaoshi.com/n/20160219/1614237.html

延伸阅读
标签: Web开发
一个网站的结构代表着这个网站性质,每个行业里都有独特的结构模式。政府和机构性质的网站,简单明了,突出重点,不需要过多的美化工作,网站头部通常设置一个通栏Logo,以代表形象。游戏、下载等等都有自己独特的架构。如果网站的结构没有设置好的话,会严重影响网站的效果。但并不是网站结构设计的好就什么问题都解决了,要把网站优化的...
标签: MySQL mysql数据库
一、什么是索引? 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存。如果没有索引,执行查询时MySQL必须从第一个记录开始扫描整个表的所有记录,直至找到符合要求的记录。表里面的记录数量越多,这个操作的代价就越高。如果作为搜索条件的列上已经创建了索引,MySQL无需扫描任何记录即可迅速得到目标记录所在的...
标签: 网站 网络
网站结构布局 网站结构应选择对搜索引擎比较好的结构方式,目前搜索引擎最欢迎的网站结构是F型树状结构和扁平树状结构的网站。 网站文章的优化 文章标题应包含关键词,选择能吸引人们眼球的标题或选择让人难忘的关键词。 站外优化 站外优化主要是做外链,在b2b平台,博客,黄页等信息平台上发布软文。软文的内容...
如果内容为王的话,那么设计就是城堡。对于企业而言,好的网页设计不仅包含了能够引起访客兴趣的内容,吸引目标用户,而且包含有直观而漂亮的UI设计,促进销售。许多设计师喜欢将自己认为创意爆棚的UI设计直接应用到客户的网站上,但并没有考虑过这种设计是否符合网站的产品,是否符合目标用户群所需要的体验与需求,从这个角度上来说,这样的...
标签: PS PS教程
在使用Photoshop CS之前,需要进行一系列的优化设置。 1.CTRL+K打开Preferences(预设)的对话框,如果不用快捷键,这个命令在Edit(编辑)菜单下。首先查看General(常规),对于Options(选项)区块,选择以下的选项。 1.1:Export Clipboard(输出剪贴板),这个选项允许Photoshop像其他程序中粘贴图像时使用系统剪贴板作为...

经验教程

789

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部