对于 MySQL 慢 SQL 的分析 在之前的文章，我提到过 SQL 调优一般通过下面三个工具： EXPLAIN：这个是比较浅显的分析，并不会真正执行 SQL，分析出来的可能不够准确详细。...这里再说一下在不同的 MySQL 版本， EXPLAIN 和 OPTIMIZER TRACE 结果可能不同，这是 MySQL 本身设计上的不足导致的，EXPLAIN 更贴近最后的执行结果，OPTIMIZER...但是不能直观的看出来为啥会走错索引，需要通过 OPTIMIZER TRACE 进行进一步定位。但是在进一步定位之前，我想先说一下 MySQL 的 InnoDB 查询优化器数据配置。...这也引出了一个新的可能大家也会遇到的问题，我在原有索引的基础上，加了一个复合索引（举个例子就是原来只有 idx_user_id，后来加了 idx_user_status_pay），那么原来的只按照 user_id...所以最好一开始就能估计出大表的量级，但是这个很难。 结论和建议 综上所述，我建议线上对于数据量比较大的表，最好能提前通过分库分表控制每个表的数据量，但是业务增长与产品需求都是不断在迭代并且变复杂的。
我观察了几个网站，发现他们的做法是直接用了@2x的图片，这种做法在普通屏幕上图片的一些细节会丢失。那么有没有什么办法可以兼顾普通屏幕和高分屏呢？...本文只粗略的讲一下HIDPI，想更进一步了解的开发者请移步：谈谈 HiDPI —— 是什么，为什么，怎么做 解决方案 在web端我们要显示一个图片有两种方式：img标签、background-image...image-20220720220139981 我的设备像素比是2，因此我把图片的尺寸扩大2倍，显示出来的效果就是正常的。...属性 css的background-image属性也可以用来显示一张图片，它提供了image-set()方法，会根据当前屏幕的设备像素比，自动选择要加载的图片。...我是神奇的程序员，一位前端开发工程师。 如果你对我感兴趣，请移步我的个人网站，进一步了解。
元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...实际上 本质就是定位，哪一个大图，如何通过定位的形式把，大图里包含的小图定位到想要的位置 出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。...我们需要使用CSS的 background-image、 background-repeat background-position属性进行背景定位， 其中最关键的是使用background-position
网站上的文章，你应该也了解到标准是 由符合标准的XHTML组成；用CSS来布局而不是表格；使用结构化、语义化的标记；能够在任何浏览器中显示 最后二点被大多数学习标准的朋友所忽略，结果就是现在很多用...意思很明显，内容图片就是用于内容中的图片，可使用img标签加入，注意要加alt属性；而背景图片就是用于装饰页面的图片，使用CSS的background-image属性加入。...这个阶段是很无奈的，为什么呢？在IE中打开刚刚制作的页面就清楚了，也许你已经看到，整个页面的布局乱了。因为浏览器对CSS样式的兼容问题，使到我们现在还要做这一步。...这时就得出动多个浏览器啦，最基本的IE5/IE5.5/IE6/FF，目前我就只有这几个版本的浏览器，应该也已经足够了吧。...因为是在FF中做的页面，所以现在主要要解决页面在IE中的显示问题，在我BLOG上可以找到相关的一些资料，主要是使用hack，但hack不是标准，所以使用hack有可能会通不过W3C的代码验证。
元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...文字用省略号替代超出的部分*/ text-overflow: ellipsis; 5. CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 ?...图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...pink老师告诉你我们为什么需要精灵技术： 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。 出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。...我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size
屏幕上一张清晰的图片 肉眼在屏幕上看到图片的清晰度由三个因素决定，一是图片像素本身是否精细，二是屏幕分辨率，三是屏幕大小。...在标准情况下一个CSS像素对应一个设备像素。...在普通密度桌面显示屏的电脑上打开，没有什么问题，但假设在手机/或者Retina屏幕的Mac，按照逻辑分辨率来渲染，他们的devicePixelRatio=2，那么就相当于拿4个物理像素来描绘1个电子像素...不是，一般情况下，不需要针对网站上的所有图片都提供两个版本（非Retina屏幕和Retina屏幕），大部分图片缩放并不会太多的影响用户的体验。...常常需要被处理的图片有：网站的logo、彩色图片图标，因为他们的图像大小都偏小，在Retina上物理像素放两倍显示就会出现模糊情况，这个时候，你就需要通过媒体查询或者JS操作来替换图片。
在dom里图像与在css里的图像写法如下面的例子 background-image...source为浏览器提供了要显示图像的供选版本。 适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo 查看文章 三是我们最终选择的底层无感知换色的方案，把修改颜色的脚本集成到了我们的工作流里，我们在写css的时候，遇到svg需要换色的地方，...我的导师 wenju 之前发过这个计算公式相关的文章： 百分比值（）是背景图相对于背景定位区（background positioning area）的百分比，可以控制在容器元素内仅显示Sprites图的部分内容...对于css里的SVG 的应用与回退策略，比较简单，也已经成熟，一般情况下都是这种用法 background-image: url(fallback.png); background-image: url
碎碎念 在过去，我的Alist一直作为本地服务运行，它承载着我托管各种杂七杂八的网盘的重任，比如收集文件用的坚果云，存放资源的蓝奏云，放课程视频的百度云。最近我才意识到，这个好像可以在服务器上部署！...因此，我决定将我的Alist部署到服务器上，这不仅提升了访问的便捷性，也让我的服务更加稳定可靠，我也会在上面分享一些我的代码文件，但是因为带宽原因，我不会放大于10MB的文件，防止给大家带来不好的体验。...近期日程繁忙，但我仍然热衷于探索和折腾我的技术爱好。就在不久前，我将一张我非常喜欢的头像添加到了我的网站主页上，希望它能成为我站点的一个亮点。不过，由于缓存的原因，新头像可能不会正常显示。...安装教程 由于我使用的是宝塔面板，所以安装起来非常简单，首先在宝塔中建立网站，域名填写自己想要绑定的域名，根目录自己设定，比如这里我设置为/www/wwwroot/alist，PHP版本选择纯静态，其他为默认即可...文件预览设置 在“预览”设置中，您可以指定哪些类型的文件可以直接在网页上显示内容。例如，如果您希望分享源码文件，可以在设置中添加对.css文件的支持。
根据httparchive.org的页面重量报告，CSS在平均70个请求和2MB的网页上占7个HTTP请求和70Kb的代码。...这并不是网站性能糟糕的最坏原因（我正看着你呢，JavaScript），但CSS面临着特定的挑战： CSS会阻止渲染：每个 and @import halts other downloads...[Pingdom网站速度测试：https://tools.pingdom.com/ 2.快速间接改进CSS 您可以在不接触任何代码的情况下进行性能改进： 迁移到更好、更快的Web主机或考虑使用内容交付网络...5.删除CSS攻击和回退 旧的代码库可能有一系列笨拙的IE黑客和后备，试图修复布局问题或启用现代CSS属性。该应用程序的最后一个版本是在十年前发布的，现在已不再受支持。是时候删除代码了。...Web开放字体格式2.0（WOFF2）是您唯一需要的文件版本。所有现代浏览器都支持这种字体，IE用户可以回到OS字体。 您还应该在CSS中定义适当的字体显示加载选项。
在dom里图像与在css里的图像写法如下面的例子 background-image...source为浏览器提供了要显示图像的供选版本。 适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo 可以在isux公众号查阅《带你轻松打开SVG滤镜的大门》 三是我们最终选择的底层无感知换色的方案，把修改颜色的脚本集成到了我们的工作流里，我们在写...css的时候，遇到svg需要换色的地方，只需要 background-image: url(test.svg?...对于css里的SVG 的应用与回退策略，比较简单，也已经成熟，一般情况下都是这种用法 background-image: url(fallback.png); background-image: url
在dom里图像与在css里的图像写法如下面的例子 background-image...source为浏览器提供了要显示图像的供选版本。 适用场景为：在一个精确特定的转效点（breakpoint）需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。...关于滤镜换色的详细说明在我上一篇文章里有详细介绍以及demo 查看文章 三是我们最终选择的底层无感知换色的方案，把修改颜色的脚本集成到了我们的工作流里，我们在写css的时候，遇到svg需要换色的地方，只需要...我的导师 wenju 之前发过这个计算公式相关的文章： 百分比值（）是背景图相对于背景定位区（background positioning area）的百分比，可以控制在容器元素内仅显示Sprites图的部分内容...对于css里的SVG 的应用与回退策略，比较简单，也已经成熟，一般情况下都是这种用法 background-image: url(fallback.png); background-image: url
在知乎上看到了一个提问，大概意思是使用xpath为什么无法获取到租房价格信息。问题的链接在这里： 问题地址 看到问题，我也以为很好解决，想着很快写完答案就结束了。...接着看下CSS部分，如下： body.ratio2 .price span.num { background-size: auto 30px; background-image: url...那么有该图，价格怎么显示？这就是html中内嵌的css起作用了。...随机顺序 但是，我要非常可以可惜的是一句，没这么简单，雪碧图每次都是随机生成的，所以只有网站知道每个position对应的数字是多少，而我们却无法得知。 那么，没有办法解决了吗？...总结 简单来说，其实就是把价格上每个数字转化图片展示。而其中用的一个重要技术就是雪碧图。通过这种方式就可以把具体的文字转化为相应的css，类似于某种加密效果。最终就实现了反爬。
,而其大部分时间则花在各种页面元素, 如图像、 样式表、 脚本和 Flash 等的下载上 减少页面元素：简化页面设计 image：使用精灵图，配合 background-image 和 background-position...: gzip Gzip 是目前最流行及有效的压缩方法 如果是Apache,在 1.3 版本下需 使用 mod_gzip 模块,而在 2.x 版本下,则需使用mod_deflate Web server...因此如果您把图像文件分布到多台机器的话,就可以达到超过2个的并行下载 但是当脚本文件下载时,浏览器不会启动其他的并行下载,甚至其他主机的下载也不启动 所以直接将脚本放在底部 8 避免 CSS 表达式...前端开发的理解，也总结出一些优化原则，也可能与上面的有些重复，但可能会更好理解一些 17 我的优化原则 17.1 HTML 避免使用table，因为table要等其中内容完全下载之后才显示，显然是比div...icon字体图标 尽量用css3代替， 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等 优化图片格式为常用格式 精灵图 用CSS或JavaScript实现预加载 在保证最不失真的情况下尽可能压缩图像文件的大小
width:20px;height:20px; 可以通过如上CSS代码显示一张大图片中的某个位置 2：合并脚本和样式表 一个页面应该使用不多于一个的脚本和样式文件 但是用什么样的办法才能使一个大型网站达到这个要求...我的想法：前端开发人员可以尽可能的按自己的架构和思路开发JS和CSS文件 最后发布代码的时候通过工具把这些文件进行合并（目前暂时没有发现类似的工具，不过开发一个不难） 二：为静态文件建立不同的域...以上两种头可以同时使用， 第二中是HTTP1.1中引入的 如下是在IIS下给指定目录添加HTTP头的方法 在IIS中选中某个网站下的一个目录，点属性，HTTP头，添加即可。...（在IIS上启用Gzip压缩比较麻烦，以后有机会应开发一个工具。） Gzip压缩耗费了CPU的执行时间而减少了网络传输流量，有得必有失。...如果压缩动态文件（PHP，asp，aspx）就不需要了，因为它的页面是每次都动态生成的，压缩完就放弃。然后在IIS管理器中，“网站”上面右键－属性，不是下面的某个站点，而是整个网站。
CSS渐变背景看这一篇就够了 在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。...CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩，看能玩出什么花来。...background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....); 方向： 在关键字 to 后面加上 top、bottom、right、left...上面的例子是把中心点设置在元素的距离左上角（60% 55%）。并以 以离渐变中心点最远的顶角计算圆的半径。...如果有好看的渐变效果，麻烦评论区打出来。让我看看各位大佬的色彩搭配效果。让我欣赏欣赏。 渐变颜色 CoolHue 2.0 uigradients 这几个网站是我常用的色彩渐变的网站。
然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。...当你在阅读时，很可能你也觉得这是个令人烦恼的难题。这就是为什么我花时间为你消除这个障碍，并精心准备了一个装有加载指示器的库，让你可以在你的梦想项目中“即插即用”。...您只需让浏览器知道，您的网站可以在系统的深色/浅色模式下正确显示。..."; } 12.表单验证视觉提示 仅使用CSS，您就可以向用户显示有关表单输入有效性的视觉提示。...我们可以在表单元素上使用 :valid 和 :invalid CSS伪类，当其内容验证成功或失败时，应用适当的样式。 请考虑以下HTML页面结构： <!
前端开发 前端花了我最长的时间。一方面我是个后端工程师，前端属于半路出家，另一方面，小程序上也有一些坑。当然，最主要的是一直在调整界面效果，这里花了大量时间。...在此，我就主要讲一讲我在开发中遇到的坑： 3.1 background-image 属性 在写式神详情页的时候两个地方需要用到 background-image 属性设置背景图。...开发者工具中，一切显示正常，但一到真机调试就没有办法显示。 最后发现：小程序的 background-image 在真机不支持引用本地资源。解决方案有两种： 使用网络图片。...它的好处在于可以减少请求图片的次数；而缺点是会令 CSS 文件膨胀，代码也会显得不那么整洁了。 我最后选择了第二种方式，因为我觉得 WXSS 体积所增大的部分，是在可接受范围内的。...爬取图片资源 式神的图标及形象图基本上阴阳师官网都有，自己做也不现实，所以果断写爬虫爬下来然后存到自己的 CDN 上。 所有图片都可以在官方网站上找到。
3.4 关于屏幕 这里多说两句 Retina屏幕，因为我在很多文章中看到对 Retina屏幕的误解。 Retina屏幕只是苹果提出的一个营销术语： 在普通的使用距离下，人的肉眼无法分辨单个的像素点。...为什么强调 普通的使用距离下呢？...布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口( ideal viewport)就诞生了：网站页面在移动端展示的理想大小。...这时，1个 CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。...iOS的版本中生效， env在 iOS>=11.2的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内： body { padding-bottom: constant(safe-area-inset-bottom
这里的诀窍是，我设置了一个头（基本上与HTTP头中的Link:css>；REL=style sheet没什么不同）， 而带有跨站点脚本向量的远程样式表正在运行...我认为讽刺的是，Netscape认为Gecko更安全，因此对绝大多数网站来说都很脆弱。...JavaScript的本地托管XML: 这与上面的相同，但引用的是包含跨站点脚本向量的本地托管（必须位于同一服务器上）XML文件。..." SRC="httx://xss.rocks/xss.js"> 用于在允许“”但不允许“的站点上 通过regex过滤器...它作为参考托管在https://1337.yehg.net/CAL9000/上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
