首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

代码,然后还有未截图到主题自带的样式文件,还有其他的静态文件,非常多,看起来头疼。...一键合并 JS 和 CSS 文件 有没有什么更好的方法来解决这些问题呢?有的,今天推出的 WPJAM「静态文件」插件就是要专门来解决这个问题的。...如果已经安装了 WPJAM 「静态文件」插件,并激活合并功能之后,我们就不需要 WordPress 原来的注册脚本和样式,而是通过 wpjam_register_static(key, args) 把静态文件注册到合并列表中...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论中的外部链接加上安全提示的中间页。...站点选项 查看和管理所有非 WordPress 系统自动生成的站点选项。 如果你觉得某个选项无用,可以直接删除它。 后台论坛 WordPress 后台论坛,支持创建帖子,分组,消息。

7.1K30

基于iframe的移动端嵌套

标签的锚点失效 5.当我点击a加载了a的iframe页面,在切换到b,这个时候b页面字体莫名的变大 6.导航栏有个样式要求,active的时候icon是为红色的icon,其他状态下则为灰色的。...其中的一个需求为返回的时候从哪里点出去返回到哪里 7.某个安卓机后返回无法重新加载iframe 解决 声明嵌入的iframe页面其中4个都是内部项目,同源的,所以大部分处理的问题不存在跨域问题。...',function(e){ e.preventDefault(); }); 2.meta元素的ontent不一致 这个暂时没有好办法,iframe渲染的meta也是默认走的最上层的meta,所以他自己的内部...4.iframe的页面a标签的锚点失效 若iframe不涉及跨域,网上有兼容代码可以重新设置a标签,跨域解决不了,因为跨域的情况下,外部页面是无法获取到iframe下的元素的,最后这个导航做了外部跳转。...5.iframe页面切换的时候,切换后的页面样式莫名变大 之前我做页面切换,是用过不重新加载iframe,而是直接修改了iframe的url,但是好像在这种情况下,可能之前上一个页面加载的css没有完全清除掉

