草庐IT

#yyds干货盘点#前端图片懒加载

前端性能优化里有图片的加载,有懒加载和预加载。那么什么是懒加载呢?懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。有的网站图片很多,而如果一上来就加载所有的图片,会导致网页加载很慢图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片预加载指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间,提高用户的体验。我了解的预加载的最常用的方式是使用js中的image对象,通过为image对象来设置scr属性,来实现图片的预加载。图片懒加载的基本实现图片的加载是由src引起的,

#yyds干货盘点# 前端歌谣的刷题之路-第一百五十一题-三列布局 - 圣杯布局

 前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目  不像Flexbox或Grid布局可以控制元素显示的次序,圣杯布局是通过浮动元素和外边距属性实现三列布局,但最重要的一点是,在文档中需要将优先渲染的内容写在最前方,但显示时看起来却好像是按照显示次序书写的一样。 首先给类名为"container"的盒子添加"overflow:hidden"和"padding:0px100px"属性,以为了防止容器

#yyds干货盘点# 前端歌谣的刷题之路-第一百五十一题-三列布局 - 圣杯布局

 前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目  不像Flexbox或Grid布局可以控制元素显示的次序,圣杯布局是通过浮动元素和外边距属性实现三列布局,但最重要的一点是,在文档中需要将优先渲染的内容写在最前方,但显示时看起来却好像是按照显示次序书写的一样。 首先给类名为"container"的盒子添加"overflow:hidden"和"padding:0px100px"属性,以为了防止容器

#yyds干货盘点#前端存储之indexDB

​​localStorage​​​是前端本地存储的一种,其容量一般在​​5M-10M​​左右,用来缓存一些简单的数据基本够用,毕竟定位也不是大数据量的存储。在某些场景下​​localStorage​​的容量就会有点捉襟见肘,其实浏览器是有提供大数据量的本地存储的如​​IndexedDB​​存储数据大小一般在​​250M​​以上。弥补了​​localStorage​​​容量的缺陷,但是使用要比​​localStorage​​复杂一些。IndexDB是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是5M、10M这样小打小闹级别了。理论上来说,IndexDB理论上是没有存储上限的一般来说

#yyds干货盘点#前端存储之indexDB

​​localStorage​​​是前端本地存储的一种,其容量一般在​​5M-10M​​左右,用来缓存一些简单的数据基本够用,毕竟定位也不是大数据量的存储。在某些场景下​​localStorage​​的容量就会有点捉襟见肘,其实浏览器是有提供大数据量的本地存储的如​​IndexedDB​​存储数据大小一般在​​250M​​以上。弥补了​​localStorage​​​容量的缺陷,但是使用要比​​localStorage​​复杂一些。IndexDB是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是5M、10M这样小打小闹级别了。理论上来说,IndexDB理论上是没有存储上限的一般来说

#yyds干货盘点#vue.config.js 的完整配置

今天分享一下,我们项目当中的一些​​webpack​​配置,希望能给大家有所启发;只要配置多了,你就会发现其实所有的配置的都是相似的,尤其像插件的配置,都是十分相似的。我们现在开始进入今天的主题啦~~1介绍之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有​​webpack.config.js​​的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整​​webpack​​,这个时候,在Vue3.0的项目当中,我们就需要在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​@vue/cli-service​​ 自动加载。

#yyds干货盘点#vue.config.js 的完整配置

今天分享一下,我们项目当中的一些​​webpack​​配置,希望能给大家有所启发;只要配置多了,你就会发现其实所有的配置的都是相似的,尤其像插件的配置,都是十分相似的。我们现在开始进入今天的主题啦~~1介绍之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有​​webpack.config.js​​的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整​​webpack​​,这个时候,在Vue3.0的项目当中,我们就需要在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​@vue/cli-service​​ 自动加载。

#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目请补全JavaScript代码,要求如下:1.监听对象属性的变化2.当"person"对象属性发生变化时,页面中与该属性相关的数据同步更新3.将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时,页面中与该属性相关的数据同步更新注意:1.必须使用Object.defineProperty实现且触发set方法时更新视图2.

#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目请补全JavaScript代码,要求如下:1.监听对象属性的变化2.当"person"对象属性发生变化时,页面中与该属性相关的数据同步更新3.将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时,页面中与该属性相关的数据同步更新注意:1.必须使用Object.defineProperty实现且触发set方法时更新视图2.

#yyds干货盘点#常见的JavaScript内存错误

JavaScript不提供任何内存管理操作。相反,内存由JavaScriptVM通过内存回收过程管理,该过程称为垃圾收集。​既然我们不能强制的垃圾回收,那我们怎么知道它能正常工作?我们对它又了解多少呢?脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存,而是在多个周期中运行它是不可预测的,但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心,可能会产生一些内存泄漏。什么是内存泄漏?内存泄漏是软件无法回收的已分配的内存块。Javascript提供了一个垃圾收集程序,但这并不意味着我们就能避免内存泄漏。为了符合垃圾收集的条件,该对象必