# 运行环境	
## 4.1 页面加载过程	
### 4.1.1 从输入url到得到HTML的详细过程	
> [!NOTE]
> 参考计算机网络章节考点总结

### 4.1.2 window.onload和DOMContentLoaded的区别	
1. onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
2. DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
3. jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的

### 4.1.3 浏览器加载资源的形式有哪些？	
1. 输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
2. 加载html中的静态资源（CSS，JS，图片等）

### 4.1.4 描述一下浏览器渲染页面的过程	
1. 根据HTML结构生成DOM Tree（单个节点，没样式）
2. 根据CSS生成CSSOM（CSS对象模型）
3. 将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
4. 根据RenderTree开始渲染和显示
5. 遇到**script**标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码
   
### 4.1.5 CSS和JS的位置问题？
#### CSS
1. 浏览器是自上而下进行解析的，防止出现多次渲染
2. CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行

#### JS
1. 可以让页面快速的展示，提升性能
2. 可以在此处获取到页面上所有的标签


## 4.2 性能优化	
### 4.2.1 前端性能优化的方法有哪些	
1. 资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
2. 图片资源的优化
   图片压缩处理
   CSS雪碧图
   Image Inline（Base64编码）
   使用SVG和webp格式的图片
### 4.2.2 懒加载和预加载的区别和实现原理?
> [!NOTE]
> - 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中

> - 预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
1.	使用img标签
2.	创建img对象
3.	Ajax请求（跨域问题）

### 4.2.3 重绘和回流的区别？
> [!NOTE]
> 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）

> 回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）

#### 避免重绘和回流的两种方法
1.	使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
2.	将重绘、回流的影响范围限制在单独的图层之内

#### 开启浏览器自动创建图层的方法
1. transform:translatez(0)
2. z-index
3. **video** 和 **canvas**标签

#### 性能优化点：
1. 使用top会触发回流，translate不会（transform : translaeY(0)）
2. 使用opacity替换visibility（visibility会触发重绘）
3. 使用className替代style

## 4.3 安全问题	
### 4.3.1	前端的安全问题及预防措施	
#### XSS攻击
利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]
#### CSRF攻击
论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）
#### 二者区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包



【JS相关】运行环境

4.1.1 从输入url到得到HTML的详细过程

4.1.2 window.onload和DOMContentLoaded的区别

4.1.3 浏览器加载资源的形式有哪些？

4.1.4 描述一下浏览器渲染页面的过程

4.2.1 前端性能优化的方法有哪些

4.2.2 懒加载和预加载的区别和实现原理?

开启浏览器自动创建图层的方法

4.3.1   前端的安全问题及预防措施