前端页面渲染流程
来源:互联网 发布:手机淘宝怎么开通不了? 编辑:程序博客网 时间:2024/05/21 06:22
浏览器url请求服务器开始
1、返回HTML文档,包括:
文档,script标签, link标签, img标签,audio标签等等文件
2、HTML解析:
>dom树生成(按照文档的层级展示,存在隐藏在dom树的元素)
>render树生成(可以看见到的界面,更多考虑的是显示的内容,dom结构在上一层生成了)
>逐级解析dom树1、p,div,ol等不引入外部资源。
2、link->css 尽量减少页面的reflow(回流) 当页面的结构发生改变的时候,render树重新组 装,触发回流(比如最上面的元素margin-top:1px, 那页面下面的所有元素都会发生向上多了1px)。
只要不改变页面的结构,比如只修改了颜色,背景等等 ,称之为 重绘。
3、script-> js 绘制dom节点的时候会阻塞其他标签的解析(比如document.write阻塞其他js执行,也会阻塞下载通道,强烈建议不要使用)
4、img->图片, 页面初加载的时候可以先使用分辨率较低的图片,用来占位。
技术优化
1、 复用(维护性) 降低开发成本
1、 前端复用
> 文件复用,比如jquery,reset.css, error.html等复用
> 模块复用,通过js来维护一个整体模块,独立完成某项功能,称作模块。
2、 后端复用
> 通用接口复用
> UI模块复用
> 通用工具API复用(上传服务, 数据库操作)
2、 加载方式: 提升用户体验
1、同步加载: 加载完成才会给用户显示,强调顺序,但是容易会被阻塞。
2、分级加载: 先加载重要信息,核心功能(同步加载),后加载不重要的功能(异步加载)。
3、按需加载: 不触发该功能,就不加载。也可以理解为惰性加载。
- 前端页面渲染流程
- 前端页面渲染
- 页面渲染流程
- 抓取前端渲染的页面
- 浅析前端页面渲染机制
- 浅析前端页面渲染机制
- 浅析前端页面渲染机制
- 浏览器渲染页面的流程
- 前端页面的两轮渲染
- WebMagic抓取前端Ajax渲染的页面
- 前端与SEO ②:页面渲染
- WebMagic抓取前端Ajax渲染的页面
- 前端.什么是页面渲染&&影响渲染速度的两个因素
- 前端做H5页面流程
- OpenCms 页面渲染流程简析
- 前端渲染
- 前端页面制作流程分享与总结
- 前端页面自动接管流程探索
- mybatis入门配置java.lang.IllegalArgumentException
- ArcGIS水文分析实战教程(13)流域提取流程
- 《大话设计模式》观后总结1--简单工厂模式与工厂方法模式
- 有关 Hybrid 开发模式实践总结
- JS类继承常用方式发展史
- 前端页面渲染流程
- 把视频处理成一帧一帧的图像
- Path定义为全局变量引起的一些问题
- mac下pycharm设置python版本
- JAVA substring的用法
- JAVA并发编程(四)——线程状态与中断
- 【小程序】调用wx.request接口时需要注意的几个问题
- Python脚本进行游戏专区拉新方面的计算案例
- ThreadLocal