番外篇01：angularJS最佳实战

1. 项目组织方式

• ng-strict-di：严格依赖注入模式。

  • 在angularJS中，若是要使用模块中的内容，只要提供相关模块的名称便可，不须要本身查找、建立、初始化等等，就能够直接获得须要注入的模块进行使用，这种方式即所谓的依赖注入。
  • 可是在JS代码压缩混淆(minify/uglify)的时候，参数的名称会被压缩成一个字母，致使参数的名称发生变化，进而致使注入的失败；
  • 因此，AngularJS推荐使用将模块名和函数写在同一个数组中，并将模块名写在函数以前；ng-strict-di指令的做用就是，强制项目代码使用这种严格的风格，若是不是就会报错，进而保证，依赖注入的正确性。

2. 性能优化

• 浏览器预加载：DNS prefetch——提早加载域名解析，省去域名解析时间；

  • chrome会自动把当前页面全部带href的link都作一次dns prefetch；但a标签的href再https下不起做用，须要meta属性强制开启；
  • 须要手动添加link的场景是：开发者预计用户在后面的访问中须要用到连接在当前页面全部link中都没有包含；
  • chromium官方文档中说明，chrome会使用8个线程专门作DNS Prefeatching，chrome自己并不作dns记录的cache，而是直接从操做系统读DNS；即，直接修改系统host的dns记录或者host是会影响chrome的；
  • 合理的使用dns prefetch是能对页面性能带来50ms~~300ms的提高；
  • 手动 dns prefetching 的代码实际上仍是会增长html的代码量的，特别是域名多的状况下。因此，最优的方案应该是：经过js初始化一个iframe异步加载一个页面，而这个页面里包含本站全部的须要手动dns prefetching的域名。

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

• 跨域资源权限：跨域img、js引用容许 crossorigin="anonymous"

  • 容许网站对跨域脚本、图片的引用：出于安全策略(即同源策略)，正常状况下浏览器是不容许跨域资源的引用，当浏览器尝试加载不属于当前域的脚本时，跨域脚本知会返回Script error；
  • 最新HTML5规定，是容许获取不属于当前域的脚本资源，但必须知足两个条件：①跨域脚本的服务器必须经过Access-Control-Allow-Origin头信息容许当前域名能够获取错误信息；②当前域名的script标签必须指明src属性指定的地址是跨域支持的，也就是crossorigin属性：以下

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

参考文献：

1. DNS Prefetching的两三事
2. 预加载系列一：DNS Prefetching 的正确使用姿式
3. HTML5 script 标签的 crossorigin 属性到底有什么用？