便利贴--39{前端优化问题}

基本面试问题

1.输入url并回车，发生了什么，
https://www.baidu.com
a，解析url-拿到域名(统一资源定位符 网址)
https:传输协议
www:服务器
baidu.com;域名 = DNS域名系统
？id= &name=1 参数
b.拿域名去匹配唯一的id
c.建立连接 - 三次握手 TCP发包
d. 请求和传输数据，渲染页面
e. 断开连接（四次挥手）

渲染过程-- display：none可优化
2.css加载会造成阻塞吗？
a.不会造成dom树解析
b.会阻塞readTree dom的渲染
c.会阻塞js的加载-js线程和ui线程不能同时进行，会冲突不确定性，js的执行会在css加载之后

3.回流和重绘
重绘：不会改变元素的几何属性 （宽高）改背景色，边框颜色 不一定回流
回流：改变了元素的几何属性， 必定会重绘 网页中 中间元素抽走，下面的元素就会改变位置，就形成了回流
避免回流，脱离正常文档 （定位，浮动，transform,translate 方法缩小）

4.从哪些方面进行优化
tip：三元运算比if else快
a.内存占用，页面加载性能，动画与操作性能，电量消耗
b.指标，秒开率，2秒内打开
c.内存大，堆栈溢出（无线递归，循环）
d.加载问题-
1.减少http请求 （css请求图片会好减少下载）
2.减少文件大小 （资源压缩 gzip）
3.CDN库（分布多，拉取快）
4.懒加载
5.服务端渲染 ，预渲染
e.动画与操作
1.减少操作dom - 用文档碎片
2.避免回流（脱离文档流）

5.什么是性能 什么是效率
vue：数据驱动 通过虚拟dom做比较替换 --比直接操作dom 解决了性能渲染优化
ifelse = 效率

性能要优化高频面试题

面试官的心路历程
1.vue应用相关问题（调皆苦，axios二次封装，api作用 ）=>可用性
2.js相关，vue原理（虚拟dom，闭包，原形链，响应式）
3.性能优化（vue里面的优化，打包，常规优化 ，如果碰到了什么问题怎么优化）

案例

  //懒加载
        // 通过offtop 是否是在视口高度 + 滚动条
        let num = document.getElementsByTagName('img').length;
        let img = document.getElementsByTagName("img");
        let n = 0;
        lazylode();
        window.onscroll = lazylode;
        function lazylode() {
            let seeHeight = document.body.clientHeight;
            let scrop = document.documentElement.scrollTop || document.body.scrollTop
            for (let i = n; i < num; i++) {
                if (img[i].offsetTop < (seeHeight + scrop)) {
                    img[i].src = img[i].getAttribute("data-src");
                    n = i + 1;
                }
            }
        }