网站建设 网站开发,做pc端网站流程,郑州网站 建设,云主机试用浏览器渲染web页面的过程 解析html#xff0c;构成dom树 2.加载css#xff0c;构成样式规则树 3.加载js#xff0c;解析js代码 4.dom树和样式树进行匹配#xff0c;构成渲染树 5.计算元素位置进行页面布局 5.绘制页面#xff0c;呈现到浏览器中 图片加载和渲染的过程 1.解…浏览器渲染web页面的过程 解析html构成dom树 2.加载css构成样式规则树 3.加载js解析js代码 4.dom树和样式树进行匹配构成渲染树 5.计算元素位置进行页面布局 5.绘制页面呈现到浏览器中 图片加载和渲染的过程 1.解析html遇到img、picture会加载图片放入dom树中 2.加载css遇到background-image时不加载图片放入样式树中 3.解析js代码中有创建img、picture元素添加到dom树中如果有添加background-image样式会添加到样式规则树中 4.构建渲染树时如果dom节点匹配到样式规则中的background-iamge会加载背景图片 5.计算图片位置进行布局 6.渲染图片 web页面中的图片不是所有都会进行加载和渲染 img、picture和设置background-image的元素遇到display:none时图片会加载但不会渲染。 img、picture和设置background-image的元素祖先元素设置display:none时background-image不会渲染也不会加载而img和picture引入的图片不会渲染但会加载 img、picture和background-image引入相同路径相同图片文件名时图片只会加载一次 样式文件中background-image引入的图片如果匹配不到DOM元素图片不会加载 伪类引入的background-image比如:hover只有当伪类被触发时图片才会加载
