# 运行环境

讲解 JS 代码在浏览器中运行的相关问题，例如 页面加载和渲染，性能优化，安全性 ，这些类别的题目。

知识点：

8-1 页面加载过程

8-2 性能优化

• 浏览器就可以通过访问链接来得到页面内容
• 通过绘制和渲染，显示出页面的最终的样子

# 整个过程中，我们需要考虑什么问题？

# 3 个重点

• 页面加载过程
• 性能优化
• 安全性

# 8-1 页面加载过程

题目

知识点

解答

# 题目

• 从输入 url 到得到 html 的详细过程
• window.onload 和 DOMContentLoaded 的区别？

# 知识点

• 加载资源的形式
• 加载一个资源的过程
• 浏览器渲染页面的过程

# 加载资源的形式

• 输入 url （或跳转页面）加载 html
• url: https://www.imooc.com/
• 加载 html 中的静态资源
• script 标签中资源的加载: <script src="/static/jsjquery.js"></script >

# 加载一个资源的过程

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

# 浏览器渲染页面的过程：

1. 根据 HTML 结构生成 DOM Tree 2. 根据 CSS 生成 CSSOM 3. 将 DOM 和 CSSOM 整合形成 RenderTree 4. 根据 RenderTree 开始渲染和展示 5. 遇到 <script > 时，会执行并阻止渲染。

# 思考

• 为何要把 css 放在 head 中？
  • css 放在 body 标签尾部时，DOMTree 构建完成之后便开始构建 RenderTree, 并计算布局渲染网页，等加载解析完 css 之后，开始构建 CSSOMTree, 并和 DOMTree 重新构建 RenderTree, 重新计算布局渲染网页
  • css 放在 head 标签中时，先加载 css, 之后解析 css 构建 CSSOMTree, 于此同时构建 DOMTree, CSSOMTree 和 DOMTree 都构建完毕之后开始构建 RenderTree, 计算布局渲染网页

对比两者，css 放在 head 标签中比 css 放在 body 标签尾部少了一次构建 RenderTree, 一次计算布局和一次渲染网页，因此性能会更好；并且 css 放在 body 标签尾部时会在网页中短暂出现 "裸奔" 的 HTML, 这不利于用户体验

---

• 为何要把 js 放在 body 最下面？ ，既然 Dom 树完全生成好后才能显示 “没有图片的首屏”，浏览器又必须读完全部 HTML 才能生成完整的 Dom 树，script 标签不放在 body 底部是不是也一样？

  • —— JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。 JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

# window.onload 和 DOMContentLoaded

# 解答

• 从输入 url 到得到 html 的详细过程

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

• window.onload 和 DOMContentLoaded 的区别？

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

# 8-2 性能优化

2018 前端性能优化清单

关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。

提及 前端性能优化 ，大家应该都会想到 雅虎军规，本文会结合 雅虎军规 融入自己的了解知识，进行的总结和梳理 😜

# 我们先来看看 👀 雅虎军规 的 35 条 ：

• 尽量减少 HTTP 请求个数 —— 须权衡
• 使用 CDN（内容分发网络）
• 为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。
• 避免空的 src 和 href
• 使用 gzip 压缩内容
• 把 CSS 放到顶部
• 把 JS 放到底部
• 避免使用 CSS 表达式
• 将 CSS 和 JS 放到外部文件中
• 减少 DNS 查找次数
• 精简 CSS 和 JS
• 避免跳转
• 剔除重复的 JS 和 CSS
• 配置 ETags
• 使 AJAX 可缓存
• 尽早刷新输出缓冲
• 使用 GET 来完成 AJAX 请求
• 延迟加载
• 预加载
• 减少 DOM 元素个数
• 根据域名划分页面内容
• 尽量减少 iframe 的个数
• 避免 404
• 减少 Cookie 的大小
• 使用无 cookie 的域
• 减少 DOM 访问
• 开发智能事件处理程序
• 用 代替 @import
• 避免使用滤镜
• 优化图像
• 优化 CSS Spirite
• 不要在 HTML 中缩放图像 —— 须权衡
• favicon.ico 要小而且可缓存
• 保持单个内容小于 25K
• 打包组件成复合文本

---

• 这本身就是一个综合性的问题
• 没有标准答案，如果要非常全面，能写一本书
• 只关注核心点，针对面试

# 原则

• 多使用内存、缓存或其他方法
• 减少 CPU 计算、减少网络请求

# 从哪里入手

• 加载页面和静态资源
• 页面渲染

# 加载资源优化

• 静态资源的压缩合并
• 静态资源缓存
• 使用 CDN 让资源加载更快
• 使用 SSR 后端渲染，数据直接输出到 HTML 中

# 渲染优化

• CSS 放前面 ，JS 放后面
• 懒加载 （图片懒加载、下拉加载更多）
• 减少 DOM 查询 ，对 DOM 查询做缓存
• 减少 DOM 操作，多个操作尽量合并 在一起执行
• 事件节流
• 尽早执行操作 （如 DOMContentLoaded）

# 优化示例

展示几个优化示例

# 资源合并

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

//资源合并
<script src="abc.js"></script>

# 缓存

• 通过连接名字控制缓存
• <script src=“adc_1.js”></script >
• 只有内容改变的时候，连接名称才会改变
• <script src=“adc_2.js”></script >

# CDN

2 个在线的好用的 CDN 网站：

https://www.bootcdn.cn/

https://cdnjs.com/

# 使用 SSR 后端渲染

• 现在 Vue React 提出了这样的概念
• 其实 jsp php asp 都属于后端渲染

# 懒加载

# 缓存 DOM 查询

# 合并 DOM 插入

# 事件节流

# 尽早操作