Performance ecriture en couleur

**Vantrax** · 26/01/2010, 18h55

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

**SpaceFrog** · 26/01/2010, 21h36

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 26/01/2010, 21h48

une version un poil plus rapide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 26/01/2010, 22h03

...

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 27/01/2010, 08h01

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

**SpaceFrog** · 27/01/2010, 08h20

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

Performance ecriture en couleur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager