前几天同事问了一个问题，用户上传照片成功后回显照片，更改img标签的src属性后dom没有及时更新，例子如下：

1
2
3
4
5
6
7
8
9
10
11

<img :src="url" height="100" width="100"/>
    data()  {
      return {
        url:  ''
      }
    },
    created() {
      setTimeout(() => {
        this.src = 'http://www.xrcloud.net:8777/resource/2018-09-10/152483865313_1536562410312.png'
      }, 500)
    }

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以这时候就应该使用

1
2
3
4

Vue.$nextTick(function () {
  // Code that will run only after the
  // entire view has been rendered
})

上面的代码应该改成：

1
2
3
4
5
6
7

created() {
  setTimeout(() => {
    this.$nextTick(function () {
      this.src = 'http://www.xrcloud.net:8777/resource/2018-09-10/152483865313_1536562410312.png'
    })
  }, 500)
},

具体原理可以查看这篇文章： Vue.nextTick 的原理和用途

二分查找算法的前提是有序数组，查找数据和数组中间的元素相比较，相等就返回数组中间下标，如果不等于则取半继续查找。时间复杂度：O(log₂ n )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 非递归写法 */
function binarySearch(arr, key) {
    let low = 0, high = arr.length - 1
    while (low <= high) {
        let mid = parseInt((low + high) / 2)
        if (key === arr[mid]) {
            return mid
        } else if (key > arr[mid]) {
            low = mid + 1
        } else {
            high = mid - 1
        }
    }
    return -1
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* 递归写法 */
function binary_search(target, arr, low, high) {
    let start = low || 0
    let end = high || arr.length - 1
    if(start > end){
        return -1
    }
    let mid = parseInt((start + end) / 2)
    if (target === arr[mid]) {
        return mid
    } else if (target > arr[mid]) {
        return binary_search(target, arr, mid + 1, end)
    } else {
        return binary_search(target, arr, start, mid - 1)
    }
}

从浏览器发送请求到渲染页面的大致过程来讨论前端优化

1. 输入网址，解析域名，查询是否有DNS缓存
   这阶段前端没有可优化的

2. DNS查询
   减少DNS查询次数（减少域名），比如把css、js等静态文件放在同一个域名下

3. 建立TCP链接
   连接复用、keep-alive，http2.0的多路复用（自行查找资料）

4. 发送http请求
   减少cookie的大小，合理设置cache-control，可以做到一段时内利用缓存，不发送http请求。浏览器遇到页面有几个css或者js的时候会同时发送多个http请求，这个有限制，比如好像ie对一个域名同时最多发4个请求。所以我们可以增加域名，把css等放cdn,这样同时就能发送8个或16个http请求了。但是这种方式又和第二阶段相冲突，这就需要判断项目的实际情况来权衡，引入静态文件过多，就多准备几个域名。

5. 接收响应
   运用ETag技术，可以判断出请求或者资源自上次请求后是否改变过，没改变就返回304，让浏览器去请求缓存，还有压缩技术Gzip,资源传输过程中压缩成Gzip格式，浏览器会自动解压，耗费cpu

6. 接收完成，返回html
   去掉html中的回车、空格、注释等

7. DOCTYPE
   不能不写，不能写错。让浏览器自己去猜会影响渲染速度

8. 逐行解析

9. 看到标签

   …
   减少标签数量（影响不大） ie 页面先显示内容，再渲染样式；Chrome 等样式渲染完后在显示内容

10. 看到css js（下载并行 解析串行，排队挨个解析）
    压缩（去掉空格，变量名一个字符）
    CDN内容分布网络（主要技术）
    css 阻塞看浏览器心情，js是一定会阻塞，所以css放head：尽早下载css，让用户尽早看到页面，js放body后： 尽早显示页面，能获取dom节点，就算js没解析完，按钮点不动，影响也不大

1. 软件开发是一项复杂的工程，不能只理解成编码。确定需求->架构设计->实现需求->测试发布。

2. 隐喻，也就是软件工程中的建模。

3. 关注质量，前期准备的重要性。‘架构师吃掉需求，设计师吃掉架构，程序员消化设计。’我们程序员只是软件开发中的一环。如果需求不确定，后期再修改，重新设计，重新编码，花费的代价是前期的几十上百倍。所以我们前期应该确定好需求，设计好架构，再进行编码。当然，需求不可能是一成不变的。我们应该在开发中留有应对需求变更的方法，比如演进交付法：小块小块的开发交付，获得反馈，再构建。

4. 确定编程语言和所用框架，了解其优缺点，约定语言规范。

5. 管理复杂度，迭代设计试错，确定软件架构，分析模块，显示什么，隐藏什么。

6. 类是管理复杂度的首选工具，类的接口要保持一致的抽象，隐藏其中的一些信息，只提供操作方法，包含比继承更好，继承增加了复杂度。

7. 子程序提高程序的可管理性，可读性更高，易于修改，比较可靠。但是必须要有一个好的命名。

8. 统一处理异常。

9. 编写伪代码来确定业务逻辑，便于寻找最佳方案。伪代码可能成为程序注释。

10. 数据初始化，变量名必须具体，便于阅读而不是便于编写，团队命名规则必须统一（驼峰？下划线。。。），确定变量的作用域，避免使用全局变量。

11. 熟悉所用语言的基本类型，正确运用其特性。javascript: number、string、null、undefined、object、boolean、 symbol

12. 控制语句if-else、switch注意把概率高的事件放前边。

13. 软件质量、协同工作、测试、调试等工作,只要前期确定好开发规范，架构合理，后期的工作将不会很难。

14. 修改代码百分百会遇到，重构代码的最好时机是开发阶段，要想重构比较轻松，就保证编写代码的质量。

15. 注释应该说出代码无法说出的东西，注释多不等于代码好，好的代码根本不需要注释。

16. 大项目拆分模块，小项目掌控全局，都要用心去对待，编写高质量的代码。

开发项目时，前后端数据交互会产生跨域问题。这是保障数据数据安全，不然其他地方都能调用支付宝、银行的接口进行转账，支付了。

跨域产生的原因：

1. 浏览器限制，同源策略：不在同一个局域网，协议、域名、端口不同
2. XmlHttpRequest请求（json请求就不会产生跨域）

解决跨域可以从两个方面入手：

1. 服务端允许跨域
2. 调用方隐藏跨域请求

具体方法：

1. 服务端添加允许跨域的代码，比如在filter里添加请求头的相关代码(response.setHeader()方法),常用
2. 浏览器设置允许跨域，开发时可以，上线了不行
3. 不用xhr请求，比如jsonp(缺点只有get请求)
4. 中间服务器Nginx或apache配置代理请求
5. springboot 注解@CrossOrigin