Scribd
Upload
14 views

FrontEndQuestions

Uploaded by

naveedprotek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

FrontEndQuestions

Uploaded by

naveedprotek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Interview Questions

HTML/CSS

• What is DOCTYPE?
The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <! DOCTYPE> declaration for HTML5 is

<!DOCTYPE html>

• What is HTML Head and meta tag?


The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body>tag.

Defines information about the document

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and
other meta information.

The following tags describe


metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <meta> Element


Defines metadata about an HTML document

The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search engines


(keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define the author of a page:
<meta name="author" content="John Doe">
Define a description of your web page
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

Setting The Viewport


The viewport is the user's visible area of a web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• WHAT ARE NEW FEATURES IN HTML5?


New HTML5 elements are:

New semantic elements like


<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<article> Defines an article in a document
<section> Defines a section in a document
<nav> tag defines a set of navigation links.
<main> tag specifies the main content of a document.

New Form elements:


<output> Defines the result of a calculation.
<datalist> tag specifies a list of pre-defined options for an <input> element

New multimedia elements:


<audio> Defines sound content
<video> Defines video or movie

New graphic elements:


SVG stands for scalable vector Graphics.
The HTML <svg> element is a container for SVG graphics. SVG has several
methods for drawing paths, boxes, circles, text, and graphic images.
<canvas> tag is used to Draw graphics, on the fly, via scripting (usually
JavaScript). The <canvas> element is only a container for graphics. You must
use JavaScript to actually draw the graphics. Canvas has several methods for
drawing paths, boxes, circles, text, and adding images.

Canvas SVG

• Resolution dependent • Resolution independent


• No support for event handlers • Support for event handlers
• Poor text rendering capabilities • Best suited for applications with large rendering areas (Google Maps)
• You can save the resulting image as .png or .jpg • Slow rendering if complex (anything that uses the DOM a lot will be slow)
• Well suited for graphic-intensive games • Not suited for game applications

New HTML5 API’s like


Geolocation- The HTML Geolocation API is used to locate a user's position.
Drag and Drop
Local Storage
Application Cache
Web Workers.

• Differences between local and session storage


and Session Cookie?
The Local and Session Storage belong to HTML Web Storage.

With web storage, web applications can store data locally within the user's
browser.

Before HTML5, application data had to be stored in cookies, included in every


server request. Web storage is more secure, and large amounts of data can be
stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is
never transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin,
can store and access the same data.

HTML web storage provides two objects for storing data on the client:

• window.localStorage - stores data with no expiration date


• window.sessionStorage - stores data for one session (data is lost when
the browser tab is closed)

Before using web storage, check browser support for localStorage and
sessionStorage:

if (typeof(Storage) !== "undefined") {


// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object


The localStorage object stores the data with no expiration date. The data will
not be deleted when the browser is closed, and will be available the next day,
week, or year.

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

The sessionStorage Object


The sessionStorage object is equal to the localStorage object, except that it
stores the data for only one session. The data is deleted when the user closes
the specific browser tab.
Browser cookies
• Cookie basics:
o The first time a browser connects with a particular server, there are no cookies.
o When the server responds it includes a Set-Cookie: header that defines a cookie.
o Each cookie is just a name-value pair.
o In the future whenever the browser connects with the same server, it includes a Cookie: header
containing the name and value, which the server can use to connect related requests.
• What's in a cookie?
o Name and data.
▪ Data size limited by browsers (typically < 4 KB).
▪ A server can define multiple cookies with different names, but browsers limit the number of cookies
per server (around 50).
o Domain for this cookie: server, port (optional), URL prefix (optional). The cookie is only included in
requests matching its domain.
o Expiration date: browser can delete old cookies.
• WHY USE REACT?
1) UI State becomes difficult to manage with
vanilla JavaScript. With the use of React UI
state management becomes easy. With the use
of React you can focus more on business
Logic.
2) Fast Render with Virtual DOM. Updating the
DOM is usually the bottleneck when it comes
to Web performance. React solves this
problem by using something called virtual
DOM, A DOM kept in memory. Any view
changes are first reflected to virtual DOM,
then an efficient diff algorithm compares
the previous and current states of the
virtual DOM and calculates the best way
(minimum amount of updates needed) to
apply these changes. Finally those updates
are applied to the DOM to ensure
minimum read/write time. This is the
main reason behind React’s high
performance.
3) Reusable Components

• WHAT is Props and State?


Props is simply shorthand for Properties. Props
allow you to pass data from a parent Component to a
Child Component. Props are immutable and thus
cannot be changed.
Props are set and passed from outside the
component.
State is special property of the component and is
managed from inside the component. If the State
Changes it will lead React to Re(Render) or update
the DOM.
State is used for mutable data or data that will
change.
Changing the State Object- To change the value in
the state object we use this.setState() method. You
cannot directly mutate the state of the component in
react.

• WHAT is Component in React?

Conceptually, components are like JavaScript


functions. They accept arbitrary inputs (called
“props”) and return React elements describing what
should appear on the screen.
Components are the building blocks of any React
app and a typical React app will have many of these.
Simply put, a component is a JavaScript class or
function that optionally accepts inputs i.e.
properties(props) and returns a React element that
describes how a section of the UI (User Interface)
should appear.

