加载,渲染,绘制
来源:互联网 发布:电脑数据恢复专家 编辑:程序博客网 时间:2024/06/16 08:35
浏览器加载过程
(1)、浏览器通过DNS获取域名对应IP
(2)、建立TCP连接
(3)、发送http请求
(4)、html边下载边渲染
(5)、碰到内嵌JS 和 CSS,启动新的连接下载,阻塞渲染和JS执行(因此要把脚本放后面)
(6)、获取到CSS后,重新渲染
(7)、JS按标签顺序下载并执行
(8)、碰到内嵌img,启动新的连接下载,不会阻塞渲染
(9)、获取到img后,重新渲染
渲染
1、HTML代码转化成DOM
2、CSS代码转化成CSSOM(CSS Object Model)
3、结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
4、生成布局(layout),即将所有渲染树的所有节点进行平面合成
5、将布局绘制(paint)在屏幕上
页面发生变化时,要重新渲染reflow(重新生成布局并绘制)。有元素位置发生变化或滚动时,需要重排并重绘。元素位置都没发生变化时,只需重绘repain。
浏览器会将几个连续的改变累积起来,再一次重新渲染,以减少重新渲染的次数。
脚本读取位置,尺寸等信息时,浏览器不得不把之前累积的变化,重新渲染一次,再返回最新的位置和尺寸。
优化
1、读取位置和尺寸的脚本最好放在一起,不要与改变页面的脚本穿插
2、缓存位置和尺寸信息, 不要重复读取
3、对离线DOM 操作完后,再加入DOM树。不用加入后再操作。
4、对DOM的复杂改变,可以先隐藏,再操作,再显示
5、position属性为absolute或fixed的元素重排开销较小,动画最好设置在它们身上
6、window.requestAnimationFrame(function(){写操作}) ,把这次写操作放到下一次渲染
7、尽量避免写在HTML标签中写Style属性,会阻塞渲染
加载完成
当 HTML 文档解析绘制完成就会触发 DOMContentLoaded,而所有资源(图片和非阻塞脚本)加载完成之后,load 事件才会被触发。
另外需要提一下的是,我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件,而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。
在chrome network 左下方能看到,打开overview能看到两条对应的线
- 加载,渲染,绘制
- UIView 绘制渲染机制
- Swift3实现的绘制股票K线库, FastImageCache提升图片的加载和渲染速度,Chameleon颜色框架
- D3D加载纹理渲染
- OpenGl 加载渲染模型
- 页面~加载、解析、渲染
- 浏览器~加载,解析,渲染
- 浏览器加载解析渲染
- 浏览器~加载,解析,渲染
- 页面加载、渲染
- CSS3绘制加载动画
- cocos2dx之渲染树的绘制
- cocos2dx之渲染树的绘制
- cocos2d-x 3.6 渲染绘制流程
- 1.矩形的渲染与绘制
- 浅谈Android界面绘制避免重复渲染
- 基于PCL绘制模型并渲染
- 渲染树构建、布局及绘制
- 剑指offer 二叉树的镜像
- Android的视频通话的Java代码 anychat
- 系统声音服务的使用(播放声音、震动)
- 用CADisplayLink做雪花飘飞的效果
- ajax视频拖拽上传(完善版)
- 加载,渲染,绘制
- 4455: [Zjoi2016]小星星|状压DP|容斥原理
- Jenkins邮件处理
- HTML5之Range对象
- python 字符编码出现的问题 IDLE 一定要设置啊!!!!!!!
- html列表、块
- 关于iBaits的使用
- HDU 1166 敌兵布阵 树状数组
- 在配置hadoop的时候碰到的问题