调试项目|青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第十六天字符串的相加实际是拼接在代码中加deb

这是我参与「第五届青训营」伴学笔记创作活动的第十六天

字符串的相加实际是拼接在代码中加debugger加断点点左侧加断点鼠标一上去就会显示值 watch里面也有变量值

选择断点 Scope是作用域

闭包

function sum(arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum([1, 2, 3, 4, 5]); // 15

可以返回求和函数调用函数

f(); // 15

返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。如果一定要引用循环变量，要创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：

function (x) { return x * x } (3);

也可以自定义函数，传入一参数封装好直接用

var pow2 = make_pow(2);
var pow3 = make_pow(3);

console.log(pow2(5)); // 25
console.log(pow3(7)); // 343

DOM

用于开发静态页面动画

这个dom树有一个根节点<html>标签，由这个根，你的每一个<meta>标签，<p>标签，<title>,<h1>等等，以及他们的文本内容，在上面生长，我们可以很轻松的在这颗树上定位到他们的位置！

压缩代码

前端代码天生开源，出于安全考虑会对javascript进行压缩，压缩后的代码只有一行，变量使用‘a’,'b'等替换，肢体代码不可阅读创建 webpack.config.js 文件，代码如下所示：

webpack

官网webpack

app/webpack.config.js 文件

module.exports = { entry: "./runoob1.js",
output: { path: __dirname, filename: "bundle.js" },
module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }
]
} 
};

UglifyJS

terser

模仿弱网环境

看后端的接口

Application浏览器存储相关的

清缓存

性能

可以使用脚本进行性能测试

性能好的时候

渲染差的时候

看FPS指标

此时FPS40+，在丢帧，可能是显卡的问题正常应该是60+ 重新录制有很多红色的东西，

57.81ms超时了批处理，强制把渲染的处理都清空，重清和重排

如何优化

每次执行offsetTop都会重新渲染，如果不调用此函数就不会重开，性能就会提升

网页站点性能

LightHouse性能分析

调试项目|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 十六 天

闭包

DOM