性能分析
1.页面加载性能(加载时间;用户体验)
2.动画与操作性能(是否流畅无卡顿)
3.内存占用(内存占用过大,浏览器崩掉等)
4.电量消耗(游戏方面,暂不考虑)
1.浏览器输入url并回车都发生了什么?
https:传输协议,加密的http
www:服务器
baidu.com:域名
?key=123:参数
第一次访问之后,会将域名解析的映射缓存到本地(浏览器缓存)
a.解析url,拿到ip地址(DNS域名系统)
b.建立连接(TCP三次握手)每一次都是试探,不携带任何正式数据
c.开始传输数据
d.渲染页面
e.断开连接(TCP四次挥手)
回流与重绘
2.css加载会造成以下哪些发生阻塞(bc)
a.dom解析
b.render构建
c.js的执行
3.性能优化的点
a.加载
(1)减少http请求(精灵图,雪碧图,css与js内联与合并)
(2)缩小文件大小(资源压缩/uglify-js进行js文件的压缩)
(3)CDN库
(4)懒加载 ssr预渲染
b.动画与操作性能
(1)避免回流 =>脱离文档流
c.内存方面
(1)避免全局变量,有的话手动回收(obj=null)
(2)少用闭包,手动回收
//script部分
const num = document.getElementsByTagName('img').length;
const img = document.getElementsByTagName('img');
let n = 0;
layLoad();
window.onscroll = layLoad;
const layLoad = () => {
const seeHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollTop;
for (let i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollHeight) {
img[i].src = img[i].getAttribute('data-src');
//防止重复加载
n = i + 1;
}
}
};