实现仿百度图片首页效果_jquery_脚本之家,重排与重绘_javascript技巧_脚本之家

先回顾下前一篇文章高性能JavaScript
DOM编程
,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API
querySelector,在做组合选择的时候可以大胆使用。而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘

tuzhu_req.js 处理文件请求加载异步同步功能,仿效百度图片首页效果制作

实现省市区三级下拉列表框,并且要实现联动效果。

1、什么是重排和重绘浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。

/*土着人开发的require组件 @土着人 (http://www.tuzhuren.com)*/! function {} Function.prototype.bind || (Function.prototype.bind = function { var n = this; if ("function" != typeof n) throw new TypeError("Function.prototype.bind called on incompatible " + n); var o = r.call, i = function() { if  { var e = n.apply(this, o.concat; return Object === e ? e : this; } return n.apply(t, o.concat; }; return n.prototype && (e.prototype = n.prototype, i.prototype = new e, e.prototype = null), i; }); var t = Array.prototype, r = t.slice;}();var require, define;! function { if  { u[e] = !0; var r = document.createElement { var o = setTimeout; r.onerror = function, t() }, r.onreadystatechange = function() { "complete" == this.readyState && clearTimeout } } return r.type = "text/javascript", r.src = e, n.appendChild, r; } } function r { var i = o[e] || ; var a, u = c[e] || {}, s = u.pkg; a = s ? p[s].url : u.url || e, t { n; } function isFunction { return Object.prototype.toString.call === '[object Function]'; } function isArray { return Object.prototype.toString.call === '[object Array]'; } var n = document.getElementsByTagName[0], o = {}, i = {}, a = {}, u = {}, c = {}, p = {}; define = function { if  && isFunction { deps = callback; } i[name] = deps; var r = o[e]; if  { for (var n = 0, a = r.length; a > n; ++n) r[n](); delete o[name]; } }, require = function { e = require.alias; var t = a[e]; if  return t.exports; var r = i[e]; if  return false; t = a[e] = { exports: {} }; var n = "function" == typeof r ? r.apply(t, [require, t.exports, t]) : r; return n && , t.exports; }, require.async = function { function a { for (var t = e.length - 1; t >= 0; --t) { var n = e[t], p = c[n]; p && "deps" in p && a, n in i || n in s || (s[n] = !0, l++, r; } } function u { var r, o, i = []; for (r = 0, o = t.length; o > r; ++r) try { i[r] = require {} n && n.apply; } } "string" == typeof t && ; for (var p = t.length - 1; p >= 0; --p) t[p] = require.alias; var s = {}, l = 0; a; }, require.resourceMap = function { var t, r; r = e.res; for  r.hasOwnProperty; r = e.pkg; for  r.hasOwnProperty; }, require.loadJs = function; }, require.loadCss = function { var t = document.createElement; t.type = "text/css", t.styleSheet ? t.styleSheet.cssText = e.content : t.innerHTML = e.content, n.appendChild { var r = document.createElement; r.href = e.url, r.rel = "stylesheet", r.type = "text/css", n.appendChild; } }, require.alias = function { return e }, require.timeout = 5e3, define.amd = { jQuery: !0, version: "1.0.0" }} {  { var widgets = [], nameIdxMap = {}, callbacks = [], remainings = 0; require.widget = { register: function { var idx = nameIdxMap[name]; if  { nameIdxMap[name] = widgets.length; widgets.push; remainings++; } else { widgets[idx]++; } }, ready: function { callbacks.push({ func: callback, context: ctx }); if  { _ready(); } }, loaded: function { var idx = nameIdxMap[name], num = widgets[idx] - 1; widgets[idx] = num; if (num == 0 && remainings) { remainings--; } if  { _ready(); } } }; function _ready() { var callback; while (callback = callbacks.pop { callback.func.call;

方法一:

DOM树表示页面结构,渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none
在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子。一旦DOM和渲染树构建完成,浏览器就开始显示页面元素。

希望本文能够给大家学习使用javascript处理文件请求加载异步同步功能有所帮助。

1.视图代码

当DOM的变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排。完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

@Html.HiddenFor@Html.HiddenFor@Html.HiddenFor

并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,这种情况下只会发生重绘。

2.JS调用

2、重排和重绘的代价究竟多大重排和重绘的代价有多大?我们再回到前文那个过桥的例子上,细心的你可能会发现了,千倍的时间差并不是由于“过桥”一手造成的,每次“过桥”其实都伴随着重排和重绘,而耗能的绝大部分也正是在这里!

var selectVa2 = new CitySelect({data: data,provId: "#prov5",cityId: '#city5',areaId: '#area5',isSelect: true});
var times = 15000;// code1 每次过桥+重排+重绘console.time;for(var i = 0; i < times; i++) { document.getElementById.innerHTML += 'a';}console.timeEnd;// code2 只过桥console.time;var str = '';for(var i = 0; i < times; i++) { var tmp = document.getElementById.innerHTML; str += 'a';}document.getElementById.innerHTML = str;console.timeEnd;// code3 console.time;var _str = '';for(var i = 0; i < times; i++) { _str += 'a';}document.getElementById.innerHTML = _str;console.timeEnd;// 1: 2874.619ms// 2: 11.154ms// 3: 1.282ms

3.引入的js

数据是不会撒谎的,看到了吧,多次访问DOM对于重排和重绘来说,耗时简直不值一提了。

4.js插件下载地址

3、重排何时发生很显然,每次重排,必然会导致重绘,那么,重排会在哪些情况下发生?

js插件下载地址:

1、添加或者删除可见的DOM元素2、元素位置改变3、元素尺寸改变4、元素内容改变5、页面渲染初始化6、浏览器窗口尺寸改变这些都是显而易见的,或许你已经有过这样的体会,不间断地改变浏览器窗口大小,导致UI反应迟钝,现在你可能恍然大悟,没错,正是一次次的重排重绘导致的!

方法二:

4、渲染树变化的排队和刷新思考下面代码:

实现效果根据选择省份,选择对应城市。

var ele = document.getElementById;ele.style.borderLeft = '1px';ele.style.borderRight = '2px';ele.style.padding = '5px';
  城市          region_init("select_province","select_city","select_area");  

发表评论

电子邮件地址不会被公开。 必填项已用*标注