首页 > 其他分享> 文章详细

前端知识点总结

2022-03-21 12:58:31 阅读：147 来源： 互联网

标签：总结知识点渲染 function 前端 Tree timer img1 加载

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

从输入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;,>变为>

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

CSRF（跨站请求伪造）

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9