前端JavaScript面试技巧笔记（13）

模块化和构建工具有关的知识点想结合项目一起复习，笔记往后放，先看完运行环境相关的知识点；

知识点：

    #加载资源的形式

输入url或跳转页面加载html
加载html中的静态资源，如：<script src="A.js"></script>

    #加载一个资源过程

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

    #浏览器渲染页面的过程

加载和渲染顺序都是自上而下
根据HTML结构生成DOM树
根据CSS生成CSSOM
将DOM和SCCOM合成RenderTree（渲染树）
浏览器根据渲染树开始渲染
在加载过程中遇到script标签或css文件会另开一个连接下载，下载完后停止渲染并解析，解析完后继续渲染
新的css文件解析完后会整合之前的css样式重新渲染
有重定义，后加载的内容会覆盖先加载的相同内容

    #渲染树和Dom树的关系

渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元
素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树
中）。

还有一些Dom元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，
select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。同样，当文本因为宽度不够而折行时，
新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html，根据css规范，一个行内元素只
能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素。

一些渲染对象和所对应的Dom节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上
的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。
--------------------- 
作者：智学无忧-老曹 
来源：优快云 
原文：https://blog.youkuaiyun.com/lxcao/article/details/52862176 

 

     #注意点

js放在body的最下面

     #window.onload和DOMContentLoaded的区别

    #性能优化

原则：
多使用内存缓存或其他方法
减少CPU计算、减少使用网络

入手：
加载页面和静态资源
页面渲染

    #加载资源优化

静态资源压缩（体积压缩）合并（把不同文件合并减少加载请求）
静态资源缓存
使用CDN让资源加载更快
使用SSR后端渲染，数据直接输出到HTML中

 

只有名称改变浏览器才会重新加载文件

 

     #渲染优化

CSS放head（提前加载完css规则可以一次渲染完，而不是先默认渲染，再重新渲染），JS放body最后面（不会阻塞它后面代码的渲染，并且js代码能拿到所有它上面的标签）
懒加载（什么时候用什么时候加载，下拉加载更多，或者先放模糊预览）
减少DOM查询，对DOM查询做缓存
减少DOM操作，多个操作尽量合并在一起执行
事件节流
尽早执行操作（如DOMContentLoaded）

 

 

这个例子中对于键盘输入，用timeout来检测连续输入，如果间隔很短，就等到停下来再触发事件

 

    #参考

【1】智学无忧-老曹 浏览器工作原理（六）：渲染树构建 https://blog.youkuaiyun.com/lxcao/article/details/52862176