UI Developer / Lead / Architect Interview Question and Answers
1) SASS vs LESS which is better ?
SASS is better and more reliable, flexible and most of the modern JS frameworks are using SASS for more feature availability.
2) List 4 types of memory leaks of JS ?
— Unnecesseary Global Variables
— Unused Functions ex: timers
— Unnecesseary DOM reference elements
— Improper Closures
— Manage Garbae collection wherever required
3) backward compatibility for libraries how to manage ?
Shared dependencied must be defined in peerDependencies package attribute.
When both your project and some module you are using depend on the same libraries but different versions than you should define
project level library dependency in “peerDependencies” section of the package.json to avoid conflicts of multiple version libraries.
So project dependency library installed in main folder and module specific dependency library will be installed within the module folder
so it will avoid the conflicts.
4) profiling of pages ?
For web page loading in a browser it has to wait for
Initialization (DNS resolution, TCP connection, proxy, and SSL negotiation),
Server rendering,
Data transfer,
and
page rendering in the browser
A web page is composed from many resources besides the main contents that the browser has to resolve
and load (JavaScripts and stylesheets).
Then it needs to build the DOM tree from the HTML and execute any needed JavaScript
Server side performance can be improved by improving the infrastructure
such as no: of clusters/servers, CPU, memory, bandwidth, location etc..
Client side performance can be improved by following parameters/criteria :
HTTP optimizations -> by Network optiomaizations like DNS/TCP/SSL connections, browser preloaders , Resource Loading time, Content loading time
HTML and JavaScript loading optimizations -> Google RAIL model
Response (user interface): Tap to paint in less than 100ms;
Animation: Layout rendering should take less than 16ms per frame;
Idle: Use idle time to compute some work in chunks of 50ms;
Load: The page should be fully loaded in less than 1000ms.
Stylesheets optimizations ->
Minify and Compress your files
Remove unused CSS rules
Optimize the CSS critical path
Analyze Stylesheets complexity
Image caching / sprite images
Use CDN
use Cache control expires
Gzip the componets for reduce load
Stylesheets at TOP / Scripts at Bottom
Remove duplicate code/scripts
Use ETags for browser caching
Profiling tools like : pingdom, google pagespeedtest to implement and optimize the suggestions
5) how to make lightweight UI ?
Color minimalism
Operation simplification with the minimal steps of operation
Layered interface with flat design and skeumorphism
Micro-interaction like “pull-down refresh”,”add to shopping cart”, etc.
6) How to make Data processing better & faster ?
For JS Frameworks
— Caching Your App data with cache layers like memcached, Redis etc..
— Multi clustering of Data / Application for faster proecessing
— All data processing queries are Optimized
— Check All Error in the Scripts by Logging and make all error scenarios are handled
For Angular
— Use Batarang tool to debug and fix any performance issue
— Chrome Dev Tool Profiler to Identify Performance Bottlenecks
— Use console.time for Debugging Issues
— Use ng-if or ng-switch instead of ng-show
The ng-show directive toggles the CSS display property on a particular element, while the ng-if directive actually removes the element from DOM and re-creates it if needed.
— Avoid using ng-repeat
— Overuse of the ng-repeat directive can drastically drive down performance.
— Lower the number of elements that get looped over by implementing pagination or infinite scroll. AngularJS even has a directive called ngInfiniteScroll for that purpose.
7) what is STRICT mode in JS ?
“use strict”; Defines that JavaScript code should be executed in “strict mode” so it will make “bad syntax” into real errors.
Using a variable, without declaring it, is not allowed:
Using an object, without declaring it, is not allowed:
Deleting a variable (or object) is not allowed.
Deleting a function is not allowed.
Duplicating a parameter name is not allowed:
Octal numeric literals are not allowed:
Octal escape characters are not allowed:
Writing to a read-only property is not allowed:
Writing to a get-only property is not allowed:
Deleting an undeletable property is not allowed:
The string “eval” cannot be used as a variable:
The string “arguments” cannot be used as a variable:
The with statement is not allowed:
For security reasons, eval() is not allowed to create variables in the scope from which it was called:
In function calls like f(), the this value was the global object. In strict mode, it is now undefined.
Keywords reserved for future JavaScript versions can NOT be used as variable