01:angularjs Best Combat

1. How the project is organized

• ng-strict-di: strict dependency Injection mode.

  • In Angularjs, if you want to use the contents of the module, as long as you provide the name of the relevant module, you do not need to find, create, initialize and so on, you can directly get the need to inject the module to use, this way is called Dependency injection .
  • However, when the JS code compression Confusion (minify/uglify), the name of the parameter will be compressed into a letter, resulting in the name of the parameter changes, resulting in the failure of injection;
  • Therefore, ANGULARJS recommends that the module name and function be written in the same array, and that the module name be written before the function; ng-strict-di the role of the directive is to force the project code to use this strict style, if not will be error, and then ensure that the correctness of dependency injection.

2. Performance optimization

• Browser pre-load: DNS prefetch--pre-load domain name resolution, eliminating the time domain name resolution;

  • Chrome will automatically make the current page all href the link to the DNS prefetch, but the href of a tag does not work under HTTPS, need to force the meta-attribute to open;
  • The scenario where you need to add the link manually is that the developer expects the link to be used in the subsequent visit that is not included in all links in the current page;
  • Chromium official documentation, Chrome will use 8 threads specifically DNS Prefeatching , chrome itself does not do DNS record cache, but directly from the operating system read DNS, that is, directly modify the system host DNS records or host will affect Chrome ；
  • Reasonable use of DNS prefetch is able to bring 50ms~~300ms to the performance of the page;
  • Manual DNS prefetching code actually increases the amount of code in the HTML, especially if the domain name is many. Therefore, the optimal solution should be: through the JS initialization of an IFRAME asynchronously loading a page, and this page contains all the site needs to manually DNS prefetching domain name.

<meta http-equiv="x-dns-prefetch-control" content="on"> // 强制开启浏览器 DNS Prefetch功能<link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> // 强制查询特定主机 DNS

• Cross-domain resource permissions: cross-domain img, JS reference allowcrossorigin="anonymous"

  • Allow Web sites to reference cross-domain scripts, pictures: For security policy (that is, the same origin policy), normally the browser is not allowed cross-domain resource reference, when the browser tries to load the script that does not belong to the current domain, the cross-domain script is known to return Script error ;
  • The latest HTML5 rule is to allow the acquisition of script resources that are not part of the current domain, but must meet two criteria: ① cross-domain script server must Access-Control-Allow-Origin allow the current domain name to obtain error information through the header information; ② the label of the current domain name script must indicate that the src address specified by the attribute is cross-domain supported. This is the crossorigin attribute:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"    crossorigin="anonymous"></script>

Reference documents:

1. Two or three things for DNS prefetching
2. Pre-load Series one: the correct use posture of DNS prefetching
3. What exactly is the Crossorigin attribute of the HTML5 script tag?

01:angularjs Best Combat