“代号2024：勇闯面试的十大核心前端原理，你准备好了吗？“

for循环：输出不同的i

如果想事件的对象ainput[i]与函数的执行对象ainput[i]保持一致，
    方法一：需要事件对象ainput[i]自定义属性index等于i，使事件的对象ainput[i]=调用
            函数的执行对象ainput[this.index]；
    方法二：用this代替调用函数的执行对象ainput[i];

自定义属性：可以给任何HTML元素添加任意个自定义属性
    注意：自定义属性前面不能有var；
    如：for( var i=0;i

ainput[i].index=i;

ainput[i].οnclick=function fn1(){              

    ainput[this.index].style.background=‘yellow‘;

};
        };

window.οnlοad=function(){
    var  ainput=document.getElementsByTagName(‘input‘);

    for( var i=0;i

ainput[i].index=i;

ainput[i].οnclick=function fn1(){              

    ainput[this.index].style.background=‘yellow‘;

};
    };
};

for括号中的内容是全局变量，理解为在for的外面定义变量；for外面的i最终解析为3，for里面的i从0开始增加

ainput[i].οnclick=function fn1(){}理解为可以2部分，
    一部分是ainput[i]的事件，i的第一个值为0；连续读取事件3次，i最终变为3；
    一部分是函数的执行，与ainput[i]的事件同等级，不是包含关系。执行的函数内没有定义变量i，向父级索取；ainput[i]的事件读取3次后，i变为3；才会执行事件需要调用的函数，fn1中的i自然为3；fn1中的ainput[i]变为ainput[3]；

2部分中的i的第一个值不一致；

懒加载、预加载

懒加载顾名思义，很懒，所以用到时才开始加载，不用不加载。
    初始置src属性为空，或者全部为“加载中”提示图的路径。监听页面滚动，当图片标签即将进入可视区域时给src重新赋值。此时图片开始加载

2. main.js引入插件：
import VueLazyLoad from ‘vue-lazyload‘
Vue.use(VueLazyLoad，{
    error：‘./static/error.png‘，
    loading：‘./static/loading.png‘
})

3. vue文件中将需要懒加载的图片绑定 v-bind：src 修改为 v-lazy

预加载，预，提前的意思。没用到时就先加载完等着。
    在进入页面前通过js加载需要的图片到浏览器缓存，浏览器刷新前，同样的图片路径请求会被跳过，直接使用缓存中的文件

var Fpreload = require(‘f-preload‘);
var preload = new Fpreload({
    source： Array，  //图片src数组(required)
    debug ： Boolean，  //默认false
    callback ： Function //默认null
});

作用域

浏览器读网页代码的过程 （代码解析）
1、“JS解析器”
（1）“找一些东西”：var  function 参数
            a = ...
            所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
            所有的函数，在正式运行代码之前，都是整个函数块
（2）JS的预解析
           遇到重名的：只留一个
           变量和函数重名了，就只留下函数
           同等级的变量var、同等级的函数，如果重名，后面的覆盖前面的
2、逐行解读代码：
      函数调用           遇到函数调用，需要再进行JS的解析，函数的参数也会被解析

作用域解析理解常搞错的案例：

作用域解析理解的重点案例：

解释一下事件流？

事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
确定目标阶段：确定事件目标
事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window
事件都是在事件冒泡处理，ie只有冒泡

拖拽

var dv = document.getElementById(‘dv‘);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
dv.onmousedown = function(e) {
    //获取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    //获取左部和顶部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
    //开关打开
    isDown = true;
    //设置样式  
    dv.style.cursor = ‘move‘;
}
//鼠标移动
window.onmousemove = function(e) {
    if (isDown == false) {
        return;
    }
    //获取x和y
    var nx = e.clientX;
    var ny = e.clientY;
    //计算移动后的左偏移量和顶部的偏移量
    var nl = nx - (x - l);
    var nt = ny - (y - t);

    dv.style.left = nl   ‘px‘;
    dv.style.top = nt   ‘px‘;
}
//鼠标抬起事件
dv.onmouseup = function() {
    //开关关闭
    isDown = false;
    dv.style.cursor = ‘default‘;
}

浏览器的回流和重绘

回流是：布局或者几何属性需要改变就称为回流。
回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

重绘：重绘是由于节点的几何属性发生改变或者由于样式发生改变但不会影响布局。

什么时候会发生回流呢？
    添加或删除可见的DOM元素
    元素的位置发生变化

    元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
    内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。

    页面一开始渲染的时候（这肯定避免不了）
    浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

如何减少回流和重绘：CSS优化法
    使用 transform 替代 top
    使用 visibility 替换 display： none ，因为前者只会引起重绘，后者会引发回流（改变了布局
    避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
    尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。
    避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
    将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame，详见探讨 requestAnimationFrame。
    避免使用CSS表达式，可能会引发回流。
    将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。
    CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性

如何减少回流和重绘：JavaScript优化法
    避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
    避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
    避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来

免费的API接口开放平台