INcnel
获得徽章 0
#挑战每日一条沸点# 阅读材料打卡Day15
节流是前端最常见的几项基本操作之一，而JS节流已经是所有前端工程师的必修科目了。但是CSS也能实现类似的节流效果，不过CSS作为静态控制的语言，实现的方式和JS不同：JS是禁止函数重复执行，CSS则可以从禁用函数点击事件来着手。
节流是前端最常见的几项基本操作之一，而JS节流已经是所有前端工程师的必修科目了。但是CSS也能实现类似的节流效果，不过CSS作为静态控制的语言，实现的方式和JS不同：JS是禁止函数重复执行，CSS则可以从禁用函数点击事件来着手。
评论
点赞
阅读材料打卡Day13
今天的材料是大厂面试题。
DOM是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
而在页面中，可以通过 document 对象来获取 HTML 元素，进行增删改查的 DOM 操作，禁止DOM可以防止使用者修改网页，但是确实是比较少见的。
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
今天的材料是大厂面试题。
DOM是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
而在页面中，可以通过 document 对象来获取 HTML 元素，进行增删改查的 DOM 操作，禁止DOM可以防止使用者修改网页，但是确实是比较少见的。
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day11
Vite项目屏幕适配有基于rem的和基于scale的两种适配方案，前者是相对于根元素字体大小的单位进行调整，相对于更泛用，文字网页之类都很好用；后者是使用CSS的transform属性的scale()方法来进行调整，适合在固定宽高比的情况，例如图片。
Vite项目屏幕适配有基于rem的和基于scale的两种适配方案，前者是相对于根元素字体大小的单位进行调整，相对于更泛用，文字网页之类都很好用；后者是使用CSS的transform属性的scale()方法来进行调整，适合在固定宽高比的情况，例如图片。
展开
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day10
CSS属于是前端最基础的入门语言之一了。这篇文章列举了7个不太常用的CSS属性，但是都很有用也很有趣。个人非常喜欢background-clip: text的文字背景效果，虽然也可以使用其他语言进行解决；还有focus-within 伪类的连锁变动效果，在很多地方都有着使用案例。看完后适合积累。
CSS属于是前端最基础的入门语言之一了。这篇文章列举了7个不太常用的CSS属性，但是都很有用也很有趣。个人非常喜欢background-clip: text的文字背景效果，虽然也可以使用其他语言进行解决；还有focus-within 伪类的连锁变动效果，在很多地方都有着使用案例。看完后适合积累。
展开
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day9
图片加载一直是网络浏览中的一个难以规避的问题。TinyPng是一个使用智能的「有损压缩技术」来减少图片大小的工具，使用它对项目中的图片进行压缩可以有效降低图片大小。当然，我觉得前端真不用背锅，这锅应该UI来背，素材提供的时候就已经要做好大小处理了。
图片加载一直是网络浏览中的一个难以规避的问题。TinyPng是一个使用智能的「有损压缩技术」来减少图片大小的工具，使用它对项目中的图片进行压缩可以有效降低图片大小。当然，我觉得前端真不用背锅，这锅应该UI来背，素材提供的时候就已经要做好大小处理了。
展开
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day8
Esbuild，又是一个新东西。它是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。打包是每一个项目都必不可缺少的东西，虽然对于现在的我来说还并无太大作用，但反正，先学着吧
Esbuild，又是一个新东西。它是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。打包是每一个项目都必不可缺少的东西，虽然对于现在的我来说还并无太大作用，但反正，先学着吧
展开
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day7
WebRTC是我之前没接触过也完全没了解到过的，它是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。
WebRTC是我之前没接触过也完全没了解到过的，它是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。
评论
点赞
#挑战每日一条沸点# 阅读材料打卡Day6
睡不着就看看文章吧。抓包看上去是黑客技能，但是在软件调试中是非常有用的，因为测试中需要调试代码和同时有着大量测试数据的产生。如果开发中一直都使用服务器部署调试，那效率是非常低的，而抓包到本地进行伪联网调试就可以解决这个问题，在调试中非常有用。这篇文章先介绍抓包的原理，再介绍抓包工具 whistle 的使用，很好地讲明白了抓包是个什么东西和一些基础的用法，收益颇丰。
睡不着就看看文章吧。抓包看上去是黑客技能，但是在软件调试中是非常有用的，因为测试中需要调试代码和同时有着大量测试数据的产生。如果开发中一直都使用服务器部署调试，那效率是非常低的，而抓包到本地进行伪联网调试就可以解决这个问题，在调试中非常有用。这篇文章先介绍抓包的原理，再介绍抓包工具 whistle 的使用，很好地讲明白了抓包是个什么东西和一些基础的用法，收益颇丰。
展开
评论
点赞