3.7K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    网页加速特技之 AMP

    它还负责页面的性能优化,例如在资源加载完成前对页面元素布局预处理,禁用慢的CSS选择器,对 iframe 进行沙盒处理,提供对自定义元素的支持。...为了减少JS对页面渲染的延迟,AMP不允许直接使用内联脚本,只允许异步加载JS。 AMP页面不允许直接包含任何内联JS,页面交互可在AMP组件中处理,AMP组件是经过精心设计的保证不会影响页面性能。...如果第三方JS触发多个样式重计算,iframe中也只有很少一部分DOM,重新布局不会消耗很多性能。 5.CSS必须内联,内联样式表最大50kb CSS会阻塞页面渲染,阻塞页面加载。...在AMP页面中,只允许内联样式,这会在关键渲染路径上比一般的页面减少1或多个HTTP请求。 CSS使用内联,内联样式表(inline stylesheet)最大不超过50kb。...AMP页面在进行DOM写操作之前会先读取DOM,这样能确保样式重计算时一次最精确到每一帧的样式。 8.只运行经GPU加速的动画 AMP网页上的动画只允许变形和透明度调整,从而节省重新布局页面的时间。

    4.7K82

    17个最佳WordPress画廊插件

    图片库 合理的图像网格 使用此WordPress照片库创建引人注目的叙述。 Justified Image Grid插件将您的图像组织到水平的照片网格中,以创建即时的视觉故事。...用户josephdelaubriere说: “很棒的插件,而且非常易于使用。” 画廊工厂 这个WordPress图片库是考虑到大型画廊而制作的。...使用此插件的内置灯箱主题和十个可自定义的样式预设,以及无限滚动和更多支持,构建可轻松处理数百个高分辨率图像的响应式画廊。...网格 网格是一个WordPress画廊插件,允许您在完全可自定义的网格系统中显示任何帖子类型(例如标准,音频,视频,社交流,画廊,链接或报价)。...借助功能强大的管理面板,此网格库的功能是无限的。 在这个完全响应式的插件中,通过轻量级的jQuery脚本优化了加载速度,并且自定义缓存系统可提高画廊的性能。

    8.3K31

    网站建设(二)通用--页面刚加载时的loading效果

    撇开如何优化加载资源不谈,在页面加载时,不论是有过多的加载资源,还是有一些提前处理逻辑。这一过程可能不希望用户看到,显示一个友好的loading会比较好一点。...当页面处理完毕后,再将loading移除。 要想实现这个效果,首先要明白一个网页从加载(loading效果出现),到完全加载完成(loading效果消失)的整个过程。也就是何时出现,何时消失。...当然不对的啦,感兴趣的可以试验一下。这时候的body还没有渲染,没办法获得到网页中的任何元素,load效果无法出现。 也就是说需要渲染完页面元素以后,显示loading才是正确的选择。...所以引用外部的script,抑或所有的ajax,尽量写到body最后,在加载这些资源前,设置出现loading。...具体网页示例 http://demo.wpcom.cn/preview/justnews 这个网站的处理方式是这样的: 1)所有的页面元素全部放在 id=iframe 的 iframe 中(除了loading

    2.2K20

    WordPress 初学者词汇表(术语解释)

    这是区分内容的一种简单方法,并且您的主题通常会根据其目的设置帖子类型的样式。...使用相同的示例,可以对帖子类型进行样式设置,以便博客具有特色图像然后是文本,员工可能包括图像和社交链接,并且投资组合可能只显示图像集合(注意 – 这些只是演示如何发布的示例类型通常有不同的样式,这并不是说每个博客...slug是 URL 中包含帖子名称的部分。它通常只有几句话,旨在描述帖子的内容。WordPress 自动使用帖子的标题作为 slug,但您可以根据需要编辑 slug。...WordPress 拥有大量可从第三方开发人员处获得的插件,您可以在您的网站上使用这些插件(同样,免费和高级选项),从购物到图片库到联系表格以及介于两者之间的所有内容。...这些通常加载有链接和不请自来的广告,并且由于机器人程序而可以进入数百个。但幸运的是,使用反垃圾邮件插件很容易避免这种情况。

    7.2K20

    web页面性能优化总结及原理解释

    的文件合并工具,通过将很多资源放到一个文件中的处理方式进而减少http请求,优化到极致就是一个页面最好只有一个css和js文件的请求。...看情况决定使用内联样式还是外部js或者css 这个好像一直以来我们认知里面的优化方案是尽可能的使用内部样式,这样可以提高加载的速度,是的,但是这个要有一个前提条件,那就是外部文件占html文档数的比重...,如果说网站用户在每次会话中进行多次页面访问,同事页面重用了多个脚本和样式表,使用外部文件是一个比较好的选择,如果一个网站主页,因为主页对于响应时间的要求比较高,因此更加倾向内联样式,有人会问,为什么使用外部的会快呢...避免使用iframe 使用iframe可以将一个html插入到父文档中,我们列举一下他的优缺点: 优点:可以用来加载速度较慢的第三方资源,广告等,用作安全沙箱,并行下载脚本 缺点:加载代价昂贵,即使页面什么都没有...,iframe完全加载以后才会触发load时间,Safri,Chrome中可以通过js动态设置iframe src属性进而避免这个问题,缺乏语义 避免404 我们知道优化页面性能的主要方案之一就是减少

    98050

    jQuery 图片播放插件 FancyBox 和其 WordPress 插件

    FancyBox 的特性 支持图片,HTML 元素,Flash 动画,Iframe 以及 AJAX 支持。 可以自定义播放器和 CSS 样式。 可以以组的形式进行轮转播放。...如果加载了鼠标滚动插件(mouse wheel plugin),FancyBox 还支持通过鼠标滚动事件来翻阅图片。 通过 easing plugin,可以实现更花哨的轮转效果。...Fancy Gallery Fancy Gallery 整合 FancyBox 到你的 WordPress 博客中,同样,所有指向图片的链接都会自动使用 FancyBox 的方式弹出页面的上面,如果你使用...FancyBox Gallery FancyBox Gallery 把 FancyBox 这个 jQuery 插件集成到 WordPress 的 Gallery 功能中,你只需要在日志内容中试用 Gallery...Shortcode 显示缩略图,这个插件就会处理好剩下的,你会得到非常漂亮的大图弹出效果,而且还会修正大小到适合浏览器窗口。

    2.4K20

    XSS平台模块拓展 | 内附42个js脚本源码

    这个有效载荷的目的是做一个截图,并悄悄地发送到一个PHP文件(在档案中可用),将其存储到一个不错的PNG文件。...09.表单窃取 这个脚本窃取了表单中设置的所有值,并通过图像src发送出去。它改变了标签以添加onbeforeunload事件处理程序,并在用户离开页面之前处理信息泄漏。...10.端口扫描 API 一个小的portscanner代码,在加载远程资源时利用javascript引擎的行为。此代码将被集成到一个更强大的框架中。...第一个iFrame获取CSRF保护的页面,在第一个表单的“token”参数中窃取标记值,并创建第二个iFrame,并与相应的标记进行连接。...42.访问过浏览过的 创建包含指向目标网址的锚点的不可见iFrame的代码。根据元素的样式,可以知道与URL相关的页面是否先前已访问过。

    12.5K80

    优化WordPress性能的高级指南

    获取帖子(Fetching Posts) WordPress提供从数据库中获取任何类型的帖子(post)的方法。...基本上,我从数据库引擎中脱掉了一些工作,而是将其转移到PHP引擎,功能和在数据中处理的相同但在内存中,因此更快。 如何做的? 首选,我在查询中删除了post__not_in参数。...处理小信息很有用,WordPress提供的其他机制(如帖子[posts]或分类[taxonomies])过于复杂。 ?...例如,如果我们在我们的分布式服务器中托管我们的站点,我们应该使用外部缓存系统(如Memcached服务器),但是如果我们的网站驻留在单个服务器上,那么我们可以通过简单的使用文件系统实现缓存从而来节省一些钱...例如,如果我们在用户滚动我们的主页时动态加载更多的帖子,那么最好直接调用其他前端页面,这将获得被缓存的好处。 然后,我们可以通过浏览器中的JavaScript来解析结果。

    7.1K20

    WordPress星级评分插件KK Star Ratings评分插件教程

    高质量评级表明该页面的受欢迎程度,产品网页等评论插件可以帮助您从搜索引擎获得更多流量、提高会员链接点击量、将用户提交的评论添加到您的网站等等。   有没有想过在自己网页的SERP中的出现星级评分?...插件主要特点如下: kk Star Ratings的主要特点是支持Google Rich Snippets; 能够根据每个类别关闭帖子中的评级; 选择显示星级的位置(主页、帖子、档案); 该插件是开源的.../简码显示在帖子中的任何位置。...推荐:WordPress去掉分类目录网址category的四种方法 KK Star Ratings插件Appearance设置   Appearance外观设置主要设置投票前显示文本,投票后显示样式,星星的数量...Greeting text:投票前,对应星星后方的文案,自定义。 Legend:投票后,显示的星星样式,包含平均评分、投票数、星星总数、投票数。

    2.5K20

    WordPress 精品插件大全页面的开发小记

    第一步:新建一个WordPress页面 页面(Page)和文章(Post)都是WordPress的信息发布形式。官网给出的关于页面的解释: 你可以在WordPress中撰写日志(文章)或是页面。...4.0,打分人数不低于100 技术支持帖子:帖子数和解决数都不低于0 过滤的方法仍然是使用Python结合pandas,代码如下: 插件的描述信息 这样基本上就能得到了所有需要用来呈现的数据。...所以,还是用比较脏的办法,用Python把所有这300多个插件的图标文件都循环一遍,根据http的返回码判断实际用了哪个就把图标的url写死到结果文件里,如下: 到此为止,所有需要的数据都已经存入了一个...唯一的不同就是这里并没有使用到WordPress的REST API,是直接请求一个上传到WordPress里的json文件(上文提到的数据源文件),这样反而还会更简单,把数据一次性加载出来放到界面,没有什么太多和后台服务的交互...这部分细节比较多,主要就是处理数据表的样式,其实也并没有太多的技术含量,就是按照BootstrapVue官方文档一步步就可以堆出来了,文档还是非常清晰的。

    1.7K20

    前端面试题-每日练习(1)

    它允许你在一个 HTML 文档中嵌入另一个 HTML 文档。iframe 通常用于在当前页面中加载另一个页面,例如嵌入地图、视频、广告等。...使用 iframe 嵌入一个外部 HTML 文档与直接修改原始 HTML 文件有一些区别。...这意味着,在iframe内的元素样式不会受到主文档样式的影响,也不会影响到主文档的样式。直接修改原始 HTML 文件时,所有的样式都处于同一个样式表中,可能会导致样式冲突或不必要的覆盖。...src source(缩写),指向外部资源的位置,指向的内容将会应用到文档中当前标签所在位置。...; 3、浏览器解析方式不同:当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。

    15220

    wordpress怎么用AMP加速器呢

    在这种情况下,谷歌正在使AMP几乎成为许多网站的必需品。在这篇文章中,ytkah将给大家介绍谷歌的加速移动页面项目的详细信息。这包括在您的WordPress站点中调用它的步骤。     ...最重大的优化之一就是它可使来自外部资源的所有内容保持异步,让网页中的任何内容都能毫无阻碍地渲染。   ...其他性能技术还包括:将所有 iframe 沙盒化,加载资源之前对网页上每个元素的布局进行预先计算,以及禁用性能缓慢的 CSS 选择器。   ...此版本可在网页渲染时将验证错误直接记录到浏览器的控制台中,让您可以看到代码中的复杂变化可能会对性能和用户体验产生怎样的影响   wordpress怎么用AMP加速器呢?...有插件可以实现,直接在wordpress后台插件市场搜索amp关键词就有很多可以用,有些是收费,有些样式单一,如果要好看的样式还是自己写比较好,当然你也可以找ytkah定制,详情可以查看amp模板展示amp

    1.5K20

    基于drawio构建流程图编辑器

    处理所有资源文件,包括图片、样式模块,去除所有依赖路径的资源引用。...,但是由于我们目前是更希望作为npm包来引用的,处理资源路径问题又相对比较麻烦,所以在这里我们采取的方案是将所有的图片资源都处理成了Base64直接集成进去,当然在这个过程中也修改了相关代码使其不会发起请求去加载外部资源...mxCodec的decode方法上,于是我们需要在这里处理好模块这个加载函数,当然可能通过external的方式加载mxGraph模块包的方式直接挂在window上也是个可行的办法,但是在这里我们是重写了相关模块来实现的...,可以发现Sketch样式是无效的,因为现在mxGraph是不再继续维护了,所以反馈BUG是无效的,实际上这个问题处理也比较简单,我们可以通过git回溯到功能正常的版本就可以了。...,但是当我们需要将其嵌入到其他应用中的时候,由于我们的滚动容器可能就是body,此时当我们已经将页面向下滚动了一部分,之后再打开流程图编辑器的话,就会发现我们没有办法正常拖拽画布或者选中图形了,并且菜单的位置计算也出现了错误

    1.4K10

    WordPress 5.9 增强了懒加载的性能

    WordPress 在 5.5 版本实现了图片延迟加载(懒加载),然后在 5.7 版中扩展到 iframe 中,WordPress 5.9 版本又对延迟加载的实现进行了一些微调以提高性能。...因为 WordPress 之前版本是给所有的图片和 iframe 都加上 loading="lazy" 来实现的,这样页面打开之后第一屏的图片和 iframe 也被标记为懒加载,这样会导致最大内容绘制(...WordPress 希望开箱即用,所以新增一个新函数,并在函数内设置了一个计数器,以便可以跳过给页面上的第一个“内容图像或 iframe”设置懒加载。...这里解释一下“内容图像或 iframe”的意思,它指的是 WordPress 主循环中所有文章中内容中的图片和 iframe,以及文章的特色图片。...自定义 因为大多数大多数主题是使用单列布局来显示文章的,所以不懒加载第一个内容中的图片或 iframe 可以增强了页面的 LCP 性能,而对于多列布局的主题,WordPress 现在提供了新的 wp_omit_loading_attr_threshold

    74520

    在Ubuntu 18.04上安装WordPress

    注意如果您在访问域名时未显示WordPress,请尝试添加/wp-admin到URL的末尾。如果您之前在站点的主目录中创建了索引文件则有可能发生这种情况。...您现在已成功安装WordPress。 创建WordPress永久链接(可选) 永久链接是永久加链接。永久链接是为WordPress中的特定帖子或页面自动创建的URL,以便您或其他人可以访问它们。...WordPress默认将帖子号码设置为永久链接,这意味着指向特定帖子的链接为example.com/?p=42。要强制执行“更漂亮”的永久链接格式,您需要对Apache或Nginx进行一些调整。...2.鼠标悬停在屏幕左侧菜单中的设置,然后单击永久链接: [wordpress-settings-permalinks.png] 3.选择首选固定链接样式或创建自己的自定义结构,然后单击保存更改。...更多信息 您或许需要访问以下资源来获取关于本主题的更多内容。在此提供以下链接希望有所帮助,但是不保证外部资料的准确性和时效性。

    7.8K10

    广告等第三方应用嵌入到web页面方案 之 使用js片段

    :  服务端接收到请求后, 从url中提取到参数, 再根据参数从数据库中查找出对应的数据信息,比如是广告的话, 就查找到对应的广告素材, 并将查询到的数据信息插到javascript模板中, 浏览器执行...服务端生成脚本,所有的代码和数据都包含在生成的js文件中,不需要做额外的请求,适用于内容及样式相对简单的页面.比如只有一个图片的广告展示.对于内容较多,样式较为复杂的内容展示通过第二种方案实现更加灵活....访问iframe的DOM,使用document.write将HTML直接写入到iframe中 var doc = document.getElementsByTagName('iframe')[0].contentWindow.document...由浏览器异步处理, 所以此处使用document.write()并不会阻止父页面的加载 优点:    1.完全独立的DOM环境,不会继承父页面的样式   2完全独立的window,避免和主页面其他脚本冲突...1.需要在iframe外部呈现内容, 场景: 第三方应用中需要弹出对话框时,如果iframe不是覆盖整个页面的, 就无法正常展示对话框    2.一个页面引入很多个iframe嵌入页面, 同一个页面引入许多个

    3.4K111

    前端网络高级篇(六)网站性能优化

    将样式表放在顶部 外部脚本文件和CSS文件是并行下载的,把样式表在页面中的位置并不影响下载时间,但会影响页面的呈现!浏览器必须要等样式表加载完毕之后才渲染页面。...使用外部JS和CSS 纯粹来讲,内联的JS和CSS可以产生比外部文件文件更快的响应速度。 但是现实中,外部链接的JS和CSS文件会产生较快的页面,是因为JS和CSS文件有可能被缓存。 9....压缩JavaScript和CSS 可以用各类构建或者编译工具压缩脚本和样式文件,比如:gulp,webpack 11. 少用iframe iframe是开销最高的DOM元素,它的缺点远大于优点。...不利于SEO:搜索引擎的检索程序无法解读iframe中的src 阻塞onload事件:iframe不加载完毕,就不会触发父窗口的onload事件。...为了解决两个问题,可以动态设置iframe中的src属性,代码如下: iframe id="iframe1" src="">iframe> document.getElementById

    1.9K30
    领券