浏览器环境概述
最后更新于：2022-04-02 03:25:33
[TOC]
## `integrity`属性 验证外部加载js 的文件hash
```
```
如果`application.js`的脚本hash 改变,则不会加载
## URL 协议 a标签
`点击`
如果javascript 中是字符串,则会打开一个文件,里面是字符串内容
如果是可执行代码.则执行
## script 的属性
### defer 属性 延迟执行
如果脚本之间有依赖关系，就使用`defer`属性
```
```
1. 浏览器开始解析 HTML 网页。
2. 解析过程中，发现带有`defer`属性的`
上面的example.js默认就是采用 HTTP 协议下载，如果要采用 HTTPS 协议下载，必需写明。
但是有时我们会希望，根据页面本身的协议来决定加载协议，这时可以采用下面的写法。
```
### 重流和重绘
* 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
* 缓存 DOM 信息。
* 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
* 使用`documentFragment`操作 DOM
* 动画使用`absolute`定位或`fixed`定位，这样可以减少对其他元素的影响。
* 只在必要时才显示隐藏元素。
* 使用`window.requestAnimationFrame()`，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
* 使用虚拟 DOM（virtual DOM）库。
### window.requestAnimationFrame() 推迟重绘
```
// 重绘代价高
function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + 'px';
}
all_my_elements.forEach(doubleHeight);
// 重绘代价低
function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + 'px';
});
}
all_my_elements.forEach(doubleHeight);
```
';