UI Developer Interview Questions in Verizon
I have attended the initial screening of technical telephonic interview. Questions asked are as follows.
1) What is the difference between canvas and svg?<canvas> is an HTML element which can be used to draw graphics using JavaScript. This can be used to draw graphs, create animations etc.
The <canvas> element is not supported in older browsers, but is supported in recent versions of all major browsers.
The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property. The declaration is as follows.
<canvas id="animate" width="250" height="250"></canvas>
SVG stands for Scalable Vector Graphics (SVG) is based on XML markup language, for describing 2D vector graphics.
2) Can you explain the difference between cookies, sessionStorage and localStorage.?
LocalStorage stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.
Local storage and session storage are perfect for non sensitive data. The data stored in localStorage and sessionStorage can easily be read or changed from within the client/browser
so should not be relied upon for storage of sensitive or security related data within applications.
Data stored in the SessionStorage is only available for the duration of the browser session (and is deleted when the window is closed) - it does however survive page reloads.
In cookie, we can store 4096 bytes of data. Data stored in the cookie can be hacked by the user, unless the site uses SSL. We can also prevent injections like Cross-Site Scripting (XSS)/Script injection using httponly in the header.
3) Explain about quirks mode?
There are three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode.
Quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition.
However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.
4) What is meant by hardware acceleration?
It means the graphical rendering is done on dedicated hardware (your GPU / graphics card) rather than your CPU. Hardware acceleration generally produces more fluid animation.In general you should always enable hardware acceleration as it will result in better performance of your application.
This will usually be a higher frame rate (the number of images displayed per second), and the higher the frame rate, the smoother the animation.
5) How can you load css resources conditionally?
Using CSS media querises we can load CSS contidionally. If you want to load the stylesheet for the device less than 600px, then you can declare as below.
<link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css">
This style sheet will only load for screen size less than 600px.
6) Difference between article and section tag in HTML5. How can you nest them in your document?The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
So basically the section element should contain related information bunched under a common heading.
The HTML5 <article> element represents a complete composition in a web page or web application that is independently distributable or reusable, e.g. in syndication.
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
We can nest article inside a section tag and vice versa. This is completely legal interms of HTML5.
7) What happen when you dont use doctype?
When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.
Also HTML5 tags such as < article >,< footer >, < header >, < nav >, < section > may not be supported if the Doctype is not declared.
8) Difference between html5 and html4?
From doctype to sematic tags, many new features has been introduced in html5
Doctype for html4 is as follows : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Doctype for html5 is <!DOCTYPE html>
In HTML5, new semantic elements like <header>, <footer>, <article>, <nav> <section> are added.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>. Some interesting API's like Local Storage, Geolocation, Session staorage have been introduced.
9) What are data- attributes good for?
The data-* attributes is used to store custom data related to the page or application.
The custom data can be used in JavaScript to complete events or animations.
10) What is the use of doctype in a html document?
The doctype declaration should be the very first thing in an HTML document, before the tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
In html5, the doctype declaration is :
<!DOCTYPE html>
11) How will you create CSS sprites. What is the use of sprites?
We can use photoshop to create sprite images. If you are using Grunt, then you can use <a href="https://github.com/Ensighten/grunt-spritesmith">grunt-spritesmith</a> plugin to generte sprite images from the source folder.
12) How will you improve the site performance?
We can check the site performance using Website Speed and Performance Optimization tool.
Using a CDN
The performance of website it depends on the backbone servers and the distance from user's location.
CDN makes the distribution of data easy. As they serve data via nearest possible servers to the user.
Minify and Unify Javascript and CSS resources
We can minify the javascript the CSS files to reduce the file Size. Also Unification of multiple files to one will reduce the HTTP request.
This inturn will load the website faster.
Optimize Image :
Its better to PNG image format to optimize the page speed.
We can Compress PNG images (while preserving transparency) for better performance.We have few online tools to do so. some of them are pngquant - lossy PNG compressor.
Apart from that we can also check the performance error reports in Google web master tools.
13) Main usage of semantic tags in HTML5?
Sematic tags clearly explain the meaning of the tag. For eg: <header> tag defines the header of the document.
These Semantic tags are helpfull in search engine optimization.
