When it comes to rendering a page, we know there is an HTML parser that parses HTML and a CSS parser that parses CSS.
So, do they work in parallel? I think the HTML parser and CSS parser belong to the GUI rendering thread, so they can only work serially. But I'm not sure if this is correct.
Yes, they are in parallel. but not part of the GUI thread
Related
Is it really that slow? Should it be so, or something's wrong with my implementation?
P.S. 2 input fields form with one button.
Without styled-components: (523ms Scripting)
With styled-components: (3161ms Scripting)
Yes, Styled Components is slow because it's a CSS-in-JS solution. This means your page must go through these steps:
page is loaded;
JavaScript code is parsed;
CSS is generated;
CSS is injected into components;
browser renders the CSS.
When you have plain CSS files (like when you use CSS modules), the steps are:
page is loaded;
JavaScript code is parsed; browser renders CSS in parallel.
Styled Components gives you the powerful ability to inject code dinamically into the CSS, but there is no free lunch: and the cost here is performance. In the long run, the best solution to me seems to be SCSS modules (that is, CSS modules combined with SCSS).
Then, if you need to inject code into the CSS, simply set CSS --variables dinamically.
Summary:
I'm currently migrating a website on Apache + PHP stack over to Node + Express, and would like to know what is the best way/best practice (if there is one) for dynamically injecting meta tags under the new stack.
Details:
Under the existing stack, meta tags are injected dynamically by adding PHP codes into the HTML file directly. As rendering is done on server side, the tags are properly interpreted by Facebook/Google+/whatever web crawlers.
Under the new stack, after doing some research, I've come across two options:
Use template engine like Pug (Jade) to render the HTML with locals. (It seems to be an overkill to rewrite the existing HTML with Pug's syntax though? Can Pug deal with HTML, or I've to consider other template engine like EJS? What template engine do you advise me to explore?)
Use DOM manipulation plugin like Cheerio to inject the meta tags first, before rendering begins.
Between these two options, which one will have a better performance or there is no material difference? Are there any other ways that you'd otherwise recommend? Thanks!
EJS would probably be the simplest one for that and very similar to PHP.
You can also take a look at Mustache and Handlebars for other options with minimal changes to your existing HTML.
with EJS: <html><head><%= yourMetaTags %> ...
with Mustache: <html><head>{{ yourMetaTags }} ...
with Handlebars: <html><head>{{ yourMetaTags }} ...
Also doT.js is very fast.
See:
http://www.embeddedjs.com/
https://mustache.github.io/
http://handlebarsjs.com/
http://olado.github.io/doT/
Parsing the HTML and manipulating it with a DOM API just to insert meta tags would be an overkill in my opinion.
On the other hand if all you need is to insert meta tags then you could make a simple regex substitution, using something like yourHTML.replace('<head>', '<head>'+yourMetaTags); but it could potentially get more complex over time when you need more functionality. After all, everyone has made a templating engine at some point in life.
I have some HTML entered by the user which is displayed in a Yesod template. I would like to transform this HTML, stripping out style attributes from it before it gets rendered, but i cannot find out how.
If my template contains #{ html } i can pass html as a value through a function simply writing #{ transform html }, if the transform function has a signature: transform :: Html -> Html where Html is the type defined by blaze-html here. The problem i see is that Blaze does not seem to expose functionalities useful in order to walk an HTML tree, or even just get the descendents of a given Html. So which strategies would you suggest? Should i try to get into the Blaze internals?
I am not sure whether this should be considered purely an issue with Blaze. Transforming Html elements is not one of the main use cases of Blaze, so this problem needs to be tackled in the context of rendering with Yesod
You have to render to Text or ByteString first, blaze provides no means of analyzing content. Then you can process the data with a library like html-conduit or tagsoup (which is what xss-sanitize does).
How do i print nice formatted html?
I want something like app.locals.pretty = true.
ExpressJS: how to output pretty html
According to Text.Hamlet.Html's definition, Hamlet uses blaze-markup for its output. blaze-markup, in turn, has a renderer backend with the promising name Text.Blaze.Renderer.Pretty.
So I think what should work is if you run your Hamlet templates to get the final Html, and then render it yourself by calling Text.Blaze.Renderer.Pretty.renderMarkup.
I would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>