前端知识总复习

描述从输入url到页面完成渲染发生了什么？

加载过程

DNS解析：将域名解析为IP地址

浏览器根据IP地址向服务器发起http请求

服务器处理http请求并返回给浏览器

渲染过程

根据html代码生成DOM Tree

根据css代码生成cssOM

将Dom Tree和CssOM整合形成Render Tree

根据RenderTree渲染页面

如果遇到<script>标签，则暂停渲染，优先加载并且执行JS代码，执行完成后，再接着渲染

一直到整个RenderTree渲染完成为止

css代码应该放在head中，避免一个元素重复渲染

Js代码应该放在body的最后面，先让页面渲染出来，再去执行JS代码，防止js的执行造成页面渲染的卡顿

window.onload和DomContentLoaded

window.addEventListener('load',function(){
//当页面的所有资源都加载完成以后才会执行，包括图片，视频等资源加载完成
});

document.addEventListener('DomContentLoaded',function(){
//当dom渲染完成以后就会执行，此时视频，图片等资源可能还没有加载完成
});

性能优化

让加载更快

减少资源体积：压缩代码

减少访问次数：合并代码，SSR服务器端渲染，使用缓存

使用更快的网络：CDN，根据区域分配最近的IP地址，让用户访问更快一些

让渲染更快

css放在head里面，Js放在body最下面

图片懒加载（看的时候再加载，不看不加载）

对dom查询结果进行缓存

频繁dom操作，合并到一起然后插入dom结构

SSR

非SSR，前后端分离，先加载网页，然后再加载数据，最后渲染数据

SSR：将网页和数据一起加载，一起渲染

懒加载

<img id="img1"  src="preview.png(预览图片，体积小，加载快)" data-realsrc="realpicture.png"(真正的图片，体积大，加载慢)>

<script>
let img=document.getElementById('img1');
if(img元素进入用户浏览视图){
img.src=img.getAttribute('data-realsrc');
}
</script>