关键渲染路径和第三方库

Question

I am trying to follow Ilya Grigoric's performance best practices by inlining critical css & js and loading all the rest async later.

My problem is when my page needs 3rd party libs in order to render its critical path. I guess when using MVC libs like Angularjs this is not reall an option, but what if I want to use 3rd party templating library? Is there a small enough templating library that I can inline?

I am really trying to follow those best practices ang build a super fast mobile web-app, bit this seams to be really difficult using today's modern front-end development tools (Angularjs/Polymer etc.)

Answer 1

The question is broad and vague so it's hard to answer.

You've got a couple of issues here. First, the idea of 'small enough' is relative. You can inline any amount of javascript, so you can technically inline any template library you find.

I don't know what Grigoric's specific guidance is, but if you need the template library to render anything for the user then it IS part of your critical path and should be loaded asap. That said, if you're trying to create a fast experience for your user, it seems like you'd be better off rendering the html server side so the mobile device can react quicker to the response. If your entire document is created with javascript templates on the device you're going to have to wait for the entire DOM to load, wait for the javascript to parse, and finally wait for your templates to be processed before anything is shown to the user.

EDIT:

Don't optimize for a performance problem until you HAVE a performance problem

The goal is not to make the 'fastest possible page'. Instead your goal should be to make a page that 'works well'. Your questions don't really have 'correct' answers - it really depends on your specific situation and goals.

Regarding 'what if js is in head, will it be an issue': the answer is simply yes. Sure you can make tweaks to speed things up, but the basic architecture still has the same limitations - when you render templates on the client you're doing a ton more processing on the client. Further, you have to wait significant amount of time to download resources on first request, more than you would if it were plain html coming down the line.

Either way, in both cases your app may function perfectly well. You should just implement something and come back if you have a more specific issue.