前端加载慢问题
<script和<style设计不合理会导致加载慢
浏览器渲染过程
GUI渲染:渲染浏览器html1元素
javascript渲染:处理JavaScript脚本程序
GUI渲染与JavaScript渲染设计相互之初为互斥关系
html执行过程
1.服务器首先获取html内容
2.从上到下执行,head元素内容首先被解析浏览器还没渲染页面
3.引入javascript及外部引用资源, JavaScript下载完成后,浏览器控制权交给JavaScript引擎
4.javascript执行完成后控制权交回渲染引擎,body内容开始被解析浏览器开始渲染
异步加载解决加载慢问题
可以defer/async/perload等属性进行标记javascript进行异步加载,async类型属性会让JavaScript并行处理,异步执行不会阻塞渲染
dom树与css规则树
浏览器加载过程解析html与css获得dom树和css规则树
dom树是用来操作和描述html文档的接口
虚拟dom树设计
1.用JavaScript对象模拟dom操作
2.数据变更生成新Dom新接口比较
3.数据差异应用到正真dom树上
css盒模型
1.外边框边界-----》margin 2.边框边界-----》boder 3.内边框边界----》padding 4.内容边框----》content