首页  思维导图  详情

运行环境

2021-03-24 15:03:37   0  举报





仅支持查看

AI智能生成

前端面试_运行环境

前端面试

运行环境

作者其他创作

大纲/内容

运行环境即浏览器（sever 端有 nodejs）

网页加载过程

资源的形式

加载过程

<ol><li>DNS 解析：域名 -> IP 地址（Domain Name  Server） </li><li>浏览器根据 IP 地址向服务器发起 http 请求 </li><li>服务器处理 http 请求，并返回给浏览器</li></ol>

渲染过程

<ol><li>根据 HTML 代码生成 DOM Tree；</li><li>根据 CSS 生成 CSSOM（CSS 对象模型）； </li><li>将 DOM Tree 和 CSSOM 整合成 Render Tree（渲染树）； </li><li>根据 Render Tree 渲染页面； </li><li>如果遇到 <script> 则暂停渲染，优先加载并执行 JS 代码，完成后再继续（JS 和 DOM 渲染共用一个线程）；</li><li>直至渲染完 Render Tree。</li></ol>

为何建议把 css 放在 head 中？ 把 css 代码在 DOM 树生成完成之前加载，避免重新渲染页面。

为何建议把 js 放在 body 最后? js 可能会阻断渲染进程，使得页面渲染时间过长，从而影响页面加载速度。

图片的加载不会阻塞 DOM 渲染

window.onload 和 DOMContentLoaded

<ul><li>window.onload 资源全部加载完才能执行，包括图片、视频等；</li><li>DOMContentLoaded DOM 渲染完成即可，图片可能尚未下载。 </li></ul>通过监听 DOMContentLoaded 监听网页加载完成更合适，不用等图片加载完。

相关面试题

从输入 url 到渲染出页面的过程

下载资源：各个资源类型，下载过程 页面渲染：html css js 图片等

window.onload 和 DOMContentLoaded 的区别

性能优化

原则

<ul><li>多使用内存、缓存或其他方法 </li><li>减少 CPU 计算量，减少网络加载耗时</li></ul>

从何入手

让加载更快

<ul><li>减少资源体积：压缩代码（webpack），压缩图片（TinyPNG）</li><li>减少访问次数：合并代码（js，css，img-雪碧图），SSR 服务端渲染（服务端将页面及页面要渲染的内容一并给前端），缓存（hash）</li><li>使用更快的网络：CDN（根据区域获取资源）</li></ul>

让渲染更快

<ul><li>CSS 放在 head 里，JS 放在 body 最下面</li><li>尽早开始执行 JS，用 DOMContentLoaded 触发</li><li>懒加载（图片懒加载，上滑加载更多）</li><li>对 DOM 查询进行缓存</li><li>频繁 DOM 操作，合并到一起插入 DOM 结构</li><li>节流 throttle，防抖 debounce，让渲染更加流畅</li></ul>

性能优化示例

缓存

静态资源加 hash 后缀，根据文件内容计算 hash； 文件内容不变，则 hash 不变，则 url 不变； hash 和 url 不变，则自动触发 http 缓存机制，返回 304。

CDN

专门做静态文件服务，且根据地域来做服务，更大程度上满足网络性能

SSR 

服务器端渲染：将网页和数据一起加载，一起渲染

非 SSR（前后端分离）：先加载网页，再加载数据，再渲染数据

对 React Vue 的服务端渲染，提升性能

懒加载

首屏图片先加载，后面图片滑动到再加载

先加载预览图，在需要加载图片时将图片地址赋值给 src