网页中有哪些嵌入 JavaScript 代码的方法？

• <script>元素直接嵌入代码。
• <script>标签加载外部脚本
• 事件属性
• URL 协议： 即在 URL 的位置写入代码

为什么script 元素最好放在body的最后？

• JavaScript 代码可以修改 DOM，所以加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染
• 如果外部脚本加载时间很长，网页长时间失去响应，发生阻塞效应
• 在 DOM 结构生成之前就调用 DOM 节点，JavaScript 会报错，如果脚本都在网页尾部加载，就不存在这个问题
• 如果某些脚本代码非常重要，一定要放在页面头部的话，最好直接将代码写入页面

defer属性的运行流程是怎样的？

1. 浏览器开始解析 HTML 网页。
2. 解析过程中，发现带有defer属性的<script>元素。
3. 浏览器继续往下解析 HTML 网页，不会阻塞浏览器，同时并行下载<script>元素加载的外部脚本。
4. 浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。

async属性的运行流程？

1. 浏览器开始解析 HTML 网页。
2. 解析过程中，发现带有async属性的script标签。
3. 浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
4. 脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
5. 脚本执行完毕，浏览器恢复解析 HTML 网页。

defer属性和async属性到底应该使用哪一个？

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定

浏览器的核心是哪两部分？

• 渲染引擎
• JavaScript 引擎

常见的浏览器对应的渲染引擎是？

• Firefox：Gecko 引擎
• Safari：WebKit 引擎
• Chrome：Blink 引擎
• IE: Trident 引擎
• Edge: EdgeHTML 引擎

渲染引擎处理网页的过程？

1. 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
2. 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
3. 布局：计算出渲染树的布局（layout）。
4. 绘制：将渲染树绘制到屏幕。

• （并非严格按顺序执行）

什么是重流和重绘？

• 重流是指布局引擎为frame计算图形的过程，比如宽高的变化一般会引发重流
• 重绘发生在元素的可见性发生变化时，比如背景色、前景色

• 比如改变元素颜色，只会导致重绘，而不会导致重流；
• 改变元素的布局，则会导致重绘和重流

关于DOM有哪些优化技巧？

• 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
• 缓存 DOM 信息。
• 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
• 使用documentFragment操作 DOM
• 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
• 只在必要时才显示隐藏元素。
• 使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。
• 使用虚拟 DOM（virtual DOM）库。

cookie有什么作用？

• Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB
• 用于分辨两个请求是否来自同一个浏览器，以及用来保存一些状态信息

常用于：

• 对话（session）管理：保存登录、购物车等需要记录的信息。
• 个性化：保存用户的偏好，比如网页的字体大小、背景色等等。
• 追踪：记录和分析用户行为。

Cookie 包含哪些信息？

• Cookie 的名字
• Cookie 的值（真正的数据写在这里面）
• 到期时间
• 所属域名（默认是当前域名）
• 生效的路径（默认是当前网址）

删除cookie的方法？

删除一个现存 Cookie 的唯一方法，是设置它的expires属性为一个过去的日期。

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

什么是同源策略？

• 当两个网页的协议、域名、端口都相同时，视为同源，web浏览器允许第一个页面的脚本访问第二个页面里的数据

同源政策的目的？

为了保证用户信息的安全，防止恶意的网站窃取数据

解决跨域的几个方法？

• 通过jsonp跨域
• document.domain + iframe跨域
• location.hash + iframe
• window.name + iframe跨域
• postMessage跨域
• 跨域资源共享（CORS）
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域

CORS 通信的过程？

1. 简单请求（HEAD、GET、POST）：
   • 浏览器直接发出 CORS 请求，在头信息之中，增加一个Origin字段表示本次请求来自哪个域（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
   • 如果回应的头信息没有包含Access-Control-Allow-Origin字段，表示Origin指定的源，不在许可范围内。
2. 非简单请求（如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json）
   • 在正式通信之前，需增加一次 HTTP 查询请求，称为“预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 动词和头信息字段
   • “预检”请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源
   • 同样的，如果确认允许跨源请求，服务器会返回带有Access-Control-Allow-Origin字段的，如果不允许跨源请求，可能不会返回任何 CORS 相关的头信息字段，也可能返回的Access-Control-Allow-Origin明确不包括请求的域，此时就不可以进行请求

sessionStorage和localStorage的作用和区别？

• sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空
• localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据
• 两者保存的时间不同