This is a collection of some common questions and techniques that a front-end software developer must knows.
1. A page contains two divs. Write css to keep the left div width fixed while the right div responsive to the window width.
Answer: See code at two_divs.html and two_divs2.html
Answer:
- Reduce dom operations
- Compress images/codes before deploy
- Optimize JS code stucture, clear redundant code
- Reduce http requests, set HTTP cache wisely
- Speed up using CDN
- Cache static resources
- Lazy load images Article about LazyLoad
Answer:
- Browser starts looking for IP address
- Details for DNS lookup: browser cache -> system cache -> router cache
- Browser sends a HTTP request to web server
- Web server 301 permanent redirect Article about 301 redirect
- Browser track redirect address
- Web server handles request
- Webs server sends back a HTTP response
- Browser displays HTML
- Broswer send requests to fetch assests in HTML(images, sounds, videos, css, js)
- Browser send async requests
Answer:
- HTTP Access control(CORS) Article about CORS
- Set HttpOnly in cofig
Answer:
Article about repaint and reflow
- change className directly. If to change css dynamicly, use cssText
- Let DOMs do "offline" operation, then group-update at one time.
el.style.cssText +=";
left: "+left+"px;
top: " +top+"px;";
Answer:
- jsonp
- modify document.domain
- use window.name
- window.postMessage
- CORS needs server config header: Access-Control-Allow-Origin
- nginx reverse proxies
Answer:
- Develop rules
- Modules
- Components
- Components warehouse
- Optimization
- Deploy
- Develop flow
- Develop tool
Answer:
var arr = [1,2,3,[4,[5,6],7]];
const flatten = arr => arr.reduce((a,b)=> a.concat(Array.isArray(b)?flatten(b):b),[]);
var result = flatten(arr);
Answer:
1. $.extend(true, target, object)
2. newobj = Object.create(sourceObj)
3. newobj = JSON.parse(JSON.stringify(sourceObj))
See code at img_preview folder
Answer:
- Block onload events
- Search engine cannot read iframes. Not good for SEO
- Iframes share connection-pool with index page and slows down the parallel loading of pages
- Use javascript to dynamic assign src to avoid the above two problems.
The folder frontend_advanced contains sample JS to demonstrate key topics such as execution context, variable hoisting, closure, this, and many to come.