网页中有哪些嵌入 JavaScript 代码的方法？
- <script>元素直接嵌入代码。
- <script>标签加载外部脚本
- 事件属性
- URL 协议： 即在 URL 的位置写入代码
为什么script 元素最好放在body的最后？
- JavaScript 代码可以修改 DOM，所以加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染
- 如果外部脚本加载时间很长，网页长时间失去响应，发生阻塞效应
- 在 DOM 结构生成之前就调用 DOM 节点，JavaScript 会报错，如果脚本都在网页尾部加载，就不存在这个问题
- 如果某些脚本代码非常重要，一定要放在页面头部的话，最好直接将代码写入页面
defer属性的运行流程是怎样的？
- 浏览器开始解析 HTML 网页。
- 解析过程中，发现带有defer属性的<script>元素。
- 浏览器继续往下解析 HTML 网页，不会阻塞浏览器，同时并行下载<script>元素加载的外部脚本。
- 浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。
async属性的运行流程？
- 浏览器开始解析 HTML 网页。
- 解析过程中，发现带有async属性的script标签。
- 浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
- 脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
- 脚本执行完毕，浏览器恢复解析 HTML 网页。
defer属性和async属性到底应该使用哪一个？
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定
浏览器的核心是哪两部分？
- 渲染引擎
- JavaScript 引擎
常见的浏览器对应的渲染引擎是？
- Firefox：Gecko 引擎
- Safari：WebKit 引擎
- Chrome：Blink 引擎
- IE: Trident 引擎
- Edge: EdgeHTML 引擎
渲染引擎处理网页的过程？
- 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
- 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
- 布局：计算出渲染树的布局（layout）。
- 绘制：将渲染树绘制到屏幕。
- （并非严格按顺序执行）
什么是重流和重绘？
- 重流是指布局引擎为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 通信的过程？
- 简单请求（HEAD、GET、POST）：
- 浏览器直接发出 CORS 请求，在头信息之中，增加一个Origin字段表示本次请求来自哪个域（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
- 如果回应的头信息没有包含Access-Control-Allow-Origin字段，表示Origin指定的源，不在许可范围内。
- 非简单请求（如请求方法是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保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据
- 两者保存的时间不同
网友评论