网页是如何加载并且渲染出来的？

从输入url到渲染出页面的整个过程

加载资源的形式

1.html代码

2.媒体文件，如图片，视频等

3.JavaScript，css

加载过程

DNS解析：将域名解析为对应的ip地址

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

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

渲染过程

根据html代码生成DOM Tree

根据css代码生成CSSOM

将Dom Tree和 Css Om整合生成Render Tree

根据Render Tree渲染页面

如果遇到<script>标签则暂停渲染，优先加载并执行js代码，完成再继续

直至把Render Tree渲染完成

window.onload和DOMContentLoaded的区别

window.addEventListener('load',function(){

//页面的全部资源加载完才会执行，包括图片，视频等

});

document.addEventListener('DOMContentLoaded',function(){

//DOM渲染完即可执行，此时图片，视频还可能没有加载完

});

前端性能优化

让加载更快

减少资源体积，压缩代码

减少访问次数：合并代码，SSR服务器端渲染（网页和数据一起加载，一起渲染，非ssr：先加载网页，再加载数据，然后渲染数据），缓存

使用更快的网络：CDN

让渲染更快

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

尽早开始执行JS，用DomContentLoaded触发

懒加载（图片懒加载，上滑加载更多）

<img  id="img1" src="preview.png"  data-realsrc="abc.png">
<script>
var img1=document.getElementById("img1");
img1.src=img1.getAttribute("data-realsrc");
</script>

对dom查询进行缓存

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

节流throttle防抖debounce

手写防抖

function debounce(fn,delay){
let timer=null;
return function(){
if(timer){clearTimeOut(timer);};
timer=setTimeOut(()=>{
fn();
timer=null;
},delay);};
}
input1.addEventListener('keyup',debounce(()=>{
console.log(input1.value);
},500));

手写节流

function throttle(fn,delay){
let timer=null;
return function(){
if(timer){return;}
timer=setTimeOut(()=>{
  fn.apply(this,arguments);
  timer=null;
},delay);
};
}

div1.addEventListener('drag',throttle(
function(e){
console.log(e.offsetX,e.offsetY);
}
,100));

前端安全

xss攻击（跨站请求攻击）

例子：一个博客网站，在内容中嵌入<script>标签

在<script>标签当中输入获取用户cookie,并且发送到攻击者的服务器上

发布博客，有人阅读，就可以得到读者的cookie

xss预防

替换特殊字符，如<变为&It;,>变为&gt;

<script>变为&It;script&gt;直接作为字符串显示，而不会作为脚本执行

前端要替换，后端也要替换，都做总不会有错

CSRF（跨站请求伪造）

标签：总结,知识点,渲染,function,前端,Tree,timer,img1,加载
来源： https://blog.csdn.net/weixin_44858541/article/details/123619565