JavaScript 页面渲染

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

　　1.1 加载资源的形式

　　     输入 URL 或跳转页面 加载 html

　　1.2 加载一个资源的过程

　　　　浏览器根据DNS服务器得到域名的IP地址

　　　　向这个IP的机器发送http请求

　　　　服务器收到后 处理并返回 http请求

　　　　浏览器得到返回内容

　　1.3 浏览器渲染页面的过程

　　　　根据 HTML 结构生成 DOM Tree

            根据 CSS 生成 CSSOM

　　　　将 DOM 和 CSSOM 整合形成 RenderTree 渲染树

　　　　浏览器根据 渲染树 开始渲染

　　　　遇到 <script> 时 会执行并阻塞渲染 因为js有权利改变 dom 结构 所以要等着js脚本执行

2. window.onload 和 DOMContentLoaded 的区别

  window.onload : 页面的全部资源加载完才会执行，包括图片视频；

  DOM 渲染完即可执行 此时图片 视频还没有加载完

 

3 前端性能优化

  3.1 加载资源优化

1 静态资源的压缩合并

2 静态资源缓存

3 使用CDN让资源加载更快

4 使用SSR后端渲染，数据直接输入到HTML中

 3.2 渲染优化

 1 css在前 js放后面

 2  懒加载 （图片懒加载，下拉加载更多）

3 减少DOM查询，对DOM查询做缓存

4 减少 DOM 操作，多个操作尽量合并在一起执行

5 事件节流

6尽早执行操作 如 DOMCotentLoaded

例子：6.1 资源合并

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<!--资源合并-->
<script src="abc.js"></script>

6.2 缓存

通过连接名称控制缓存

<script src="abc_1.js"></script>

只有内容改变的时候，连接名称才会改变

<script src="abc_2.js"></script>

6.3 使用CDN

比如一些常用的js文件使用放在CDN上的，例如：bootstrap，zepto.min.js

 

7. 图片懒加载，src的占位图片 可以缓存，可以在加载完页面之后，在执行真正的图片的替换。

<img id="img1" src="preview.png" data-realsrc="abc.png">

<script type="text/javascript">
    var img1 = document.getElementById('img1');
    img1.src = img1.getAttribute('data-realsrc');
</script>

8  缓存 DOM 查询

9 合并 DOM 插入

10。事件节流

 

如果输入很快，第一次生成的timeoutId都会被下一次的 keyup事件，清空。 但是一旦停下输入，最后一次的keyup事件 将会保存下来，100ms 后 执行 change事件。