前端事件流

事件流程如下:

  1. 捕获阶段:事件从根元素开始向触发事件的目标元素进行传递,传递过程中,如果中间有元素注册了事件处理函数,并且 useCapture 参数值为 true ,那么此事件处理函数就会执行,IE9+和其他标准浏览器支持。

  2. 目标阶段:触发目标元素对应事件,并执行注册的事件处理函数。

  3. 冒泡阶段:从目标元素开始向根元素传递,传递过程中,如果中间有元素注册了事件处理函数,且 useCapture 值为 false,此事件处理函数就会执行。

什么是闭包?这就是闭包!

有权访问另一个函数作用域内变量的函数都是闭包。

HTTP缓存机制和原理

  1. 强制缓存

    https://jangdelong.github.io/blog_img/images/1.png

    (1) Expires

    Expires 的值为服务端返回的到期时间,即下一次请求时,请求时间小于服务端返回的到期时间,直接使用缓存数据。

    不过 Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用 HTTP 1.1,所以它的作用基本忽略。

    另一个问题是,到期时间是由服务端生成的,但是客户端时间可能跟服务端时间有误差,这就会导致缓存命中的误差。

    所以HTTP 1.1 的版本,使用Cache-Control替代。

    (2) Cache-Control

    Cache-Control 是最重要的规则。常见的取值有 private、public、no-cache、max-age,no-store,默认为 private。

    • private: 客户端可以缓存
    • public: 客户端和代理服务器都可缓存(前端的同学,可以认为 public 和 private 是一样的)
    • max-age=xxx: 缓存的内容将在 xxx 秒后失效
    • no-cache: 需要使用对比缓存来验证缓存数据(后面介绍)
    • no-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发(对于前端开发来说,缓存越多越好,so…基本上和它说886)
  2. 对比缓存

    https://jangdelong.github.io/blog_img/images/2.png

    (1) Last-Modified / If-Modified-Since

    • Last-Modified:

      服务器在响应请求时,告诉浏览器资源的最后修改时间。

      https://jangdelong.github.io/blog_img/images/3.png

    • If-Modified-Since:

      再次请求服务器时,通过此字段通知服务器上次请求时,服务器返回的资源最后修改时间。
      服务器收到请求后发现有头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。
      若资源的最后修改时间大于 If-Modified-Since,说明资源又被改动过,则响应整片资源内容,返回状态码 200;

      若资源的最后修改时间小于或等于 If-Modified-Since,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用所保存的cache。

      https://jangdelong.github.io/blog_img/images/4.png

      (2) Etag / If-None-Match (优先级高于Last-Modified / If-Modified-Since)

    • Etag:

      服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。

      https://jangdelong.github.io/blog_img/images/5.png

    • If-None-Match:

      再次请求服务器时,通过此字段通知服务器客户段缓存数据的唯一标识。

      服务器收到请求后发现有头 If-None-Match 则与被请求资源的唯一标识进行比对,
      不同,说明资源又被改动过,则响应整片资源内容,返回状态码 200;

      相同,说明资源无新修改,则响应 HTTP 304,告知浏览器继续使用所保存的 cache。

      https://jangdelong.github.io/blog_img/images/6.png

defer 和 async

  1. defer

如果 script 标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续 DOM 的渲染;

如果有多个设置了 defer 的 script 标签存在,则会按照顺序执行所有的 script;

defer 脚本会在文档渲染完毕后,DOMContentLoaded 事件调用前执行。

  1. async

async 的设置,会使得 script 脚本异步的加载并在允许的情况下执行;
async 的执行,并不会按着 script 在页面中的顺序来执行,而是谁先加载完谁执行。

使用 js 的 FileReader对象实现上传图片时的图片预览功能

废话不多说线上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<title>test</title>
<script>
  // 选择图片时预览功能
function imageshow(source) {
var file = source.files[0];
var imageid = source.id;
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function (e) {
document.getElementById("portrait"+imageid).src = e.target.result;
};
fr.readAsDataURL(file);
}
    document.getElementById("image"+imageid).style.display="none";
document.getElementById("show"+imageid).style.display="block";
   }
</script>
</head>

<body>
<div>
<div id="image1" >
<p>上传截图</p>
<input type="file" name="screenshot1" id="1" onchange="imageshow(this)"/>
</div>

 <div id="show1" style="display:none;">
  <img src="" id="portrait1" width="100" height="70">
 </div>

 <div id="image2">
<p>上传截图</p>
<input type="file" name="screenshot2" id="2" onchange="imageshow(this)"/>
</div>

 <div id="show2" style="display:none;">
  <img src="" id="portrait2" width="100" height="70">
 </div>

<div id="image3">
<p>上传截图</p>
<input type="file" name="screenshot3" id="3" onchange="imageshow(this)"/>
</div>

<div id="show3" style="display:none;">
  <img src="" id="portrait3" width="100" height="70" >
 </div>
</div>
</body>
</html>

HTTPS 验证原理

https 在真正请求数据前,先会与服务有几次握手验证,以证明相互的身份,以下图为例

https://jangdelong.github.io/blog_img/images/front-end-notes/7.png

性能优化

  • 减少请求数量(sprite、combo)
  • 善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
  • 减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
  • CSS的回流与重绘