Performance ecriture en couleur

Version imprimable

26/01/2010, 18h55
Vantrax

Performance ecriture en couleur

Bonjour,

je souhaiterais afficher un texte au format HTML en colorant chacune des lettres en fonction d'un code couleur prédéfinit. Pour rendre la chose légèrement moins obscure, je dois dessiner des séquences génétiques. La portion des séquences à afficher est fonction de la position d'un slider. Puisque les séquences font plusieurs kilobases je me dois de traiter les portions d'intérêt des séquences à chaque modification de la localisation du slider.

Pour cela je fais appel à JavaScript pour parcourir ma structure de données afin de reconstruire mes séquences, pour ensuite modifier le contenu de la div qui les héberge.

Lorsque je ne souhaite pas colorer mes séquences les performances sont plus que correct cependant lorsque je souhaite colorer chacune des bases (lettres) cela devient beaucoup plus couteux.

Dans un contexte de coloration des séquences je parcours ma structure de données puis j'encadre chaque lettre par la balise font adéquate à l'aide de simple conditionnelle...mais cela est beaucoup trop couteux ... l'interprétation du HTML devient trop pénalisante.

Ainsi j'aurais aimez avoir votre opinion sur les différentes alternatives qui s'offre à moi. Javascript peut-il m'aider via l'utilisation de canvas ? ...

En vous souhaitant une bonne soirée

en effet même en optimisant c'est pas brillant
et curieusement IE s'en sort mieux que ffx :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorem ipsum dolor sit amet</title>
<style type='text/css'>
body{background-color:black;
     font-family:courrier;}
font{float:left;}
div {width:100%}
 
</style>
<script type="text/javascript">
var cont0=document.createElement('font');
cont0.style.color='red'
var cont1=document.createElement('font');
cont1.style.color='skyblue'
var cont2=document.createElement('font');
cont2.style.color='lime'
var cont3=document.createElement('font');
cont3.style.color='yellow'
var blanccont=new Array(cont0,cont1,cont2,cont3)
var dest=document.getElementById('bar');
var val=0;
 
function init(){
var texte=document.getElementById('foo').innerHTML.replace(/[ .,]+/g,'').toUpperCase();
var tabtext=texte.split('');
while(tabtext[val++]){
	new addletter(tabtext[val-1]);
	}
	document.close();
}
 
function addletter(car){
let=blanccont[val%4].cloneNode(true);
let.innerHTML=car;
bar.appendChild(let);
}
</script>
</head>
 
<body onload='init()'>
<div id="foo" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.incidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverrat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.is elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesqut lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla  feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ces vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna  dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gr leo eget tempor.
</div>
<div id="bar">
</div>
</body>
 
</html>

ici le test est fait sur 10 000 caractères.
a voir si on peut trouver un element DOM avec moins de propriétés que la balise font pour le clonage .

Javascript reste javascript... y compris avec la balise canvas, à partir du moment ou l'on rentre dans des boucles. :(

une version un poil plus rapide:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorem ipsum dolor sit amet</title>
<style type='text/css'>
body{background-color:black;
     font-family:courrier;}
font{float:left;}
div {width:100%}
 
</style>
<script type="text/javascript">
var cont0=document.createElement('font');
cont0.style.color='red'
var cont1=document.createElement('font');
cont1.style.color='skyblue'
var cont2=document.createElement('font');
cont2.style.color='lime'
var cont3=document.createElement('font');
cont3.style.color='yellow'
var blanccont=new Array(cont0,cont1,cont2,cont3)
var dest=document.getElementById('bar');
var val=0;
var tabtext=new Array()
 
function init(){
var texte=document.getElementById('foo').innerHTML.replace(/[ .,]+/g,'').toUpperCase();
tabtext=texte.split('');
for (i=0;i<tabtext.length;i=i+4){
	new addletter(i);
	}
	document.close();
}
 
function addletter(ind){
let0=blanccont[0].cloneNode(true);
let0.innerHTML=tabtext[ind];
bar.appendChild(let0);
 
let1=blanccont[1].cloneNode(true);
let1.innerHTML=tabtext[ind+1];
bar.appendChild(let1);
 
let2=blanccont[2].cloneNode(true);
let2.innerHTML=tabtext[ind+2];
bar.appendChild(let2);
 
let3=blanccont[3].cloneNode(true);
let3.innerHTML=tabtext[ind+3];
bar.appendChild(let3);
}
 
</script>
</head>
 
<body onload='init()'>
<div id="foo" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.incidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverrat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.is elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesqut lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla  feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ces vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna  dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gr leo eget tempor.
</div>
<div id="bar">
</div>
</body>
 
</html>

26/01/2010, 22h03
SpaceFrog
...

qui dit slider ...
dit pas obligé de coloriser toute la chaine ...

on peut imaginer ne coloriser qu'une portion du code la partie visible dans le slider
Etant dans un array, chaque caractères possède un indice dont le modulo pourrait donner la couleur ...
Code:

1 2 ....M L K M K | L J M K J M L K J M L K J M K | J M L K J....
la partie entre les barres rouges est visible et colorisée
seules quelques lettres à droites et a gauches seraient colorisées
les autre pas chargées ...
un petit script gèrant le slide viendrait mettre au bout les lettres colorisées
d'un coté et supprimant les lettres sortant du champs du slider de l'autre i
27/01/2010, 08h01
Bovino

Salut.

