前端模块化
加载一个资源的过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容
浏览器渲染页面的过程
- 根据HTML结构生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合形成RenderTree
- 根据RenderTree开始渲染和展示
- 遇到<script>时，会执行并阻塞渲染
window.onload和DOMContentLoaded区别
- onload是页面的全部资源加载完才会执行，包括图片、视频等
- DOMContentLoaded是DOM渲染完即可执行，此时图片、视频还没有加载完
性能优化
- 原则
多使用内存、缓存或者其他方法
减少CPU计算、减少网络 - 加载资源优化
静态资源的合并压缩
静态资源缓存
使用CDN让资源加载更快
使用SSR后端渲染，数据直接输出到HTML -
渲染优化
事件节流
CSS放前面，JS放后面
懒加载（图片懒加载、下拉加载更多）
减少DOM 查询，对DOM查询做缓存
减少DOM操作，多个操作尽量合并在一起执行
尽早执行操作（如DOMContentLoaded）
安全性
XSS跨站请求攻击
XSRF跨站请求伪造
网友评论