前端js优化方案(连续更新)

最近在读《高性能javascript》,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发布一些前端教程还有前端干货,话不多说,进入我们的正题

一、js优化之加载

1、script标签放在底部,不要放在head标签;

2、尽量减少js文件数量

3、给script标签添加一个defer属性,defer属性指明所含的脚本不会修改DOM,因此代码能安全地延迟执行。

<script type="text/javascript" src="file.js" defer></script>

4、把loadScript()函数直接嵌入页面,从而 避免多产生一次HTTP请求;一旦页面初始化所需要的代码完成下载,你可以继续自由地使用loadScript();去加载页面其他的功能所需要的脚本;

5、YUI3的方式、LazyLoad类库(自己百度一下这个脚本)

6、LABjs:(这个也是一个脚本文件,可以自己搜索一下哈)

$LAB.script()方法用来定义需要下载的js文件,$LAB.wait()用来指定文件下载并执行完毕后所调用的函数

二、数据存取优化

1、函数中读写局部变量总是最快的,读写全局变量通常是最慢的。请记住,全局变量总是存在于执行环境作用域链的最尾端,因此他也是最远的。对所有浏览器而言,总分趋势是,一个标识符所在的位置越深,它的读写速度也就越慢。

最好的方式是把使用一次以上的全局变量用局部变量代替。例如:

Var doc =document;

2、对象成员--原型

js中的对象是基于原型的。原型是其他对象的急促,它定义并实现了一个新创建的对象所必须包含的成员列表。

因此对象可以有两种类型:实例成员和原型成员。实例成员直接存在于对象实例中,原型成员则从对象原型继承而来。

3、对象成员--原型链

使用构造函数Book来创建一个新的Book实例。实例boo1的原型(_proto_)是Book.prototype,而Book.prototype的原型是object。

4、避免使用with语句,因为他会改变执行环境作用域链。同样,try-cath语句中catch子句也有同样的影响,因此也要小心使用;

5、通常来说,可以通过吧常用的对象成员、数组元素、跨域变量保存在局部变量中来改善js性能,因为局部变量访问速度更快。

三、优化DOM编程

1、var element= document.querySelectorAll("#menu a ");

最新的浏览器提供了一个名为querySelectorAll()的原声dom方法;

2、获取页面中有些class为‘waring’和‘notice’的元素

Var errs = document.querySelectorAll(‘div.waring,div.notice‘);

3、为了防止页面多次重排,可以将样式的修改合并在一起然后一次处理,这样只会修改一次DOM

Var el = document.getElementById(‘mydiv‘);

el.style.cssText ="border:1px solid red;border-right:2px;padding:5px;"

这样会覆盖已存在的样式信息,如果保留现有样式,可以:

el.style.cssText +=‘;border-left:1px;’;

另外一种就是修改class的名称;

4、一个减少重排的方式是通过改变display睡醒,临时从文档中移除元素,然后再恢复他

5、另外一种减少重排的方法是在文档之外创建并更新一个文档片段,然后把它附加到原始列表中。

Var fragement = document.getElementById(“mylist”);

appendDataToElement(fragement,data);

Document.getElementById(‘mylist‘).appendChild(fragement);

6、还有一种解决方案是为需要修改的节点创建一个备份,然后对副本进行操作,一旦操作完成,就用新的节点替代旧的节点

Var old = document.getElementById(“mylist”);

Var clone = old.cloneNode(true);

appendDataToElement(clone,data);

Old.parentNode.replaceChild(clone,old);

推荐使用文档片段的方案,因为所产生的DOM遍历和重拍次数最少。

(持续更新。。。。)

时间: 2024-10-13 12:24:18

前端js优化方案(连续更新)的相关文章

前端性能优化方案

前端开发性能优化方案 在JS中尽量减少闭包的使用(原因:闭包会产生不释放的栈内存) A:循环给元素做事件绑定的时候,尽可能的把后期需要的信息(例如索引)存储到元素的自定义属性上,而不是创建闭包存储 B:可以在最外层形成一个闭包,把一些后续需要的公共信息进行存储,而不是每一个方法都创建闭包(例如单例模式) C:尽可能的手动释放不被占用的内存 ... 尽量合并CSS和JS文件(把需要引入的CSS合并为一个,JS也是合并为一个),原理是在减少HTTP请求次数,尽可能的把合并后的代码进行压缩,减小HTT

前端性能优化方案索引

作者:HaoyCn 网址:http://segmentfault.com/a/1190000003821219 陆续整理和不断更新网络上给出的前端性能的优化方案. 这里只是做一个总概括式的索引,每一个方案都十分值得推敲和细说. 1 请求和响应 缓存控制 请求头里,可以发送 If-Modified-Since 以及 If-None-Match 等信息,来询问服务端请求内容是否有更新,如果没有更新,可返回304,告诉浏览器使用缓存,避免重新下载资源.Pragma 和 Cache-Control 等也

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

前端页面优化方案

前端页面优化主要有2方面: 1.页面级别 一.减少http请求次数,每个请求都是有成本,请求多了数据显示慢,影响页面渲染. 实现方法:1.合理设置http缓存  将请求的内容缓存在本地,下次用时不用再去请求.2.合并页面所用的CSS图片,使加载图片的次数减少. 二.将JS文件置于文档底部,使其不影响页面的渲染(js阻塞会影响页面的渲染),而且尽量不要用内联JS,如果用尽量异步执行它. 三.CSS前置,将CSS文件尽量放置在head中,使其不影响页面渲染. 四:尽量减少JS文件和CSS文件的个数,

前端攻略系列(一) - 前端各种优化(保证持续更新)

前端性能优化 1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚

前端性能优化方案都有哪些?

前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提供更为友好的体验. 2. 从服务商角度而言,优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用. 前端优化的途径有很多,按粒度大致可以分

前端资源优化方案理解

写这个的起源是知乎上的一个答案,有兴趣可以看一下https://www.zhihu.com/question/20790576 配置超长时间的本地缓存 —— 节省带宽,提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 资源发布路径实现非覆盖式发布 —— 平滑升级 这个图挺好的我就盗图啦~~ 1.利用304本地缓存 如果每次用户访问页面都要加载,很浪费呀,于是我们可以用304缓存呀 304这个状态码的含义是“服务器端没有更新”,也就是说客户端的文

前端图片优化方案

在知乎上看见的一个回答(图片较多的网站,如淘宝京东.美丽说花瓣.QQ空间.百度图片等都采用哪些技术优化图片展示?),自己做一些测试以及添加一些自己的理解整理成章. 1.使用base64编码代替图片 Base64目前主要用于HTML5.移动开发等不考虑IE6的场景中.图片大小不宜超过2KB,不然编码出来的会很长. 使用方法: <img src="base64编码后的字符串"> 或者CSS中 background-image: url(ase64编码后的字符串); 2.使用cs

由一段代码谈前端js优化和编码规范

这段代码是撸主刚毕业那会写的,主要是实现一个左侧的导航条的折叠功能.当时实现的比较简陋,每次在导航条增加新的项目的时候,都要手动去修改js代码中写死的索引...确实是比较恼火的,后来就修改了一下,能够自动的查找索引了,但是写的代码很不规范,前几天看到这段代码的时候,简直要吐血...所以就简单优化了一下 1.情景描述: html代码大致就是如下所示: <a><li></li></a> <li></li> <li></l