1,Web 加载 & 渲染基本原理
从输入 url 到页面加载显示完成都发生了什么?
- 在浏览器进程(browser process),UI 线程判断是关键词的搜索,还是 url 要访问的站点。如果是url,则通过网络线程进行 DNS 查找 IP,然后发送请求和服务器建立连接,如果是 https 协议,则建立 TSL 连接。如果服务器返回 301,则重新发起访问新地址。服务器返回网页的html
- 渲染进程(renderer process),进行文档的加载和渲染。主线程进行文本的解析,构建DOM,边解析边加载子资源,JS 阻塞解析(async/defer);然后解析 CSS,计算 computed styles,然后构造布局树的位置和大小;然后在绘制线程确定绘制的顺序,将页面拆分图层,构建图层树(layer tree);最后在复合线程创建一个复合帧。
2,首屏( above the fold )加载优化
web 增量加载的特点决定了首屏性能不会完美,过长的白屏影响用户体验和留存 什么是首屏加载,怎么进行优化?
- 首屏用户加载体验的3个关键时刻
3,javascript 内存管理
JS 是怎样管理内存的,什么情况会造成内存泄漏? 内存泄漏会严重影响性能
- 内存释放的主要问题是如何确定不再需要使用的内存
- 所有的 GC 都是近似实现,只能通过变量是否还能再访问到
- 局部变量,函数执行完,没有闭包引用,就会被标记回收
- 避免反复运行引发大量闭包
- 避免脱离的 DOM 元素
- 全局变量,直到浏览器关闭页面时释放
- 避免意外的全局变量的产生
- 引用计数,无法解决循环引用的问题
- 标记清除