按惯例，所有JavaScript都放在页面的头部head中，必须等全部JavaScript代码都被下载、解析和执行完后，才能开始呈现页面的内容，对加载很多JavaScript代码的页面来说，会导致页面呈现出现明显示的延迟...我们可以通过为这些JavaScript添加“async”（异步）或“defer“（推迟）属性，加快页面呈现的速度。...Async JavaScript 是一款为WordPress主题加载JavaScript文件添加async”和“defer“属性的插件。...主要是针对使用标准的wp_deregister_script函数加载JavaScript文件的方法。
在 wordpress 主题或插件中加载 JavaScript 时，官方推荐的方法是使用 wp_enqueue_script() 来加载，该函数可以指定 JavaScript 的依赖库，指定 JavaScript...但是，该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是，我们可以通过 WordPress 的函数自己动手来实现这个功能。...当一个比较大的库只在某一个或几个页面使用时，我们不需要在每个页面上加载所有脚本，而只需要在特定的页面模板中加载即可，以免其他页面加载不需要的 JavaScript 文件而影响页面打开速度，增加服务器开销...个 JavaScript 插件来实现这个页面的效果，而这些库在其他页面都是用不上的，如果直接在全部页面加载，每个页面都会加载这 4 个库，即使是这个页面不需要使用这些库来实现效果。...只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗，在下面的代码中，首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件，然后判断当前页面是否使用了指定的页面模板，
什么是 JavaScript 的 Defer 属性 这种情况大家都可能遇到过：就是 head 中有 N 个脚本，当加载这些脚本的时候就会阻塞页面的渲染，也就是常说的空白，当然我们可以把源代码中的脚本放到...这个时候我们可以使用 Defer 属性，它是 JavaScript 中比较少用的一个属性，可能你从来都不会使用它，但是相信看完这里的介绍，相信你就不会离开它，它的主要功能就是让脚本在整个页面加载完之后再解析...，而非边加载边解析，这对于只包含事件触发的 JavaScript 的脚本来说，可以提供整个页面的加载速度。...给 WordPress 中使用的脚本加上 Defer 属性 那么在 WordPress 中，我们怎么给 WordPress 使用的脚本自动加上 Defer 属性呢？...方式引入的 JavaScript 代码才有效。
现在网站的字符集已经默认使用 UTF-8，WordPress 也是，原来我们可以在 WordPress 后台设置网站的编码模式，但是 WordPress 从 3.5.1 版本开始，取消了后台这个设置，现在只能默认为...UTF-8 字符集。...但是由于历史遗留问题，WordPress 使用这个方法在获取字符集的时候，还使用两个 filter 进行过滤： add_filter('option_blog_charset', '_wp_specialchars...而_canonical_charset则把获取字符集转成统一的名称，UTF-8 或者 ISO-8859-1。...如果我们 WordPress 网站的字符集已经确定就是 UTF-8，没有必要使用这两个函数过滤，通过下面这段代码直接返回就好： add_filter('pre_option_blog_charset',
wordpress速度优化总是一个老生常谈的课题。最近有一个项目基于wordpress，网站页面接近10万+，访问造成的大量数据库查询，服务器时常负载跑满自闭。。于是便有了此篇文章。...Cachify插件下载:Cachify或者在wordpress后台搜索: Cachify配置方法:配置方法非常简单，这里缓存方式推荐使用Mencached。...（使用的前提需求服务器安装Mencached）图片伪静态规则:插件内选项配置好之后，需要在 Nginx 站点伪静态中 添加下边的规则。然后重启Nginx 服务，即可生效。...request_method = POST ) {return 405;}if ( $request_uri ~ "/wp-" ) {return 405;}if ( $http_cookie ~ (wp-postpass|wordpress_logged_in
在 WordPress 后台，点击媒体库选择图片的时候，可以按照月份筛选附件： WordPress 的媒体库月份筛选功能 这个是 WordPress 的媒体库月份筛选功能，博客的这些附件的月份是直接通过查询数据库来获取的...使用内存缓存优化媒体库月份获取 虽然不会造成很大的问题，但是附件如果不新增删除，这个月份的数据基本不会变化，我们可以通过 Memcached 将其缓存起来。...将下面的代码复制到当前主题的 functions.php 文件中，就可以使用内存来缓存媒体库的月份了： // 缓存获取附件的月份。...wpjam_delete_media_library_months_cache'); add_action('delete_attachment', 'wpjam_delete_media_library_months_cache'); 使用内存缓存优化媒体库月份获取功能已经整合进图片集插件
但是 WordPress 日志编辑框会对过滤这些 Javascript 脚本，所以我们无法直接把脚本写到日志，如果修改主题，把脚本添加到主题的 header.php 文件中，那么博客所有的页面都会加载这些脚本...所以这个时候我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。...假设我们给日志单独加载 Javascript 脚本的自定义字段是 custom_head。...php /* Plugin Name: Custom Head Plugin URI: http://blog.wpjam.com/m/custom-head/ Description: 使用自定义字段给某篇的日志单独加载...Javascript 脚本，使用的自定义字段是 custom_head。
接下来就是压缩了，诸如 Better WordPress Minify 这样的插件会合并所有样式表和 JavaScript 文件到一个文件，减少浏览器需要产生的请求数。...出于同样的原因，在你的 HTTP 响应头中指定字符集也很有用，这样浏览器就不需要花费额外的时间来找出你使用的是哪一个。只需添加字符集到你的网站 head 部分。 9....另一方面，JavaScript 应该放在离页脚越近越好，因为在它完全加载之前会阻止浏览器解析任何内容。 在大多数情况下，这个简单的操作通过强制文件下载的最优顺序来提升页面载入速度。...但是这在严重依赖 JavaScript 和需要在用户看见页面之前就加载 JavaScript 文件的网站上可能会导致问题。 10....请记住 Safari 不会加载过大的雪碧图，所以请使用 William Malone’s calculator 以确定你的雪碧图是否过大。 11.
当然也可以受到到 WordPress 目录下去创建，你可以使用 WordPress 默认提供的 wp-config-sample.php 进行修改创建。...2.2 版本开始，WordPress 支持设置数据库的字符集，一般来说，默认的字符集 utf8 (Unicode UTF-8) 是最佳选项，UTF-8 支持所有语言，所以一般来说将字符集定义为 utf...自动保存 WordPress 会在你撰写日志的时候，使用 AJAX 自动保存日志修订到数据库中。...另外，在默认情况下，WordPress 后台的所有的 JavaScript 的文件都被连接到一个 URL 中，如果 JavaScript 发生错误，可以把这个功能屏蔽了，检查一下： define( 'CONCATENATE_SCRIPTS...缓存 如果将 WP_CACHE 设置为： true，WordPress 就会加载脚本 wp-content/advanced-cache.php。
网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。...JavaScript 正确的使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。...这样做虽然可以解决在网页内容加载完成之后执行对应 JavaScript 代码，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来就会很麻烦。...前面说过 window.onload 事件加载的缺陷是只能在页面中使用一次。而使用监听器的方法，就可以监听为 window 的 onload 事件分别加载多个函数了。...这个函数的使用方法也比较简单，把它放在 JavaScript 的最顶部，然后在下面编写功能函数，如果需要将某个功能函数使用这种方法加载，就可以把函数名作为参数调用这个自定义的 addLoadListener
WordPress 的 wp_localize_script 函数从它名字可以看出它是用来进行前端本地化的，它的工作方式是加载翻译之后的文本，接着将它们当做一个 JavaScript 对象输出到 HTML...使用 wp_localize_script 从 PHP 传递参数给 JavaScript 但是我们使用 wp_localize_script 过程中，反而主要用来从 PHP 传递参数给 JavaScript...，下面我通过微信机器人插件来讲讲如何使用该函数从 PHP 传递参数给 JavaScript。...微信公众平台在用户分享的时候可以让用自定义标题，摘要，图片和链接，我们需要把标题，摘要，图片和链接这些参数从 PHP 传递给 JavaScript， 首先使用 wp_enqueue_script 函数加载微信...第三个是：$data，数据，可以文本，可以二位或者多维数组，会使用 json_encode 函数生成 JavaScript 的对象或者数据。
WordPress 使用 OSS Upload 后媒体库无法加载一直转圈的解决方法 ---- 网站后台的媒体库居然加载不出图片了，而且也时而发生图片上传失败的情况，这种现象仅出现于使用oss upload...插件作为媒体库，列表模式正常，grid网格模式却加载不出来，一直在转圈圈！...没办法，既然在网上找不到原因，那么只能自己琢磨了，我把网站整体打包放到另一个服务器发现居然可用加载出来，我以为是原本服务器的环境问题，备份服务器数据后重装环境，再次把网站搬回原服务器，一摸一样的环境发现问题依旧没有解决...，图片还是不能加载出来。...不是环境的问题那只能再次通过网站的代码找原因了，经过一天的摸索尝试，我发现媒体库加载不出来的时候admin-ajax.php会反复出现502网关连接失败，和cURL解析超时的现象。
对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式，可以使用tinypng 优化图片，提高图片质量。 ...正如你想的，这会延长页面的 加载时间。 使用Keep-Alive头可以一直保持连接，直到浏览器从服务器获取到所有与这个页面相关的资源。...重定向会消耗额外的时间，降低加载速度。 9、指定字符集 指定字符集是加速浏览器渲染页面的另一个有用的技巧。...14、JavaScript的延迟解析 为了加载网页，浏览器必须解析所有的标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。 ...因此建议避免阻塞型的JavaScript，尤其是外部脚本。 阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript，或者采用异步加载的方式。
WordPress 现在“JavaScript 优先” PHP 衰落的最大原因可能是 WordPress（迄今为止最流行的内容管理系统）正在远离 PHP 转向 JavaScript。...例如，PHP 是一种服务器端脚本语言（这意味着代码通常在 Web 服务器上处理），但 Mullenweg 希望 WordPress 使用 JavaScript 在客户端执行更多操作。...也许在浏览器中使用 JavaScript（现在拥有令人难以置信的虚拟机和真正快速的处理器）比在服务器端执行此操作更快。”...“我认为 Gutenberg 进行开发的方式和 JavaScript 优先 [方法] 是大多数 Web 开发的未来。顺便说一句，这对我来说也很陌生——这不是我最初学到的。...不幸的是，对于 PHP 来说，其使用率的下降不太可能很快停止——为什么会出现这种情况，当 WordPress 开发者忙于适应新的 JavaScript 范例时？但至少 PHP 基金会正在积极开发。
不再查询 WordPress 原生的留言。 2. 不再加载 comment-reply.js，3.把多说的 JavaScript 脚本移到 footer。...不再查询 WordPress 原生的留言 我们知道使用多说这样的社会化评论服务之后，WordPress 本地的留言除了备份之外，其他已经没有什么作用了。...不再加载 comment-reply.js 我们知道 WordPress 在开启 Thread Comments 之后，WordPress 会要求在 head 加载一个叫做 comment-reply.js...JavaScript 文件，它是用来实现 WordPress 原生嵌套留言的回复功能，但是我们使用多说之后，多说接管了所有留言的功能，多说也自带了嵌套回复功能的 JS，，所以 comment-reply.js...也就没有必要了，我们可以删除当前主题下的 header 中调用代码实现 WordPress 更快的加载。
如果仅仅加载WordPress 自带的jQuery 库，在使用一些jQuery 插件的时候明明是代码没有错误，但就是不起作用，该有的效果不能实现；但加载了原版的jQuery 库却又可以了，这样一来却同时加载了两个...貌似WordPress 默认是加载自带的jQuery 库的，首先你要取消这个功能，使之在前台默认不加载自带的jQuery 库： 打开/wp-includes/script-loader.php文件，以“...更新：如果查看源代码分享加载了WordPress 自带的jquery 库，那么肯定是主题或者插件加载的（非登录状态下），因此，按照下面的代码可予以取消（其实就开发而言，不建议这么做）： 你的主题也可能加载也会加载...参考WordPress官方文档：zh-cn:函数参考/wp enqueue script 相关知识：jQuery 与Javascript 的关系 jQuery 是一个 JavaScript 函数库。...jquery 对javascript进行扩展，封装，让javascript更好用，更简单。看过一个比喻：如果说JavaScript 是面条，那么jQuery 就是方便面——自己好好理解吧~
或者，您可以使用免费的在线工具（如 JavaScript Minifier）手动缩小脚本代码。 3.使用JavaScript的延迟和异步加载 Web 浏览器从上到下读取代码。...与这些属性等效的 JavaScript 关键字是async和await关键字。您可以使用它们更异步地加载您的 Javascript，而无需编辑网页上的 HTML 标记。 4....如果您注意到您的网页正在使用 JavaScript 来弥补以前版本的 CSS 的不足之处，您应该更改它并用 CSS 替换所有不必要的 JavaScript——在可能的情况下。这将使网页加载速度更快。...WordPress 使您可以更轻松地识别网站上的脚本并使用各种优化插件对其进行编辑。我们将在接下来介绍这些内容。 6....Async Javascript：由 WordPress 提供的开源插件。它允许您检测阻塞渲染的 JavaScript，然后延迟它或异步加载它。 ---- 那么为什么我们不首先推荐插件呢？
在制作主题和插件，或者为 WordPress 增加某些功能时，一般都要使用 WordPress 的动作钩子 (action)，分享几个比较常用的动作钩子，以备用时查看。...plugins_loaded 在所有用户启用的插件都被 WordPress 加载之后执行。...因为这时几乎 WordPress 中的所有内容都就绪了，当 WordPress 的所有信息都可用时，你的插件使用这个钩子差不多可以做任何需要的事情了。...有些插件错误的使用了 wp_head 动作钩子来添加 JavaScript 代码，实际上应该使用 wp_enqueue_script() 函数的。...唯一一种使用这个钩子来添加 JavaScript 的情形是当 JavaScript 代码不在一个单独的文件中时。
之前折腾WordPress主题的时候感觉Font Awesome太过庞大，好多图标字体基本都用不上，加载起来太慢了，于是自己折腾了一套简单的图标字体，但在完善主题过程中才发现字体太少不够用（有些图标当时没想到...于是想到可以用css的content，通过伪元素将一些符合的unicode字符集插入其中。特殊字符太多，怎么可能记得住，在BD搜索之后进行合并归纳备忘。...example:before { content:'\00AB'; …}.example:after { content:'\00BB'; …}注意这些字符属于unicode字符集，...在使用的时候需要将添加这些字符的代码声明为UTF-8格式.唯一不足的是部分字符在不同浏览器中显示的效果不同，在使用的时候需要在不同的浏览器中进行试验。...（在字符前加 \u ）®17400AE©16900A9℗84712117™1530099℠84802120货币图形样式HTML（在字符前加 &# ）CSS （在字符前加 \ ） 和 JavaScript
使用可靠的图片主机服务 试着将常用的网络图片、CSS、JavaScript和其他静态文件保存在Amazon S3 Storage service上，你会发现web服务器的平均CPU加载/存储要求大幅度降低...11.通过AJAX库API加速构建你的构架 AJAX 库 API致力于为开发人员加速网络应用程序，它是一种内容分布网络，可加载最受欢迎的JavaScript库，包括： jQuery prototype.../ajax/libs/prototype/1.6.0.2/prototype.js"> 也可以使用Google API： 使用google.load()方法可加速程序的运行，并能访问越来越多最受欢迎的源代码和每日更新的Javascript库列表。...12.显示页面加载次数和查询次数 将下面的代码添加到你的模板上就可以显示加载你的页面需要的时间和执行的sql查询次数了。 这个方法可以快速了解你的WordPress博客优化程度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
