加载
前端开发中的图片优化与加载性能提升
前端开发中的图片优化与加载性能提升随着互联网和移动设备的普及，图片已经成为网页设计和用户体验中不可或缺的一部分。然而，过多且未经优化的图片可能会影响网页的加载速度，给用户带来糟糕的体验。因此，在前端开发中，如何优化和提升图片的加载性能成为了一个重要的议题。一、选择合适的图片格式在前端开发过程中，选择合适的图片格式是优化和提升加载性能的首要步骤。常见的图片格式包括JPEG、PNG和GIF。JPEG格...
雪碧图的概念
雪碧图的概念雪碧图（也称为CSS精灵或CSS sprites）是一种前端开发中常用的技术，通过将多个小图标或图片合并成一个大图，然后利用CSS的背景定位属性将需要的图标显示出来。这种技术的主要目的是减少HTTP请求的数量，从而提高网页加载速度和性能。雪碧图的概念最早出现在游戏开发中，当时为了提高游戏的渲染效率，开发者将游戏中的角、道具等小图标合并在一起，以减少CPU和GPU在渲染这些小图标时的开...
Web前端笔试115道题(带答案及解析)
Web前端笔试115道题（带答案及解析） 1、html5为什么只需要写<!doctype html>? 答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为， 否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知...
img标签图片与图片背景的区别和使用场景
img标签图⽚与图⽚背景的区别和使⽤场景1.img<img src="图⽚来源" alt="图⽚⽆法显⽰时显⽰图⽚说明性⽂字" />img标签虽然不是块状元素，但是可以设置宽⾼，占位，img设置width后height会⾃适应匹配，如果设置height后width会⾃适应匹配，如果同时设置width，height，img图⽚可能会变形2.background-image它是css的⼀...
一到三年经验前端面试题总结——看完这些月薪过万没问题(持续更新中...
⼀到三年经验前端⾯试题总结——看完这些⽉薪过万没问题（持续更新中）前⾔：以下是根据⾃⼰复习的资料和⾯试遇到的问题整理出来的，后⾯逐渐更新，复习⽤！！希望⼤家都能到满意的⼯作我⾃⼰的技术栈是vue加⼩程序，所以react这⽅⾯写的少因为是⾯试题总结，我就不详细的写知识点，只写最简洁的话术，⾯试能直接回答上来的⼀、思想1、说⼀下你是怎么学习前端的？padding是外边距还是内边距这⾥每个⼈都不⼀样，...
CSS样式调整与优化方法
CSS样式调整与优化方法CSS样式是网页设计中不可或缺的一部分，通过调整和优化CSS样式可以让网页更加美观、用户友好，并提升网页加载速度和性能。本文将介绍一些CSS样式调整与优化的方法，供网页设计者参考。一、选择合适的选择器在CSS样式表中，选择器用于选择要应用样式的HTML元素。选择器的选择范围越大，样式匹配的次数就越多，从而导致加载速度变慢。因此，选择合适的选择器是优化CSS样式的关键。应尽量...
纯css实现高度与宽度成比例展示
纯css实现⾼度与宽度成⽐例展⽰最近在拿移动端项⽬练⼿的时候发现这样⼀个问题:在浏览器把图⽚加载出来以前，图⽚的⾼度是零，没办法把容器撑开，容器在图⽚加载前后都会有⼀个变型的过程，也就是俗称的“闪烁”，⽽如果图⽚加载不出来，整体布局就更是难看了。此时我们需要不靠图⽚本⾝就能把容器的⾼度撑开⽅可解决问题。margin属性值可以为百分比在移动端，由于各机型分辨率相差太⼤，对图⽚是不能写死px值的，还是...
彻底理解Linux下动态替换.so的方法
彻底理解Linux下动态替换.so的⽅法0x00 背景hdfs增加了⼀个native⽅法，打成了libhadoop.so这个动态库。需要分发到线上的各个Datanode上以便升级。在灰度分发到datanode时遇到了可复现的问题，即datanode进程肯定会core dump。分析core dump时产⽣的hs_err_pid.log⽂件后，发现最后的执⾏现场都是在执⾏native⽅法。怀疑和替换...
HTML如何悬停变,html–如何在CSS悬停上显示随机颜?
HTML如何悬停变⾊,html–如何在CSS悬停上显⽰随机颜⾊？这是我将如何使⽤javascript和jquery(不需要，但更简单).html：JavaScript的：$('#random').on('mouseover',function() {var color = '#'+Math.floor(Math.random()*16777215).toString(16);var colorSt...
前端开发遇到的常见问题解决方法
前端开发遇到的常见问题解决方法作为一名前端开发人员，常常会遇到各种各样的问题，有些问题可能很简单，但有些问题则需要我们耐心地去解决。在这篇文章中，我们将探讨一些前端开发中常见问题的解决方法，希望能对大家有所帮助。一、浏览器兼容性问题在前端开发中，浏览器兼容性问题是一个非常常见的挑战。由于不同浏览器对HTML、CSS和JavaScript的解析方式不同，我们需要针对不同浏览器做一些适配工作。css最...
vue项目动态引入css(sass)文件(判断后加载对应的sass文件)
vue项⽬动态引⼊css（sass）⽂件（判断后加载对应的sass⽂件）vue 项⽬动态引⼊css⽂件preface最新在写后台 管理， 应 业务需求， 众多菜单业务中 有个菜单需要独⽴出来给领导使⽤，改领导有独特喜欢的颜⾊格调。快速开发， 只是做了菜单的权限控制， 然后和样式 控制，通过两个域名分别访问到 “两个平台” 的 两个登录页⾯问题通过域名判断 来 确定 某些 css ⽂件是否加载。⾸先...
前端静态js、css文件自动增加版本号方法
前端静态js、css⽂件⾃动增加版本号⽅法⾸先为什么要加这个版本号呢？ 因为浏览器会的缓存机制会缓存你的js与css代码，当然，这本是浏览器本意为了减少加载时间优化⽤户体验，但是也因为缓存机制的存在，在页⾯刷新的时候浏览器会去拿存在浏览器缓存内部的js和css代码，这就可能造成我们开发⼈员在更新代码的时候，会被浏览器的缓存机制给坑⼀把，不能展⽰最新的样式或者⾏为事件，为了使每⼀次页⾯重...
css多个!important保证新样式一定覆盖原样式方法
css多个!important保证新样式⼀定覆盖原样式⽅法前⾔⼀般来说，我们在项⽬初期不会造成多 !important 的问题，⽽在陈年项⽬中，我们再去修改原代码的样式 css ⽂件已经不太现实，花费⼤量时间还容易造成未知的错乱。为了保证样式⼀定可控，也就是加⼊的新样式⼀定覆盖原样式，可以采⽤如下⽅法。解决先看⼀段例⼦：<!DOCTYPE html><html lang="en"...
vue项目的样式加载顺序
vue项⽬的样式加载顺序加载顺序以main.js中 important 引⼊顺序为主，后引⼊样式会覆盖先引⼊样式本地运⾏时，App以及router相关样式的权值会被提到最⾼import App from './App'// 控制App.vue⽂件中style的加载import router from './router'// 控制view和 components 中相关style的加载本地运⾏时c...
jsjquery控制页面动态加载数据滑动滚动条自动加载事件的方法_百度文 ...
jsjquery控制页⾯动态加载数据滑动滚动条⾃动加载事件的⽅法js控制滚动条页⾯滚动动态加载数据，页⾯下拉⾃动加载内容相信很多⼈都见过瀑布流图⽚布局，那些图⽚是动态加载出来的，效果很好，对服务器的压⼒相对来说也⼩了很多有⼿机的相信都见过这样的效果：进⼊qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是⽇志今天我们就来看看他们的实现思路和js控制动态加载的代码下⾯的代码主要是控制滚动条下...
详解iframe与frame的区别
详解iframe与frame的区别iframe与frame的区别⼀、使⽤iframe的优缺点优点: 1.程序调⼊静态页⾯⽐较⽅便; 2.页⾯和程序分离;缺点： 1.iframe有不好之处：样式/脚本需要额外链⼊，会增加请求。另外⽤js防盗链只防得了⼩偷，防不了⼤盗。 2.iframe好在能够把原先的⽹页全部原封不动显⽰下来，但是如果⽤在⾸页，是搜索引...
网页上怎么实现按钮加载更多功能
⽹页上怎么实现按钮加载更多功能平⽇使⽤今⽇头条较多，在思考⼀个问题：怎么下翻时实现信息⾃动加载呢。在html中，有时也需要实现⽹页"加载更多"功能，来按需求加载显⽰更多数据给⽤户，这样界⾯更加亲和和快速。今晚值班来实验⼀番！1、滚动条简单实现功能。此⽅法需要⼿动拉动滚动条，⽽且内容⼀次性展⽰。<div ></div>div 内容的⾼度⼤于 300px 就会出现垂直滚动条，⼩...
【JQ】无限滚动条-jquery.infinitescroll.js使用说明
【JQ】⽆限滚动条-jquery.infinitescroll.js使⽤说明最基本⽤法：$('#content').infinitescroll({ //#content是包含所有图或块的容器navSelector : "div.navigation", //导航的容器，成功后会被隐藏nextSelector : "div.navigation...
JS实现滚动条触底加载更多
JS实现滚动条触底加载更多原理1.通过监听滚动区域DOM的scroll事件, 计算出触底// 滚动可视区域⾼度 + 当前滚动位置 === 整个滚动⾼度scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight2.触底后触发列表添加, 列表添加使⽤createDocumentFragment, 将多次插⼊的DOM先存...
vue纯js监听滚动条到底部的实例讲解
vue纯js监听滚动条到底部的实例讲解在⽹页中，我们会遇到很多在滚动条到底部的时候有数据正在加载的事件，那么怎样⽤vue去实现这样的内容呢？本篇只给出⼀个雏形，结合vue的⽣命周期⽤纯javascript写的⼀个监听函数，后续操作数据库的部分暂且不议。1、怎样⽤纯js判断滚动条是否到底部？js控制滚动条先了解⼏个关键词：（1）滚动条到顶部的位置：scrollTop（2）当前窗⼝内容可视区：wind...
js滚动条滚动到底部触发事件
js滚动条滚动到底部触发事件⼀、前⾔ 在开发项⽬时，常常需要展⽰⼤量数据。如果全部显⽰出来，数据相对少时，看不出来什么不同，如果数据很多时，⼀次请求全部显⽰，这就相当可怕了。 ⾯对这种问题，PC⾥使⽤了分页效果，将数据分成⼀页页，换页时请求当前页数据， ⽽屏幕较⼩的移动端，分页就不怎么好看了，常⽤的⽅法是滚动到底部时继续加载数据 滚动加载其实也是⼀种...
移动端无限滚动加载js实现原理
移动端⽆限滚动加载js实现原理由于⽹页的执⾏都是单线程的，在JS执⾏的过程中，页⾯会呈现阻塞状态。因此，如果JS处理的数据量过⼤，过程复杂，可能会造成页⾯的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要⽤户⼿动点击下⼀页，才能看到更多的内容。有很多⽹站使⽤⽆限分页的模式，即⽹页视窗到达内容底部就⾃动加载下⼀部分的内容...实现⽆限分页的过程⼤致如下：1 视窗滚动到底部；2 触发加载...
uni-app简单版自定义tabbar
uni-app简单版⾃定义tabbar最近在⽤uni-app，因为功能需要只能采⽤⾃定义tabbar，插件市场了很多都不符合⾃⼰的要求，只能⾃⼰简单开发⼀版了编写组件在components⽂件夹下新增tabbar.vue<template><view><view class="tabbar-box" ><view class="tabbar-list-b...
laravel反序列化(CVE-2019-9081)
加载过程⾸先是类AliasLoadder中load()的调⽤，使⽤Laravel框架所带有的Facade功能去尝试加载我们payload中所需要的类。⾸先提供所要加载的类是不是其中包含Facades，如果是则通过loadFacade()进⾏加载通过load()没有加载成功，调⽤loadclass()进⾏加载，loadclass()中通过调⽤findfile()尝试通过Laravel中的compos...
微前端single-spa原理学习
微前端single-spa原理学习前⾔ 看这篇⽂章之前先要了解微前端概念，single-spa如何使⽤。 这篇⽂章主要分析single-spa原理。然后分析完之后，作者说说⾃⼰对于同时都是微前端框架qiankun和single-spa的关系的⼀些理解，因为在我学习刚开始微前端的时候，我其实不太明⽩都是微前端框架qiankun和single-spa有什么区别，它们是什么关系，...
3.Config核心功能和原理
image.pngnfig Ser ver实现原理分析经过前⾯⼏个组件的源码阅读锻炼，相信同学们读起Config来已经不在话下了，作为配置中⼼的服务端，拉取参数三步⾛：⾃动装配：秉承了Spring Cloud的⼀贯传统，⼀段故事从⼀个注解开始。我们只要在启动类上放个@EnableConfigServer注解就可以了，Config内部再通过@Import注解引⼊其他配置类，完成⾃动装配（具体承担⾃动...
JavaScript中一个方法同时发送两个ajax请求问题
JavaScript中⼀个⽅法同时发送两个ajax请求问题今天在做项⽬中遇到⼀个问题，⼤概是在⼀个jsp页⾯同时有⼀个select下拉搜索条件框和⼀个Bootstrap表格展⽰列表。这两个都要通过ajax 向后台拿数据，⽽且要在页⾯加载时完成。当时的做法是：$(function() {// 加载下拉菜单selectMenu();/** 加载页⾯表格 */var url = 'xxxx.do';va...
treegrid树形表格的完美运用
treegrid树形表格的完美运⽤⼀问题描述:树形表格TreeGrid在⽇常项⽬中还是运⽤的⽐较多的，哪我们在项⽬中，应该怎么引⼊和使⽤TreeGrid呢?⼆使⽤步骤1.⾸先我们需要在项⽬中，引⼊TreeGrid组件需要引⼊的⽂件<!-- 引⼊treegrid--><link rel="stylesheet" th:href="@{/static/js/plugins/boots...
sweetalert 例子
题目：深入了解sweetalert的使用方法及实际应用一、sweetalert的概述sweetalert是一个用于替代浏览器自带弹窗的JavaScript插件，它具有美观、可定制、响应式的特点，广泛应用于网页开发中的提示消息、警告框和确认对话框等场景。sweetalert采用流行的模态框设计，让用户交互体验更加友好，同时也提供了丰富的API和定制化选项，使得开发者可以根据项目需要自由定制弹窗样式和...
SpringBoot的l不生效问题及解决
SpringBoot的l不⽣效问题及解决⽬录l没有⽣效这⾥配置了l不⽣效,⽆法优先于l⽂件加载问题描述l没有⽣效这⾥配置了<packaging>pom</packaging>造成的，删除问题解决~l不⽣效,⽆法优先于...
