运行环境
讲解 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 >
加载一个资源的过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送 http 请求
- 服务器收到、处理并返回 http 请求
- 浏览器得到返回内容
浏览器渲染页面的过程：
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 性能优化
关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。
提及 前端性能优化 ，大家应该都会想到 雅虎军规，本文会结合 雅虎军规 融入自己的了解知识，进行的总结和梳理 ?
我们先来看看 ? 雅虎军规 的 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网站：
使用 SSR 后端渲染
- 现在 Vue React 提出了这样的概念
- 其实 jsp php asp 都属于后端渲染
懒加载
缓存DOM 查询
合并 DOM 插入
事件节流
尽早操作
3875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