Il s'agit probablement d'un problème lié à la balise <font> car avec des span c'est plus rapide.
J'imagine que font doit systématiquement aller chercher la police dans l'OS, ce qui n'est pas idéal pour les perfs.
En plus, comme il est fortement recommandé de ne plus l'utiliser, je vois mal pourquoi les navigateurs s'intéresseraient à ses performances :mrgreen:
27/01/2010, 08h20
SpaceFrog

Citation:

a voir si on peut trouver un element DOM avec moins de propriétés que la balise font pour le clonage

On peut trouver de la doc là dessus, j'ai pris font en pensant apparemment à tort que c'était plus léger :(
27/01/2010, 09h59
le_chomeur

solution testé de mon coté : span + class css : quasiment instantanée :)

En effet fillot y'a pas photo ^^
10000 caractères en 1.5 secondes !

ffx semble avoir un peu plus de mal par contre si l'on double le nombre de caractères.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorem ipsum dolor sit amet</title>
<style type='text/css'>
body{background-color:black;
     font-family:courrier;}
span{float:left;}
div {width:100%}
.red {color: red;}
.skyblue {color: skyblue;}
.lime {color: lime;}
.yellow {color: yellow;}
 
</style>
<script type="text/javascript">
var cont0=document.createElement('span');
cont0.className='red'
var cont1=document.createElement('span');
cont1.className='skyblue'
var cont2=document.createElement('span');
cont2.className='lime'
var cont3=document.createElement('span');
cont3.className='yellow'
var blanccont=new Array(cont0,cont1,cont2,cont3)
var dest=document.getElementById('bar');
var val=0;
var tabtext=new Array()
 
function init(){
var texte=document.getElementById('foo').innerHTML.replace(/[ .,]+/g,'').toUpperCase();
tabtext=texte.split('');
for (i=0;i<tabtext.length;i=i+4){
	new addletter(i);
	}
	document.close();
}
 
function addletter(ind){
let0=blanccont[0].cloneNode(true);
let0.innerHTML=tabtext[ind];
bar.appendChild(let0);
 
let1=blanccont[1].cloneNode(true);
let1.innerHTML=tabtext[ind+1];
bar.appendChild(let1);
 
let2=blanccont[2].cloneNode(true);
let2.innerHTML=tabtext[ind+2];
bar.appendChild(let2);
 
let3=blanccont[3].cloneNode(true);
let3.innerHTML=tabtext[ind+3];
bar.appendChild(let3);
}
 
</script>
</head>
 
<body onload='init()'>
<div id="foo" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
 
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.incidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatamet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverrat nisi dapibus magna, in 
pellentesque lorem odio a velit. Aenean nibh libero, aliquam vel laoreet
 vel, ornare sit amet arcu. Ut semper pulvinar nulla et lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla vulputate justo nec interdum. Vestibulum feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ultrices vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius consectetur. Nam scelerisque ultricies lectus, sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.is elementum leo. Cras hendrerit, elit in mollis 
viverra, magna lorem dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gravida leo eget tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat 
porta erat, vel vehicula sapien lacinia sit amet. Suspendisse viverra 
nunc sed eros blandit quis lobortis eros porttitor. Nunc placerat dolor 
volutpat nisl placerat egestas. Quisque sed eros ante. Nunc semper, 
risus quis consectetur dapibus, leo nisi euismod tortor, vel mollis diam
 erat nec lorem. Donec sit amet mauris ligula, sit amet laoreet nisl. 
Sed rhoncus, sem et mattis mattis, erat nisi dapibus magna, in 
pellentesqut lobortis. Ut 
scelerisque euismod quam, eleifend posuere est vehicula vitae. Integer 
feugiat commodo magna, a elementum felis dignissim et. In elementum 
tellus hendrerit metus aliquam commodo. Vestibulum accumsan viverra 
ligula, id pretium nulla consequat ac. Donec molestie volutpat dolor. 
Nullam porta volutpat lorem, ut tincidunt sem aliquam at. Phasellus 
metus nisi, semper vitae tempor vitae, iaculis commodo tellus. Aliquam 
erat volutpat.
Praesent quis sem vel ipsum pharetra ullamcorper eget ac magna. Quisque 
fringilla  feugiat tempor 
elementum. Vestibulum pellentesque placerat posuere. Mauris vehicula 
neque nec elit ces vitae pretium elit viverra. Curabitur nunc 
tellus, sodales at feugiat a, tincidunt eu ipsum. Nullam ut mauris sit 
amet libero varius sit 
amet scelerisque mi tincidunt ut. Integer quis magna neque, in auctor 
elit. Sed venenatis elementum leo. Cras hendrerit, elit in mollis 
viverra, magna  dictum lacus, at vehicula lectus lectus et lectus. 
Nunc aliquam gr leo eget tempor.
</div>
<div id="bar">
</div>
</body>
 
</html>

JE pense que couplant cette solution span +css avec l'affichage par portion sur le slider c'est jouable en js

27/01/2010, 19h19
Vantrax

Bonsoir,

Tout d'abord merci pour l'intérêt que vous avez apporté à la problématique, c'est toujours un plaisir d'avoir l'avis pertinent de spécialistes.

La solution apportée via la balise span couplée à l'utilisation de CSS n'est dans mon cas qu'en partie satisfaisante car elle améliore certes les performances mais de façon insuffisante pour amener une résolution complète de mon problème.

Je pense que je vais réorienter mon approche pour associer l'utilisation de span && css avec un rafraîchissement localisé à la sous partie visible dans la div qui héberge les portions de séquences ciblées.

En vous remerciant une nouvelle fois pour votre sympathie et en vous souhaitant une très agréable fin de journée.

Cordialement