快速解决js动态改变dom元素属性后页面及时渲染的问题
来源：易贤网&& 阅读：350 次&&日期：
温馨提示：易贤网小编为您整理了“快速解决js动态改变dom元素属性后页面及时渲染的问题”,方便广大网友查阅！
下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
今天实现一个进度条加载过程，dom结构其实就是两个div
&div class="pbar"&
&&div class="ui-widget-header" id="percent_bar" style="width: 23%;"&&/div&
控制里层div的宽width属性，就能实现进度条往前走的效果。
我的进度条是显示下载文件的进度，简单实现一共100个文件的话，下载一个就1%，下载了20个就走到20%。于是代码实现如下：
var fileCount=fileList.length();
&fileList.foreach(function(i,obj){
& &........//下载文件
& document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改变内层div的宽度
但是你会看到文件一个个下载下来，但进度始终没有动一动。这是因为js逻辑会优先执行，而页面渲染会在js执行结束后才进行的，这样就无法看到一个正常的进度条了。
怎么能让js逻辑执行等一等页面渲染呢?
var fileCount=fileList.length();
var loop = function () {
&if(i&fileCount)//退出循环
& .....//下载文件
& document.getElementById("percent_bar").style.width=i/fileCount*100+"%";
　　　//下一步循环 &that.loopId = window.setTimeout(loop, 0);7 }
that.loopId = window.setTimeout(loop, 0);
通过settimeout函数可以实现进度条动态效果了。
以上这篇快速解决js动态改变dom元素属性后页面及时渲染的问题就是小编分享给大家的全部内容了，希望能给大家一个参考
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款Currently, i'm experimenting with a very simple GUI drawing ... "engine" (i guess you could call it that). The gist of it:
there is a FrontController that gets
each request has a uid
each uid (read "page") has a declaration of the components ("modules") that are present on it
components are Sprite subclasses and, in essence, are unique
Naturally, i need a way of hiding/showing these sprites. Currently, i have it pretty much like Flex has it by default - in the way "if we are in a place where the comp is visible, create it, cache it and reuse it every time it's visible again".
The question is - which would be the more appropriate and efficient way of hiding and showing - via addChild/removeChild or toggling visible.
The way i see it is that:
visible is quick and dirty (on first tests)
visible does not create a chain of bubbling events like Event.ADDED or Event.REMOVED
invisible components don't get mouse events
So removeChild would be something i'd call when i'm sure, that the component will no longer be necessary on the screen (or the cache is too big, for instance)
What do stackoverflow'ers / AS3-crazed people think?
(forgot about google).
i will be it seems to the manual "OPTIMIZING PERFORMANCE FOR THE FLASH PLATFORM" by Adobe on p. 69 gave me even more confidence.
here's a code snippet i put up to test things for those that are interested:
import flash.display.S
import flash.display.S
import flash.events.E
import flash.events.KeyboardE
import flash.ui.K
import flash.utils.getT
* Simple benchmark to test alternatives for hiding and showing
* DisplayObject.
* new DisplayBM(stage);
* - "1" to addChild (note that hitting it 2 i think
* this is because the player has to check whether or not the comp is
* used elsewhere)
* - "q" to removeChild (2 times in a row will throw an exception)
* - "2" to set visible to true
* - "w" to set visible to false
* @author Vasi Grigorash
public class DisplayBM{
public function DisplayBM(stage:Stage){
var insts:uint = 5000;
var v:Vector.&Sprite& = new Vector.&Sprite&(insts);
var i:Number = v.length, s:Sprite
while (i--){
s.graphics.beginFill(Math.random() * 0xFFFFFF);
s.graphics.drawRect(
Math.random() * stage.stageWidth,
Math.random() * stage.stageHeight,
s.graphics.endFill();
var store:Object = {};
store[Event.ADDED] =
store[Event.REMOVED] =
var count:Function = function(e:Event):void{
store[e.type]++;
var keydown:Function = function (e:KeyboardEvent):void{
var key:String
//clear event counts from last run
for (key in store){
store[key] = 0;
stage.addEventListener(Event.ADDED, count);
stage.addEventListener(Event.REMOVED, count);
var s0:uint = getTimer(), op:S
var i:Number = v.
if (e.keyCode === Keyboard.NUMBER_1){
op = 'addChild';
while (i--){
stage.addChild(v[i]);
if (e.keyCode === Keyboard.Q){
op = 'removeChild';
while (i--){
stage.removeChild(v[i]);
if (e.keyCode === Keyboard.NUMBER_2){
op = 'visibile';
while (i--){
v[i].visible =
if (e.keyCode === Keyboard.W){
op = 'invisibile';
while (i--){
v[i].visible =
//format events
var events:Array = [];
for (key in store){
events.push(key + ' : ' + store[key])
trace(op + ' took ' + (getTimer() - s0) + ' ' + events.join(','));
stage.removeEventListener(Event.ADDED, count);
stage.removeEventListener(Event.REMOVED, count);
//autodispatch
stage.addEventListener(KeyboardEvent.KEY_DOWN, keydown);
解决方案 Visible makes more sense to me (since removing a child indicates a finality) and is what I tend to use in my own projects when showing/hiding.
I'd also assume that addChild is slightly less performant but I haven't done any tests.
EDIT: I just came across this Adobe article
which specifies that when using GPU rendering mode just setting visible = false can have a performance impact since there is a cost for drawing overlapping objects (even though they are not visible). Instead, removing the child entirely is advised:
Avoid overdrawing whenever possible. Overdrawing is layering multiple
graphical elements so that they obscure each other. Using the software
renderer, each pixel is drawn only once. Therefore, for software
rendering, the application incurs no performance penalty regardless
how many graphical elements are covering each other at that pixel
location. By contrast, the hardware renderer draws each pixel for each
element whether other elements obscure that region or not. If two
rectangles overlap each other, the hardware renderer draws the
overlapped region twice while the software renderer draws the region
only once.
Therefore, on the desktop, which use the software renderer, you
typically do not notice a performance impact of overdraw. However,
many overlapping shapes can adversely affect performance on devices
using GPU rendering. A best practice is to remove objects from the
display list rather than hiding them.
本文地址： &
目前，我尝试用一个非常简单的图形用户界面的绘图......“引擎”（我想你可以称呼它）。它的要点：
有一个的FrontController，获取用户的请求命中;每个请求有一个 UID
在每个 UID （读“网页”）的是它present组件（“模块”）的声明
组件的雪碧的子类，本质上说，是唯一
当然，我需要隐藏的方式/显示这些精灵。目前，我有它pretty的很像Flex的默认有它 - 在路上“如果我们在一个地方，补偿是可见的，创建它，高速缓存，并每次它再次显示重复使用”
现在的问题是 - 这将是隐藏和显示的更适当和有效的方式 - 通过的addChild
removeChild之或切换可见。
这样，我看到的是：
可见是快速和肮脏的（第一次测试）
可见不产生连锁冒泡事件，如 Event.ADDED 或赛事.REMOVED
在无形成分没有得到鼠标事件
所以 removeChild之会是我会打电话的时候，我敢肯定，该组件将不再需要在屏幕上（或高速缓存太大，例如）
什么stackoverflow'ers / AS3，疯狂的人认为？
下面是href="/2008/11/visible-false-versus-removechi.html" rel="nofollow">好读一个<a（忘了谷歌）。
我会坚持到可见;它似乎适合我的任务好;手册页上的“性能优化Flash平台”由Adobe。 69让我更加自信。
这里的code段我竖起来测试的东西对于那些有兴趣：
进口flash.display.S
进口的flash.display.S
进口对象类型：flash.events.E
进口flash.events.KeyboardE
进口flash.ui.K
进口flash.utils.getT
*简单的基准测试对于隐藏和显示的替代品
*的DisplayObject。
*＆LT; code取代;
*新的DisplayBM（阶段）;
*＆LT; / code取代;
- “1”的addChild（注意打它的2倍是昂贵的，我认为
*这是因为球员必须检查补偿是否
*别处使用）
- “Q”为removeChild之（2次，连续将抛出一个异常）
- “2”设置可见真
- “W”设置可见假
* @author瓦西Grigorash
公共类DisplayBM {
公共职能DisplayBM（阶段：第一阶段）{
VAR insts对于：UINT = 5000;
VAR五：矢量＆雪碧＆GT;。 =新矢量＆雪碧＆GT;（insts对于）;
变种我：数= v.length，S：雪碧
当我 - ）{
S =新雪碧;
s.graphics.beginFill（的Math.random（）* 0XFFFFFF）;
s.graphics.drawRect（
的Math.random（）* stage.stageWidth，
的Math.random（）* stage.stageHeight，
s.graphics.endFill（）;
v [电流] =秒;
VAR店：对象= {};
存储[Event.ADDED] = NULL;
存储[Event.REMOVED] = NULL;
VAR计数：功能=功能（五：事件）：无效{
店[e.type] ++;
VAR KEYDOWN：功能=功能（E：的KeyboardEvent）：无效{
VAR键：字符串
//上次运行清除事件计数
对（密钥存储）{
店[关键] = 0;
stage.addEventListener（Event.ADDED，计数）;
stage.addEventListener（Event.REMOVED，计数）;
VAR S0：UINT =的getTimer（），OP：字符串;
变种我：数= v.
如果（e.key code === Keyboard.NUMBER_1）{
OP ='的addChild';
当我 - ）{
stage.addChild（ⅴ[I]）;
如果（e.key code === Keyboard.Q）{
OP ='removeChild之';
当我 - ）{
stage.removeChild（ⅴ[I]）;
如果（e.key code === Keyboard.NUMBER_2）{
OP ='visibile';
当我 - ）{
v [电流]。可见=真实;
如果（e.key code === Keyboard.W）{
OP ='invisibile';
当我 - ）{
v [电流]。可见=虚假的;
如果（OP）{
//格式事件
VAR事件：数组= [];
对（密钥存储）{
events.push（键+“：”+店[关键]）
跟踪（OP +'花'+（的getTimer（） -
S0）+''+ events.join（''））;
stage.removeEventListener（Event.ADDED，计数）;
stage.removeEventListener（Event.REMOVED，计数）;
// autodispatch
stage.addEventListener（KeyboardEvent.KEY_DOWN，KEYDOWN）;
解决方案 可见更有意义，我（因为去掉一个孩子表示终局）而这也正是我倾向于在我自己的项目显示/隐藏时使用。
我也想假设的addChild略少高性能，但我没有做任何测试。
编辑：我只是碰到这种Adobe文章的其中规定，在使用GPU渲染模式只设置可见=假能有一个性能的影响，因为是有成本的绘制重叠的对象（即使它们不可见）。相反，除去孩子完全建议：
避免透支只要有可能。透支是分层多
图形元素，使它们掩盖彼此。使用该软件
渲染器，每个像素被绘制一次。因此，对于软件
渲染，应用程序招致没有性能损失，无论
多少图形元素被相互覆盖该像素
位置。相反，硬件渲染绘制的每个像素的每个
元素是否有其他因素模糊不清的区域或没有。如果两个
矩形彼此重叠，所述硬件渲染绘制
重叠区域两次，而软件渲染器绘制区域
只有一次。
因此，在桌面上，它使用软件呈现，你
通常不通知透支的性能影响。然而，
许多重叠的形状可在设备性能造成负面影响
使用GPU呈现。最好的做法是用来删除对象
显示列表，而不是隐藏它们。
本文地址： &
扫一扫关注官方微信浏览器渲染页面过程
时间： 20:28:56
&&&& 阅读：215
&&&& 评论：
&&&& 收藏：0
标签：一、浏览器加载和渲染html的顺序
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数
二、JS的加载
1、浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件被引入，那么对于浏览器来说，这些js文件被被串行地载入，并依次执行。因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件，因为这是js文件的特殊性造成的。所以，如果你的javascript想操作后面的DOM元素，基本上来说，浏览器都会报错说对象找不到。因为Javascript执行时，后面的HTML被阻塞住了，DOM树时还没有后面的DOM结点。所以程序也就报错了。
2、当所有样式表都下载完成以后页面才开始一起解析css文件开始渲染文件。
3、因为浏览器的加载是从上到下一行一行的加载的，所以如果页面同事定义了两个相同命名的js函数，后面的函数会覆盖前面的函数。
三、HTML页面加载和解析流程
1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；&2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；&3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；&4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；&5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；&6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；&7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；&8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞&（style.display=&none&）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；&9.终于等到了＜/html＞的到来，浏览器泪流满面&&&10.等等，还没完，用户点了一下界面中的&换肤&按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；&11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，&大伙儿收拾收拾行李，咱得重新来过&&&，浏览器向服务器请求了新的CSS文件，重新渲染页面。&
四、 DOMContentLoaded事件
DOMContentLoaded事件在许多Webkit浏览器以及IE9上都可以使用。
DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
触发时机：加载完页面，解析完所有标签（不包括执行CSS和JS），并如规范中所说的设置interactive和执行每个静态的script标签中的JS，然后触发。而JS的执行，需要等待位于它前面的CSS加载（如果是外联的话）、执行完成，因为JS可能会依赖位于它前面的CSS计算出来的样式。
现代浏览器会并发的预加载CSS, JS，也就是一开始就并发的请求这些资源，但是，执行CSS和JS的顺序还是按原来的依赖顺序（JS的执行要等待位于其前面的CSS和JS加载、执行完）。先加载完成的资源，如果其依赖还没加载、执行完，就只能等着。
img是否需要解码、绘图（paint）出来，确实需要等CSS加载、执行完才能知道。也就是说，CSS会阻塞img的展现！那么JS呢？
在有JS而没有CSS的页面中，img居然能够在收到数据后就立刻开始解码、绘图（paint)，也就是说，JS并没有阻塞img的展现！这跟我们以前理解的JS会阻塞img资源的传统观念不太一样，看来Chrome对img的加载和展现做了新的优化。
执行顺序简单归纳为：
立即执行函数 =》domReady
=》 onload
五、js执行时机
head里的 &script&标签会阻塞后续资源的载入以及整个页面的生成 。所以很多网站把javascript放在网页的最后面，或者动用了window.onload或是docmuemt ready之类事件。
实现等待DOM被完全加载后才调用JS文件
1) 将所有的JS文件都放在&/HTML&后面后再进行调用
2 )将JS代码放在标签里面
Javascript并非完全的按顺序解释执行，而是在解释之前会对Javascript进行一次&预编译&，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。当JavaScript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。
1. 在执行前会进行类似&预编译&的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。
2. 在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）&所以，就会出现当JavaScript解释器执行下面脚本时不会报错
// 调用函数，正确执行
function f(){
f();// 调用函数，返回语法错误
var f = function(){
上面示例中定义的函数仅作为值赋值给变量f，所以在预编译期，JavaScript解释器只能够为声明变量f进行处理，而对于变量f的值，只能等到执行期时按顺序进行赋值，自然就会出现语法错误，提示找不到对象f。
JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个&script&标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。
备注：document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档。
&script&type="text/javascript"&//&![CDATA[& & & document.write(‘&script&type="text/javascript"&src="test.js"&&//script&‘);& document.write(‘&script&type="text/javascript"&‘);& && document.write(‘alert(2);‘)& && document.write(‘alert("我是"&+&tmpStr);‘);& && document.write(‘&//script&‘);& & //]]&&/script&&
ＩＥ下，用Document.Write方法引用js文件时，js文件会出现尚未加载就直接调用的情况，因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后，再继续执行后面的Document.Write内容。在js里出现同名函数后，你在web页面里调用改js函数后，总是调用页面中最后一个加载的函数。
六、jQuery DomReardy事件
在Jquery里面，我们可以看到两种写法:$(function(){})&和$(document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
那么Jquery里面$(document).ready函数的实现：
document.ready = function (callback) {
　　//兼容FF,Google
　if (document.addEventListener) {
　　document.addEventListener(‘DOMContentLoaded‘, function () {
document.removeEventListener(‘DOMContentLoaded‘, arguments.callee, false);
callback();
else if (document.attachEvent) {
document.attachEvent(‘onreadytstatechange‘, function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
else if (document.lastChild == document.body) {
callback();
window.onload = function () {
alert(‘onload‘);
document.ready(function () {
alert(‘ready‘);
七、 DOM（文档对象模型 Document Object Model）
w3c HTML5规范：
DOMContentLoaded：
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！> 览器兼容性的那点有关问题
览器兼容性的那点有关问题
sally03101 & &
发布时间： & &
浏览：30 & &
回复：0 & &
悬赏：0.0希赛币
览器兼容性的那点问题
　　一.主流浏览器内核
　　Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如
Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。
　　Geckos： Netcape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
　　Webkit：Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL(General Public License)条约下授权。Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。
　　二．Web标准
　　WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面。
　　1．结构标准语言
　　（1）XML
　　XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于日发布的XML1.0。
　　（2）XHTML
　　XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
　　2. 表现标准语言
　　CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于日推荐CSS2（参考）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
　　3.行为标准
　　（1）DOM
　　DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
　　三.浏览器的下载和渲染顺序
　　IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的(多线程)。在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。
　　四，浏览器的渲染模式
　　由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。
　　浏览器选择工作模式的方式：
　　1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，根据声明的类型进行解析。
　　3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5.在现有有doctype声明的网页，绝大多数是应该采用strict
mode进行解析的。
　　&!DOCTYPE
html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
　　Transitional类型：是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。这种是现在通用的方法，用DW创建网页时默认就是这种类型。
Strict类型：严格类型，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。
Frameset类型：框架页类型。框架页面就要用这种类型了。
　　有个问题，就是对于IE，如果DOCTYPE前存在注释，会进入Quirks模式。
　　问题一.
　　&Script Language="JavaScript"
type="text/jscript"&
五．各浏览器对页面外部资源加载的策略
　　IE6 只会有2个并发下载资源，各资源按照在HTML中出现的顺序进行加载，javascript文件会阻塞其后所有资源的加载。
　　IE8,ff3.6都可以起6个线程去下载资源，javascript文件已经不会阻塞其他资源的加载，甚至多个javascript文件可以一起加载，并且会保证执行的顺序。而且会分析HTML结构，优先下载script和link标签定义的外部资源
　　Chrome测时用的是8版本的，最多可以起6个线程并发下载，head部分的资源会单独下载，且阻塞body中的其他资源的加载，会优先加载script和link标签定义的资源。
　　function save_module_conf()
　　alert(111);
　　&/Script&
　　Ie 会变成啥？
　　Chrome会变成啥
　　Ff会变成啥 ？
　　六．各浏览器兼容性注意事项:
　　&!--[if !supportLists]--&1.　
&!--[endif]--&减少使用document.getElmentByName(“id”)，或者document.getElmentByName(“name”)
,ie下可以正常，但FF，Chrome不兼容，修改为 document.getElementById(“”)。
　　&!--[if !supportLists]--&2.　
&!--[endif]--&在IE中,event对象有x,y 属性，可以获得event对象的clientX,clientY与offsetX,offsetY，在FF下没有event。
　　&!--[if !supportLists]--&3.　
&!--[endif]--&ff 下的body在body标签没有被浏览器完全读入之前就存在，而IE必须在body完全读入之后才存在。
　　&!--[if !supportLists]--&4.　
&!--[endif]--&Chrome,ff不支持document.all属性。比如：document.all.txt_name.value
　　&!--[if !supportLists]--&5.　
&!--[endif]--&OVERFLOW- Y:OVERFLOW-X:hidden在ie里面可以用no表示隐藏，但在ff里面必须用hidden。
　　&!--[if !supportLists]--&6.　
&!--[endif]--&ff下获取鼠标按键事件跟IE不同 ,ff下 e.witch,ie下用event.keycode
　　&!--[if !supportLists]--&7.　
&!--[endif]--&document.getElementById("inputname"))
在IE中都可以正确返回DOM，在其他浏览器则返回
　　&!--[if !supportLists]--&8.　
&!--[endif]--&所有的标记都必须要有一个相应的结束标记 ,在HTML中，你可以打开许多标签，例如&p&和&li&而不一定写对应的&/p&和&/li&来关闭它们。在XHTML中这是不合法的。
　　&!--[if !supportLists]--&9.　
&!--[endif]--&所有标签的元素和属性的名字都必须使用小写 ,大小写夹杂也是不被认可的
　　&!--[if !supportLists]--&10.&!--[endif]--&所有的XML标记,HTML标签都必须合理嵌套
　　前我们这样写的代码：
　　&p$>$b$>$/p&/b&
　　必须修改为：
　　&p$>$b$>$/b$>$/p&
　　&!--[if !supportLists]--&11.&!--[endif]--&所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:&height=80& 必须修改为：&height="80"&
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用
　　&!--[if !supportLists]--&12.&!--[endif]--&把所有&和&特殊符号用编码表示 ：任何小于号（&），不是标签的一部分，都必须被编码为&任何大于号（&），不是标签的一部分，都必须被编码为&任何与号（&），不是实体的一部分的，都必须被编码为& a m p
　　&!--[if !supportLists]--&13.&!--[endif]--&XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
　　&td nowrap& &input
type="checkbox" name="shirt" value="medium"
　　checked&
　　必须修改为：
nowrap="nowrap"& &input type="checkbox"
name="shirt"
　　value="medium" checked="checked"
　　14 .不要在注释内容中使“--” :
　　“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。最好不要这样写：
　　&!--这里是注释-----------这里是注释--&
　　&!--[if !supportLists]--&15. &!--[endif]--&慎用 target="_blank",XHTML1.0中不推荐使用
　　&!--[if !supportLists]--&16. &!--[endif]--&各浏览器默认的内外边距不同
　　｛margin:0 padding:0｝
　　&!--[if !supportLists]--&17. &!--[endif]--&Ie chrome中table td的高度包括td的宽度，而ff不包括。
　　&!--[if !supportLists]--&18. &!--[endif]--&cursor:hand
ie和 chrome中管用，ff中失效。用pointer
　　&!--[if !supportLists]--&19. &!--[endif]--$>$ ie中的宽度会比 chrome,ff中的窄一点。
　　&!--[if !supportLists]--&20. &!--[endif]--&不能用cols来控制textara的宽度，FF下与其他浏览器不同，设置width
　　&!--[if !supportLists]--&21. &!--[endif]--&发布平台菊花(一点刷新按钮，那行宽度就发生变化)，margin:
padding: 全部清0，　
versincal-align middle
　　&!--[if !supportLists]--&22. &!--[endif]--&word-wrap:break-word-break:break-
　　break-word，强制换行
　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行
　　这段在ie,chrome下正常，FF不支持
　　可以将内容放在div里面，然后给div设置固定宽度,在使用上边属性。
　　Js兼容性
　　&!--[if !supportLists]--&1．&!--[endif]--&
documenem问题代码中存在许多 documenem("itemName")这样的语句：document.test_form.txt_1.value不能在FF chrome下运行，可以使用
document.test_form.elements["txt_1"].Value
　　&!--[if !supportLists]--&2．&!--[endif]--&现有代码中许多集合类对象取用时使用 ()，IE能可以，FF不能。改用 []作为下标运算。如：document.forms("formName")改为
document.forms["formName"]。又如：
　　document.getElementsByName("inputName")(1)
　　改为 document.getElementsByName("inputName")[1]
　　&!--[if !supportLists]--&3．&!--[endif]--&HTML对象的 id作为对象名的问题在 IE中，HTML对象的 ID可以作为 document的下属对象变量名直接使用,及时在使用name的地方可以换成id名称，但是在 FF,chrome中不能。　
getElementById("idName")代替 idName作为对象变量使用。
　　&!--[if !supportLists]--&4．&!--[endif]--&用idName字符串取得对象的问题　 在IE中，利用 eval(idName)可以取得 id为 idName的 HTML对象，在FF中不能。getElementById(idName)代替 eval(idName)。
v_v_="document.getElementById('div_test_1')";
　　var v_div_=eval(v_v_);　 alert(v_div_);
　　alert(v_div_.innerHTML);
　　&!--[if !supportLists]--&5．&!--[endif]--&变量名与某 HTML对象 id相同的问题　
在 FF中，因为对象 id不作为 HTML对象的名称，所以可以使用与 HTML对象 id相同的变量名，IE中不能。在声明变量时，一律加上 var，以避免歧义，这样在 IE中亦可正常运行。最好不要取与 HTML对象 id相同的变量名，以减少错误。
　　&!--[if !supportLists]--&6．&!--[endif]--&frame在 IE中 可以用window.testFrame取得该frame，FF中不行
　　&!--[if !supportLists]--&7．&!--[endif]--&在frame的使用方面FF和ie的最主要的区别是：如果在frame标签中书写了以下属性：&frame
src="xx.htm" id="frameId" name="frameName" /&那么ie可以通过id或者name访问这个frame对应的window对象,而FF,chorme只可以通过name来访问这个frame对应的window对象
　　比如在ie下：
　　window.top.frameId或者window.top.frameName来访问这个window对象　
FF和chrome下：
只能这样window.top.frameName来访问这个window对象另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签并且可以通过window.top.document.getElementById("testFrame").src
= ''xx.htm''来切换frame的内容也都可以通过window.top.frameName.location = ''xx.htm''来切换frame的内容
　　&!--[if !supportLists]--&8．&!--[endif]--&html中节点缺失时，IE和FF对parentNode的解释不同，例如
FF中input.parentNode的值为form,而IE中input.parentNode的值为空节点
　　&!--[if !supportLists]--&9．&!--[endif]--&FF，chrome中节点没有removeNode方法，必须使用如下方法
node.parentNode.removeChild(node)
　　&!--[if !supportLists]--&10．&!--[endif]--&url
encoding　
在js中如果书写url就直接写&不要写&例如
　　var url =
''xx.jsp objectName=xx&objectEvent=xxx'';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到&!--[if !supportLineBreakNewLine]--&&!--[endif]--&
　　&!--[if !supportLists]--&11．&!--[endif]--&IE下 input.type属性为只读，但是chrome,FF下可以修改
　　用setAttribute设置事件现有问题：
　　var obj =
document.getElementById('objId');obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
　　&!--[if !supportLists]--&12. &!--[endif]--&IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数如下： var obj =
document.getElementById('objId');obj.onclick=function(){fucntionname();};这种方法所有浏览器都支持
　　&!--[if !supportLists]--&13. &!--[endif]--&var backendArray =
test_backends.split("\n");
　　&!--[if !supportLists]--&14. &!--[endif]--&Id
不能有重复的，否则组件的值是取不到的。
　　在实际工作中：
　　1.我们不是为了通过校验才标准化。web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。
　　2.平时遵守一些规范，就可能大大较少一些错误。
　　3.开发过程中有意识去优化网页加载速度:js ,html压缩，cache,
　　4. 把CSS放在文档的头部，仅需要在关闭&boby&前插入js.在这些脚本在后台加载的同时，用户先得到看似完整的页面。
　　5.将JS和CSS文件放在外部文件中，浏览器缓存他们要比每次调用加载速度更快些。
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&