请问：输入URL后发生了什么？
比如访问www.baidu.com， 先分析结构：
https:传输协议
www:服务器
baidu.com:域名
- 解析url，获取ip地址
baidu.com => 192.168.xx.xx(DNS域名解析)
-
建立tcp连接（三次握手）
-
传输数据，渲染页面
-
断开连接（四次握手）
请问：在3中的渲染页面的流程是什么？(html css js)
html构成dom树，css构成样式结构体，两者成为render tree ，计算节点信息 通过 UI引擎 渲染去成功绘制页面。
请问：css加载会造成哪些阻塞？
a. 会不会造成dom渲染阻塞？会，因为css加载在渲染之前。
b. 会不会阻塞dom树的构建？不会，因为两者并行构建。
c. 会不会阻塞js的执行？会，如果不会阻塞，会造成不可控的结果。比如一个css加载为红色，而js操作成绿色，如果不阻塞，无法确定到底是什么颜色。要确保css样式唯一，以js为准。
且GUI线程与JS线程呈互斥性，去确定唯一的样式。
让style代码先加载，script代码后加载也是此原理。
请问：如果渲染十万条数据？
a. 分页 =》 一定要做。10w / 每页200条
b. 文档fragment碎片 =》 如果不用要渲染n次，每次都要取数据渲染。fragment能够把n次数据集中到一起再渲染，相当于把n次变为1次。
c. requestAnimationFrame =》 减少重排次数的方法
d. 根据视口做懒加载 =》 要计算视口有多高，元素多高，达到什么高度再去加载。
请问：从哪些方面做性能优化？
1.页面加载性能：加载时间，用户体验
a. 减少http请求（雪碧图，精灵图，css和js内联与合并）
b. 压缩文件（熊猫压缩），减少体积（代码压缩，图片压缩），保证在同样的画质下压缩至50%以上。
c. CDN库放视频音频
d. 懒加载
2.动画与操作性能：是否流畅无卡顿(回流与重绘)
a. 当网页打开时动画飘来飘去，可能发生卡顿，大量的dom操作使之产生回流，即卡顿。
回流：很多dom在正常文档流的情况下，其中一个dom被删除后，又重新挤满。也就是元素的集合属性，例如高宽。
重绘：颜色从红色到绿色。不改变几何属性。
解决方式：脱离正常文档流（定位，浮动，transform）
虚拟dom不会导致回流和重绘。
3.内存占用：内存占用过大，浏览器崩掉等。
a. 少用闭包，手动回收。
b. 少定义全局变量。
例如晚上看直播时打游戏，浏览器崩掉，由于内存占用过大。
内存优化：
let obj ={}
obj = null //手动回收变量
4.电量消耗：游戏方面，可以暂时不考虑。
请问：在网页中间一个模块，我们用图片来做还是用css方式来做？
用css方式来做。因为再小的图片也是要发送请求，减少请求是必要的。
例如雪碧图精灵图，将小图片放在一张大图片上用定位的方式减少请求实现一张新的密密麻麻背景图。
案例：图片懒加载原理。
img将 src中放置虚拟地址，data-src放图片的真实地址。
整个网页的高windowHeight获取到，求得offsetTop（window.onscroll）,每一张图片距离浏览器窗口顶部的高
判断offsetTop是否小于windowHeight + 滚动的距离。图片才真正显示。
希望自律即自由。
