便利贴--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;
}
}
}