【博客】3-hexo主题博客魔改日志

使用谷歌浏览器Lighthouse对博客网页进行测试，发现部分脚本阻塞渲染，记录部分修改内容，备忘。

使用

如图，谷歌浏览器中F12打开开发者模式，即可看到Lighthouse功能：

然后网址栏输入需要测试的网址并打开，点击网页分析加载情况10秒左右即可出结果：

最后根据测试结果对网站进行优化。

记录（自用）

测试结果显示首次绘制（First Contentful Paint, FCP）影响最大，网站中的某些外部 CSS 和 JS 资源（如 animate.css 和 jquery.js）在页面加载时阻塞了网页的渲染，从而延迟了页面的首次绘制。

• 原代码：

找到3-hexo博客中引用脚本和样式的文件在[RootBlog]\themes\3-hexo\layout_partial\meta.ejs:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
<% if (theme.rss){ %>
<link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link rel="icon" href="<%- theme.favicon %>">
<% } %>
<link href="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/css/style.css?v=<%=theme.version%>" rel="stylesheet">
<% if(theme.highlight && theme.highlight.on && theme.highlight.theme){ %>
<link href="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/css/hl_theme/<%=theme.highlight.theme %>.css?v=<%=theme.version%>" rel="stylesheet">
<%}%>
<link href="<%=theme.CDN.animate %>" rel="stylesheet">
<% if (theme.img_resize == 'photoSwipe') {%>
<link href="<%=theme.CDN.photoswipe_css%>" rel="stylesheet">
<link href="<%=theme.CDN.photoswipe_skin_css%>" rel="stylesheet">
<% } %>
<script src="<%=theme.CDN.jquery%>"></script>
<script src="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/js/titleTip.js?v=<%=theme.version%>" ></script>

<script src="<%=theme.CDN.highlight %>"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<% if (theme.CDN.nprogres_js){%>
<script src="<%=theme.CDN.nprogres_js%>"></script>
<%}%&gt;
&lt;% if (theme.comment.type == 'disqus') {%>
<script id="dsq-count-scr" src="//<%= theme.disqus.shortname%>.disqus.com/count.js" async></script>
<% } %>
<% if (theme.comment.type == 'gitalk') {%>
<script src="<%= theme.CDN.jquery_cookie %>" ></script>
<%}%&gt;
&lt;script src=&quot;&lt;%=theme.blog_path?theme.blog_path.lastIndexOf(&quot;/&quot;) === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %&gt;/js/iconfont.js?v=&lt;%=theme.version%&gt;&quot; &gt;&lt;/script&gt;

上述代码部分标签渲染不了，<是<，"是"

• 修改后：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
<% if (theme.rss){ %>
<link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link rel="icon" href="<%- theme.favicon %>">
<% } %>
<link href="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/css/style.css?v=<%=theme.version%>" rel="stylesheet">
<% if(theme.highlight && theme.highlight.on && theme.highlight.theme){ %>
<link href="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/css/hl_theme/<%=theme.highlight.theme %>.css?v=<%=theme.version%>" rel="stylesheet">
<%}%>
<link href="<%=theme.CDN.animate %>" rel="stylesheet">
<% if (theme.img_resize == 'photoSwipe') {%>
<link href="<%=theme.CDN.photoswipe_css%>" rel="stylesheet">
<link href="<%=theme.CDN.photoswipe_skin_css%>" rel="stylesheet">
<% } %>
<script src="<%=theme.CDN.jquery%>"></script>
<script src="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/js/titleTip.js?v=<%=theme.version%>"></script>
<script src="<%=theme.CDN.highlight %>"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<% if (theme.CDN.nprogres_js){%>
<script src="<%=theme.CDN.nprogres_js%>"></script>
<%}%&gt;
&lt;script src=&quot;&lt;%=theme.blog_path?theme.blog_path.lastIndexOf(&quot;/&quot;) === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %&gt;/js/iconfont.js?v=&lt;%=theme.version%&gt;&quot;&gt;&lt;/script&gt;

由于没有使用默认评论，删除了disqus和gitalk评论相关的代码。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 3415226167@qq.com