• How to Repeat Over Arrays in React?


To Repeat Over Arrays in React we can use build in
JS Array method called map().

• Why do we need Keys?


Keys help React identify which items have
changed, are added, or are removed. Keys should
be given to the elements inside the array to give
the elements a stable identity.

• Life Cycle Methods in React?


Each Component in React has several lifecycle
methods that you can override to run code at
particular times in the process.
Mounting: When a instance of a component is
being created and inserted into the DOM the
following methods are called:
1) Constructor()
2) getDerivedStateFromProps(props,state)
3) render()
4) ComponentDidMount()
Updating: An update can be caused by changes to
state. These methods are called when component is
being rerendered.
1) getDerivedStateFromProps()
2) shouldComponentUpdate()
3) render()
4) getSnapshotsBeforeUpdate()
5) ComponentDidUpdate()
Unmounting: unmounting happens when a
component is removed from the DOM.
componentWillUnMount()

• Controlled vs Uncontrolled Form in React?


In Controlled Component the form data is handled by
a react component.
In Uncontrolled Components the form data is
handled by DOM itself. To write an uncontrolled
component, instead of writing an event handler for
every state update, you can use a ref to get form
values from the DOM.

• What is concept of lifting state up?


To share a state between two components, the most
common operation is to move it up to their closest
common ancestor. This is called “lifting state up”. (ie
removing the local state from the descendant
component and move it into its ancestor instead.)
Often, several components need to reflect the same
changing data. We recommend lifting the shared
state up to their closest common ancestor.

• Virtual DOM in React


Virtual DOM is in memory DOM and it is synced
with real DOM by a library such as REACT DOM.
This process is called reconciliation.

• How to update state.


To update the state in react use the in build setState()
method to modify the state.

• Higher Order Components in React?


Higher-order component is a function that takes a
component and returns a new component. HOC is
advanced technique in React for Reusing component
logic. Component transforms props into UI whereas
HOC transforms a component into another
component.
const EnhancedComponent =
higherOrderComponent(WrappedComponent)

• Stateless vs Stateful Components?


Stateful Component is a Component that manages
state.
Stateless Component is a component which has no
internal state management.

• Pure Components in React?


Class Components that extend the
React.pureComponent base class are considered as
Pure Components. Pure Components render the
same output for the same state and props. Pure
Components have some performance benefits as
compared to the regular components.
React.component does not implement
shouldComponentUpdate()
React.pureComponent implements
shouldComponentUpdate() with shallow state and
prop comparison.

• Fragments in React?
A common pattern in React is for component to
return multiple elements. Fragments lets you group
list of children without adding extra nodes to the
DOM.
e.g
render(){
return(
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}

• Render Props in React?


Render Props refer to technique for sharing code
between React components using a prop whose
value is a function.
A component with a render prop takes a function
that returns a React element and calls it instead of
implementing its own render logic.
Render Prop is a function prop that component uses
to know what to render.
Use Render Props for cross cutting concerns.
Libraries that use Render props include React Router
and downshift.

• Refs and Forwarding Refs in REACT?


Refs provide a way to access DOM nodes or React
elements created in the render Method.
When to use Refs:
a) Managing focus, text selection or media
playback.
b) Integrating with third party DOM libraries
Creating Refs
Refs are created using React.createRef() and
attached to React elements via ref attribute.
We may not use Refs on function Components
because they do not have instances.

Forwarding Refs is technique for automatically


passing refs from a component to one of its
Children.
• Context API’S?

• What are React HOOKS?

• Why use REDUX?


State management can become hard in complex
applications. REDUX is solution to problem of state
management.

• What are different parts in REDUX?


1) Store- Whole state of your app is stored in an
object tree inside a single store(known as
redux store). Only way to change mutate the
state is dispatch an action.
2) Action: Instead of mutating the state directly,
you specify the mutations you want to happen
with plain JavaScript objects called actions.
3) reducers: Reducers are pure functions which
takes the previous state and an action and
return the new state.
4) Dispatch: Dispatch is function used to
dispatch actions and trigger the state change.
• WEB PROGRAMMING QUESTIONS

1) How to improve Page Performance?


- Minimize HTTP Requests- Reducing the
number of unnecessary request s will speed up
your site.
- Use asynchronous loading for CSS and
JavaScript files: If your scripts load
synchronously they load one at a time, in the
order they appear on the page. If your scripts
load asynchronously on the other hand some of
them will load simultaneously. Loading files
asynchronously can speed up your pages
because when browser loads a page it moves
from top to bottom.
- By Reducing the page size: The smaller your
files the faster they will load. The smaller the
files faster your pages will load. Compressing
files is one of the easiest ways to reduce load
times
- Enable browser caching.
- Lazy Loading
- Use CSS Sprites to reduce HTTP requests. CSS
Sprites is combination of smaller images into
one big image.
Reference:
https://www.webfx.com/blog/web-design/10-ways-to-improve-your-web-page-
performance/

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy