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 属性到底有什么用?
内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!