前端开发环境

前端模块化

加载一个资源的过程

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

浏览器渲染页面的过程

• 根据HTML结构生成DOM Tree
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合形成RenderTree
• 根据RenderTree开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染

window.onload和DOMContentLoaded区别

• onload是页面的全部资源加载完才会执行，包括图片、视频等
• DOMContentLoaded是DOM渲染完即可执行，此时图片、视频还没有加载完

性能优化

1. 原则
   多使用内存、缓存或者其他方法
   减少CPU计算、减少网络
2. 加载资源优化
   静态资源的合并压缩
   静态资源缓存
   使用CDN让资源加载更快
   使用SSR后端渲染，数据直接输出到HTML

3. 渲染优化
   CSS放前面，JS放后面
   懒加载（图片懒加载、下拉加载更多）
   减少DOM 查询，对DOM查询做缓存
   减少DOM操作，多个操作尽量合并在一起执行
   

   事件节流
   尽早执行操作（如DOMContentLoaded）

安全性

XSS跨站请求攻击
XSRF跨站请求伪造