JS行为代码，实现结构、样式和行为的相分离，降低模块间的耦合度 2.1.5 合理控制JS文件的引入位置，提升网站的加载速度 2.1.6 根据具体情况合并CSS、JS文件，降低服务器请求次数 2.2 标签选用与书写规范...4.3.4 可以通过事件委托，减少页面中类似事件的数量。 4.3.5 在删除dom节点之前，需要先移除掉该节点上的事件。...5 图像方面 5.1 使用背景图合并技术，将多张背景图合并到一张图片上，从而降低页面与服务器之间的请求次数。...具体设置方法此处不讲解了，可以参见文章《网络字体@font-face 如何处理网页中的特殊字体》。 5.4 合理使用图片预加载和图片懒加载。...6 上线准备 6.1 在上线之前对html、css、js文件进行压缩。 6.2 增加网页图标 ico文件，具体增加方法此处也不讲解了，可详见《设置网页地址栏前面的标志图标》。
前言 √灵活运用CSS开发技巧 请戳这里，持续更新 √灵活运用JS开发技巧 请戳这里，持续更新 何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。...代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。...因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录 既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。...CodePen进行保存，点击在线演示即可查看 兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用 以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是...在线演示 使用object-fit规定图像尺寸 要点：通过object-fit使图像脱离background-size的约束，使用来标记图像背景尺寸 场景：图片尺寸自适应 兼容：object-fit 代码
CSS高级技巧 目标 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航栏案例...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。 ?...这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。...给盒子指定小背景图片时， 背景定位基本都是 负值。 5.4 制作精灵图(了解) CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。...（最核心的技术就是定位） 这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。...滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多...最常见于各种导航栏的滑动门。 http://weixin.qq.com/ 核心技术 核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一、效果展示 二、项目结构图以及用到的模块 三、主要功能 1、下拉刷新上啦加载更多（mescroll.js） 2、点赞评论 3、导航背景透明渐变效果 4、图像预览（UIPhotoViewer）...5、图像压缩 6、定位附近地点（aMap） 7、图像批量上传 四、功能点详解 1、下拉刷新和上拉加载我用的是 mescroll.js (自带图像懒加载，官方网站有详细使用说明文档) 实现的思路是自定义下啦样式...，当下拉的时候图像不停旋转同时向下移动,几秒后向上移动消失在顶部。...3、导航背景透明渐变效果 实现的思路是结合 mescroll.js 滚动监听滚动区域距离顶部的高度该表导航栏背景和文字以及状态栏的文字颜色 具体代码如下 css({ "color": "#000" }); hui(".nav-title").html('朋友圈'); } 4、图像预览（UIPhotoViewer） photoswipe.js
---- Coverage:发现未使用的JS和CSS Chrome DevTools中的"Coverage"选项卡可以帮助我们找到「未使用的JavaScript和CSS代码」。...简单来说，「FCP就是用户可以看到页面的某个部分发生变化的时刻」。通常，这表现为页眉栏或背景图片。...在页面加载中，有时候加载的资源「远远多于」，我们想要的。 尤其，像CSS/JS这种渲染阻塞资源，同时它的加载优先级又很高。在页面渲染中，无疑会增加渲染时间。...所以，我们应该删除任何旧的或未使用的代码，以使其在每次请求您的网站时不被加载。Chrome DevTools[24]可以在“Coverage”选项卡下显示我们的CSS中正在加载但未使用的部分。...例如，「背景颜色」的更改（而不是背景图像的加载）并不具有内容。用户无法将其作为内容进行消费。 ❝FP可能与FCP完全相同，也可能完全不同。❞ 后记 「分享是一种态度」。
-- 为了整体页面夜色统一，试过使用默认图片建议修改顶部导航条背景色，主题配置，自定义css添加如下代码： CSS body.chunjie_bg #top-header {background-color...是的，因为之前有人反馈不想用分类的第一篇文章图片作为背景，不好看，所以这次修成了自定义背景，但是背景一般图片较大，如果都是本地加载，“水流”很小的情况下会出现图片加载缓存的问题，所以这里采用的CDN接口形式...--、修改和优化网站侧栏部分调用数据，侧栏留言评论生成缓存方式改为（审核成功和删除评论），如果你发现侧栏的留言评论没有及时更新，请随意点击评论加入审核，在通过审核，或者任意删除一垃圾评论即可更新。...--.修复，侧栏赏析，原赏析是在模块管理中修改，每次更新主题都会恢复默认，这么修复这个BUG，需要重新启用主题，然后在外观设置，侧栏赏析中填写，默认格式为： Markup 赏析 苏轼·惠崇春江晚景二首...可自定义css： 在使用主题的过程中，我们可能会不喜欢某一些，需要简单修改一下，但是修改css的话下次更新还是会被覆盖，这就尴尬了，所以这个主题在后台添加了一个自定义css的接口，有修改的话，直接开启，
，在custom.css中写入字体样式API 为了便于预览，我们可以试试直接在页面按F12，然后在控制台中进行调试。...collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为hidden。...important; } 侧栏按钮缩进 含Aplayer全局吸底音乐标签伸缩实例 点击查看侧栏按钮缩进教程 在魔改过程中应该会遇到想要让一个按钮变成侧栏伸缩的形式，不需要它时就所在侧栏里，需要时才弹出...此处以给网页头图和网页背景添加图片渐变模糊为例，在中添加 考虑到还有部分读者的需求是指定页面，可以在对应文章或者page的markdown文件里写css代码： 鼠标指针样式替换 点击查看鼠标指针样式替换...在目录下新建， 在的配置项添加引入,此处因为这是个独立的js，而且体量极小，所以可以添加异步加载标签： TO DO 魔改样式引入方案 字体样式修改 版块显隐修改 透明度修改 侧栏按钮缩进方案 夜间模式或阅读模式修改
主题自带两个侧栏模块，分别是热门和热评侧栏，设置在主题配置，全局配置中设置热门时间及调用文章数量。 主题首页带有两个CMS模块，可根据类型自行选择是否开启，主题设置，全局设置，首页CMS模块设置。...-- 修复在不同移动端下部分页面出现错位的问题。 -- 优化og富媒体标签代码，完善摘要关键词调用方案。 -- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。...-- 新增侧栏倒计时功能，更新后点击启用主题（必要步骤），模块管理，拖拽“似水流年”模块到对应侧栏即可。 -- 删除主题设置中显示真实IP地址功能，后期使用插件来实现。...V 2.2.6（22/04/24） -- 优化侧栏评论成功、删除及审核通过后自动编译处理的问题。 -- 优化文章页图片灯箱插件，改用更为精简的js代码，提高网站效率。...但是也有缺点，就是在搜索快照下显示占位图片，不显示文章缩略图，因为快照下不会加载js，所以只能显示占位图片。
spry灵活布局 10.用CSS修饰美化网页 11.用模板和库（提高网页制作效率） 12.用表单创建交互式网页 13.使用行为和js代码 14.网站页面布局设计与色彩搭配的讲解 0.首先一点答疑 用dreamweaver...在站点地图中添加、修改、删除文件间链接关系。 5.DW文本网页的设计 5.1确定网页页面的属性 5.1.1如何写入连续多个空格？...spry菜单栏） Spry框架支持一组标准html、CSS、JavaScript编写可重用构件， 设置构件样式： 9.4.1.使用Spry菜单栏：一组可导航的菜单按钮 9.4.2....使用Spry选项卡式面板：显示或隐藏存储在选项卡式面板中内容 9.4.3.使用Spry折叠式 9.4.4.使用Spry折叠面板（只针对一个导航项） 9.5利用APDiv制作网页下拉菜单... 10.2使用CSS样式 10.2.1.CSS样式控制面板（新建CSS规则（以上图）、编辑样式、删除CSS规则、附加样式表） 10.2.2样式的类型与创建 第3.4
合并CSS以减少请求次数 以下内容仅针对butterfly主题。其他主题可以理解原理后进行操作。实际上就是使用@import引入自定义样式。以下内容在Hexo异步加载方案中亦有提及。...很多第三方魔改方案中都有涉及侧边栏改造的部分，当我们有一天想要暂时关闭一个侧栏，那么直接修改card_XXXX.enable的值为false，这么做确实可以不加载侧边栏结构了，但是CSS依然是引入的。...css使用@import '[path]/*.css'引入，而styl则是使用@import '[path]/*'引入 调整第三方JS加载位置 推荐阅读前置教程： Hexo异步加载方案 基于Butterfly...的Pjax适配方案 在魔改过程中，不可避免的要加载诸多的第三方js，为了加快页面编译速度，可以用异步加载以减少HTML阻塞，也可以将多个js文件合并成一个以减少请求次数。...例如我在主页面放置了card_artitalk侧栏说说插件，而artitalkkey.js是在inject配置项中全局引入，那么，当我切换到文章页后，card_artitalk的HTML结构不再出现，但是
，但是这款主题跟以往都有所不同，除了顶部的智能跟随导航和侧栏的热评文章采用之前模块，其他均是新样式新风格，奥，对了，评论也是之前的，我认为一个好的方案在没有更完美的前提下，为什么不继续使用呢，你说呢？...-- 新增图片延迟异步加载代码，开启后可以实现，图片异步加载，需要设置一张占位图片，未加载的时候显示占位图片，滚动条下拉时才逐渐显示文章缩略图，但是在搜索引擎的快照下，不会显示文章缩略图而是占位图，按需开启...2020/08/25 - 修复新用户启用主题后配置内容为空的BUG。 2020/08/15 - 优化分类列表间距。 - 优化删除侧栏标题右侧背景图。...6.优化侧栏文字标题蓝色线条。 7.js、css代码精简优化移动端。 2020/01/20 1.修复标签和用户模板无法打开的BUG。 2.添加春节皮肤特效，主题管理，功能开关，开启春节皮肤即可。...其中模块管理中的最新发表、热评文章和标签列表采用缓存形式，在新建文章和编辑文章还有删除文章的操作下会自动更新其内容，启用主题，需要编辑任意一篇文章以此来生成缓存文件，否则侧栏内容不会显示。
为什么： 删除所有不必要的空格、注释和中断行将减少 HTML 的大小，加快网站的页面加载时间，并显著减少用户的下载时间。 2、删除不必要的注释： 确保从您的网页中删除注释。...为什么： 类型属性不是必需的，因为 HTML5 把 text/css 和 text/javascript 作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。...5、删除不用的 CSS： 删除未使用的 CSS 选择器。 为什么： 删除未使用的 CSS 选择器可以减小文件的大小，提高资源的加载速度。...JavaScript 1、JS 压缩： 所有 JavaScript 文件都要被压缩，生产环境中删除注释、空格和空行（在 HTTP/2 仍然有效果）。...避免使用 Base64 图像： 你可以将微小图像转换为 base64，但实际上并不是最佳实践。 5、懒加载： 图像懒加载（始终提供 noscript 作为后备方案）。
） 具有通过该url()函数加载的背景图像的元素（与CSS 渐变相反） 包含文本节点或其他内联级文本元素子级的块级元素。...预加载关键资源 在某些情况下，浏览器可能不会优先加载影响 LCP 的视觉上重要的资源。例如，折叠上方的横幅图像可以指定为 CSS 文件中的背景图像。...您的用户可以在几毫秒内从靠近他们位置的 CDN 节点获取内容。 您应该将同样的内容扩展到您网站上的其他内容。为您的静态内容（如 JS、CSS 和字体文件）使用 CDN 将显着加快它们的加载时间。...SVG、JSON、API 响应、JS 和 CSS 文件以及主页的 HTML 是使用这些算法进行压缩的理想选择。这种压缩显着减少了在页面加载时下载的数据量，从而降低了 LCP。 4....缩小和压缩内容 在将 CSS 和 JS 文件加载到浏览器之前，您应该始终对其进行缩小。CSS 和 JS 文件包含空格以使它们清晰易读，但它们对于代码执行来说是不必要的。
主题自带三个侧栏模块，分别是热门、热评和随机显示侧栏，设置在主题配置，全局配置中设置热门时间及调用文章数量。...-- 优化页面代码，优先调用自定义css接口的顺序问题。 -- 优化后台主题设置相关PHP代码，删除无用函数信息。 -- 优化导航栏与页面布局宽度保持一致。...-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。...-- 新增侧栏倒计时功能，更新后点击启用主题（必要步骤），模块管理，拖拽“似水流年”模块到对应侧栏即可。 -- 删除主题设置中显示真实IP地址功能，后期使用插件来实现。...1.2.8（21/11/23） -- 优化php函数代码，分离侧栏及单页模板代码。 -- 优化部分css在浏览器的兼容性，修复部分情况下侧栏及列表背景色失效的问题。
三、不要使用图像来表示文本 使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。...这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。...这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。...十二、将 CSS 图像映射用于装饰功能 使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。...外部JS会阻塞所有内容的呈现 嵌入式的JS会阻止其后内容的显示 当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况
使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面。 Console（控制台面板） 使用控制台面板 命令行交互 记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。...在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。详细可以看console控制台的使用指南。...使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。...查看网页的本地修改历史 点击Styles面板中修改过属性的文件名，会跳转到Source面板 在文件位置右击选择Local modifications,可以查看本地的所有修改记录 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容...DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
-- 修复在不同移动端下部分页面出现错位的问题。 -- 优化og富媒体标签代码，完善摘要关键词调用方案。 -- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。...-- 优化移动端侧栏菜单显示效果。 -- 优化用户体验，提高页面加载速度。 -- 修复主题设置右侧设置说明及css样式表网址错误的问题。...V 2.6.3 （22/08/10） -- 新增页面繁体简体转换功能，主题设置，功能设置中开启。 -- 优化页面登录背景色。 -- 优化评论区头像代码。...-- 优化文章页图片灯箱插件，改用更为精简的js代码，提高网站效率。 -- 优化页面头部整体代码，减少无用js和css样式代码。...-- 新增移动端侧栏展示开关，在手机端可开启侧栏展示。 -- 删除本地测试模板，后续新增。 V 2.5.7（22/02/21） -- 优化首页轮播使用视频的兼容代码，优化自适应显示效果。
对于css命名的规范，尽量使用class选择器进行样式的定义，类命名时取父元素的class名作为前缀，使用-符号进行连接。类名与样式之间以空格进行分割。...优化前端效果，可以删除多余容器元素，让代码层次少，避免使用table进行页面的布局，换成用div+css的样式布局。 css代码优化，在各个浏览器中，相同元素解析的结果不同，就需要手动重置一些样式。...，描述规定背景图片是否固定或者随着页面的其余部分滚动 background-image，描述规定要使用的背景图像 background-position属性 top，left，center，right，...图片懒加载，使用jquery.lazyload.js，该js是一个基于Jquery的懒加载插件，里面封装了懒加载用到的方法以及实现，第二种是echo.js，它是一款非常简单实用轻量级的图片延时加载插件。...箭头函数中的this ? 函数的扩展 ? ? 对象的扩展 在es6中允许向对象直接写入变量和函数，作为对象的属性和方法。
Js+CSS无加密，购买后可二次开发（因二次开发而导致的网站错版，无法打开等问题均不在售后范围之内，可有偿提供技术支持！）。 7.模板采用图片延迟加载技术、视觉滚动等相关特效。...附上去年背景图和背景色： Markup https://s2.ax1x.com/2020/01/06/lsAWl9.jpg #ffcf35 V、修改了背景雪花特效，优化了许多细节，js本地调用不在使用...---、优化列表底部翻页JS代码，不会出现未加载时导致错位的BUG。 ---、优化部分php及js代码，删除冗余代码，提升网站打开速度。...--、缓存侧栏部分调用数据，减少数据库的请求次数（相对来说有一丢丢作用的还是） --、分离相关JS代码，功能特效使用独立的js来完成，不开启则没有相关js代码。...问得好，有点水平，但是可能要让你失望了，我的答案是不会，别问为什么。好了，问题就说这些，在使用过程中遇到问题可以直接QQ留言给我。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
对象存储
云直播
