您现在的位置是：首页 >技术交流 >性能优化 面试网站首页技术交流

性能分析
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;
      }
    }
  };