前端页面文档

193 阅读1分钟

前端加载慢问题

<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