最新技术分享：前端开发小技巧_前端有趣的技术分享(2)，满满干货指导

最新推荐文章于 2024-07-25 22:24:14 发布

2401_84520245

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量664

点赞数 30

分类专栏：程序员文章标签：网络安全学习面试

本文链接：https://blog.csdn.net/2401_84520245/article/details/138831373

版权

程序员专栏收录该内容

183 篇文章 1 订阅

订阅专栏

给大家的福利

零基础入门

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供：

在这里插入图片描述

因篇幅有限，仅展示部分资料

网络安全面试题

绿盟护网行动

还有大家最喜欢的黑客技术

网络安全源码合集+工具包

所有资料共282G，朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》，可以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

再来看代码执行结果, 就会跳转到指定定位符位置了

console.table()

思考一下平时在开发过程中, 我们的代

码中出现频率比较高的一段代码是什么

console.log('xxx')

因为各种各样的原因, 我们的代码一旦在浏览器运行总是各种红色

所以很多小伙伴会选择在控制台打印一下看看

看看我遍历的是个啥

看看我获取的元素是个啥

看看我请求回来的东西是个啥

看看我算的数是不是 NaN

…

但是遇到类似下面这样的代码

var obj = { name: 'Jack' }
console.log(obj)
// ...

obj.name= 'Rose'
// ...

console.log(obj)

在控制台打印出来的可能不是我们想要的

如果只有一两个属性, 那么没啥问题, 我不用打开就能看到结果

但是一旦对象中属性变得多了, 那么我们展开以后看到的结果就会误导我的代码了

这个时候, 我们可以选择使用 console.table() 来进行控制台展示

var obj = { name: 'Jack' }

console.log(obj)
// ...

obj.name= 'Rose'
// ...

console.log(obj)

展示出来的结果是这样的

比刚才舒服多了

但这个东西也不是任何场景下都好用

我们来打印一个 DOM 元素看看

var div = document.getElementById('box')
console.table(div)

丧心病狂的展示方法 !!!

contenteditable

我们在页面上写的大部分标签都是不可以编辑的

但是一旦你给元素加上 contenteditable 属性以后, 就变成可以编辑的了

<div contenteditable>
    hello world
</div>

我们可以写一个内联样式, 写在 body 标签里面

<body>
    <style contenteditable style="display: block; height: 100px; overflow: auto;">
        div { width: 100px; height: 200px; }
    </style>
    
    <div>
        hello world
    </div>
</body>

那么我们就可以直接在页面上测试 css 样式了

calc()

我们再写 css 的时候, 经常会遇到一个小问题

就是我已经写了宽度 25% 了

然后发现, 你发现还有 margin: 0 10px

这该怎么办呢？

不写 25% 了, 拉个计算器过来, 我算数还不行吗

归零 … 归零 … 归零 …

我们也可以选择使用一个
calc()

li {
    width: calc(25% - 20px);
}

web worker

JS 是单线程的, 那么到底能不能同时做两个事情呢

利用web worker是可以的

web worker 就给我提供了一个多线程环境

可以在主线程环境下, 开启一个 worker 环境线程

我们可以将一些比较费时间的任务交给 worker 线程来做

我们的主线程还是继续做主线程的事情

这样, 就可以达到两个事情同时开始

通常, 我们都会在 worker 线程里面进行一些计算量比较大的任务

在主线程里面进行页面交互行为, 这样不会被阻塞或者拖慢

来看下面一段代码

console.time('test for')
console.time('test timeout')

for (var i = 0; i < 1000000000; i++) { }

console.timeEnd('test for')

setTimeout(() => {

    console.log('定时器')

    console.timeEnd('test timeout')

}, 2000)

写了一个循环, 一个定时器

由于循环要花好久才能执行结束。定时器会在循环结束后开始计时执行

也就是我们的定时器被循环阻塞了