cai-1(click through, http-caching, http transport)

[yorrran]

From

From niuke

Description

选了几个题目来回答，虽然在正式开发的时候很少能用到这些知识，大部分都是在切图，可是对了解语言还是很有意思, 算是给自己的复习

1. Click through div to next element, explain why will it happen?

  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");
  box1.ontouchstart = function(e) {
   console.log('box1 touched');
   box1.style.display = 'none';
  };
  box2.onclick = function() {
   console.log('box2 clicked');
  }

• When on mobile device, user click on box 1, it will toggle both touch start and click.
• When touchstart on box1, box1 will be closed.
• Click event will be toggled with latency of 300ms.
• When click triggered, it will toggle click event on box2.
• This will cause click on box one but click through to box 2.

How to solve

I have met this problem before when i use fabric.js to draw rectangles on the image, the user needs to
explicit click on the area to go in to certain product detail but fabric.js only expose touch api. On mobile,
when user action is scroll, it will toggle both touch and click. Without intention of click but touch on the
click area, user will directly go in into the images.

This problem is different from event bubbling where event bubbling has the relationship of child element. To solve the problem, add preventDefault() to avoid the default action.

  box1.ontouchend = function(event) {
    $event.preventDefault();
  };

2. Explain http-caching

• Each resouce can define its caching policy via Cache-Control HTTP header

  It allows define how long the cache control should cache the response.
  Cache-Control: max-age=120
  It instructs clients to cache it for up to 120 seconds.
  It will follow with validate token to check if the resource has been modified
  Cach-Control: max-age=120
ETag: "x12dff"

• Provide ETag in 'IF-None-Match' HTTP request header.

  Sever will check the token against current resource. If token hasn't change, the server returns a "304
  Not Modified", it tells the browser that the response in cache hasn't change and can be renewed to 120
  second.

3. What is jsonp?

It uses javascript callback with script tag to achieve cors.
localhost: 8081

<script type="text/javascript">
function callback(data) {
 console.log(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:8082/test.js"></script>

localhost:8082 test.js

callback({message:"success"});

Cors in development: Add proxy in web devserver
Cors in production: Nginx proxy pass to access different origins

4. Explain tcp and udp

TCP/IP and UDP/IP refer to tcp and udp over IP.
TCP: TCP will guarantee the package that received by recipient are in order by numbering them. It is
reliable and no data is corrupted or lost in transit. Package will be resended if sender does not receive
correct response from recipient.
UDP: Udp will just send the package without consider about sequence or whether recipient can
receive the packages.
Examples: tcp(Poker game), udp(multiplayer game)