【JS基础】页面加载，性能优化，前端安全

页面加载

加载资源的形式

1.输入url或跳转页面加载html
2.加载html中的静态资源

加载一个资源的过程

1.浏览器根据DNS服务器得到域名的IP地址
2.向这个IP的机器发送http请求
3.服务器收到、处理并返回http请求
4.浏览器得到返回内容

浏览器渲染页面的过程

1.根据HTML结构生成DOM TreeWalker
2.根据CSS生成CSSOM
3.将DOM和CSSOM整合成RenderTree
4.根据RenderTree开始渲染和展示
5.遇到时&＃xff0c;会执行并阻塞渲染

window.onload 和 DOMContentLoaded的区别&＃xff1f;

window.addEventListener(&＃39;load&＃39;, function () {// 页面的全部资源加载完才会执行&＃xff0c;包括图片、视频等 });document.addEventListener(&＃39;DOMContentLoaded&＃39;, function () {// DOM 渲染完即可执行&＃xff0c;此时图片、视频还可能没有加载完 });

性能优化

性能优化的原则

1.多使用内存、缓存或者其他方法
2.减少CPU计算&＃xff0c;减少网络

从哪里入手

1.加载页面和静态资源
2.页面渲染

加载资源优化

1.静态资源的压缩合并&＃xff0c;雪碧图
2.静态资源缓存
3.使用CDN让资源加载更快
4.使用SSR后端渲染&＃xff0c;数据直接输出到HTML中

渲染优化

CSS放前面&＃xff0c;JS放后面
懒加载&＃xff08;图片懒加载、下拉加载更多&＃xff09;
减少DOM查询&＃xff0c;对DOM查询做缓存
减少DOM操作&＃xff0c;多个操作尽量合并在一起执行
事件防抖和节流
尽早执行操作&＃xff08;如DOMContentLoaded&＃xff09;