add file:页面性能优化（前一半）

2018-03-10 23:14:00 +08:00 · 2018-03-10 23:14:00 +08:00 · 303a705ce9
commit 303a705ce9
parent 9e1121d7c5
2 changed files with 238 additions and 1 deletions
--- a/06-前端基础/14-页面性能优化.md
+++ b/06-前端基础/14-页面性能优化.md
@ -0,0 +1,228 @@
+
+
+## 前言
+
+提升页面性能优化的方法有哪些：
+
+- 1、资源压缩合并，减少http请求
+
+- 2、**非核心代码异步加载** --> 异步加载的方式 --> 异步加载的区别
+
+如果回答出`非核心代码异步加载`，就会层层深入。
+
+- 3、利用浏览器缓存  --> 缓存的分类  --> 缓存的原理
+
+**缓存**是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】
+
+有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。
+
+- 4、使用CDN
+
+浏览器第一次打开页面时，缓存是起不了作用的。CDN这一条，一定要说出来。
+
+- 5、DNS预解析
+
+
+## 一、资源压缩合并，减少http请求
+
+- 合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
+
+- 图片较多的页面也可以使用 lazyLoad 等技术进行优化。
+
+- 精灵图等
+
+## 二、非核心代码异步加载
+
+异步加载的方式：（这里不说框架，只说原理）
+
+- 动态脚本加载
+
+- defer
+
+- async
+
+
+### 动态脚本加载
+
+使用document.createElement创建一个script标签，即`document.createElement('script')`，然后把这个标签加载到body上面去。
+
+参考链接：
+
+- [javascript 异步加载](https://www.jianshu.com/p/13cf23a90328)  动态脚本加载的那部分代码，看不太懂。
+
+
+### defer
+
+通过异步的方式加载defer1.js文件：
+
+```html
+    <script src="./defer1.js" defer></script>
+```
+
+
+
+### async
+
+> HTmL5新增特性。
+
+通过异步的方式加载async1.js文件：
+
+
+```html
+    <script src="./async1.js" async></script>
+```
+
+### defer和async的区别
+
+- defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。
+
+- async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。
+
+
+代码举例：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <!--通过异步的方式引入两个外部的js文件-->
+    <script src="./defer1.js" defer></script>
+    <script src="./defer2.js" defer></script>
+</head>
+
+<body>
+<script>
+    console.log('同步任务');
+</script>
+</body>
+
+</html>
+```
+
+上方打印的结果是：
+
+```
+同步任务
+defer1
+defer2
+
+```
+
+因为defer的加载是有顺序的，所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载，打印的结果可能是：
+
+```
+同步任务
+async2
+async1
+```
+
+
+参考链接：
+
+- [浅谈script标签的defer和async](https://segmentfault.com/a/1190000006778717)
+
+
+
+
+## 三、利用浏览器缓存
+
+
+**缓存**：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。
+
+
+缓存分为：
+
+- 强缓存
+
+- 协商缓存
+
+
+### 强缓存
+
+**强缓存**：不用请求服务器，直接使用本地的缓存。
+
+强缓存是利用 http 响应头中的`Expires`或`Cache-Control`实现的。
+
+浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：
+
+20180310_2310.png
+
+
+**注意**：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires和Cache-Control同时存在时，Cache-Control的优先级高于Expires。
+
+下面讲一下二者的区别。
+
+
+1、**`Expires`**：绝对时间。
+
+
+
+
+
+
+
+
+### 协商缓存
+
+
+**协商缓存**：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。
+
+
+
+参考链接：
+
+- [浏览器缓存知识小结及应用](https://www.cnblogs.com/lyzg/p/5125934.html)[荐]
+
+
+
+
+## 四、使用CDN
+
+怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，另外就是CDN。
+
+要注意，浏览器第一次打开页面的时候，浏览器缓存是起不了作任何用的，使用CDN，效果就很明显。
+
+## 五、DNS预解析（dns-prefetch）
+
+通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
+
+### 第一步：打开和关闭DNS预解析
+
+你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：
+
+```html
+	<meta http-equiv="x-dns-prefetch-control" content="on">
+```
+
+需要说明的是，在一些高级浏览器中，页面中所有的超链接（`<a>`标签），默认打开了DNS预解析。但是，如果页面中采用的https协议，很多浏览器是默认关闭了超链接的DNS预解析。如果加了上面这行代码，则表明强制打开浏览器的预解析。（如果你能在面试中把这句话说出来，则一定是你出彩的地方）
+
+### 第二步：对指定的域名进行DNS预解析
+
+
+如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 <head> 标签中加入以下内容：
+
+```html
+	<link rel="dns-prefetch" href="http://www.smyhvae.com/">
+```
+
+当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。
+
+参考链接：
+
+- [前端性能优化 - 资源预加载](http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/)[荐]
+
+- [DNS预解析详解](https://www.xuanfengge.com/dns-prefetching-analysis.html)
+
+
+
+
+
+
+
+
+
--- a/06-前端基础/21-面经推荐.md
+++ b/06-前端基础/21-面经推荐.md
@ -13,4 +13,13 @@

 - [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/)

-作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。
+作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。
+
+作者说，性能优化和ES6，是必问的。
+
+
+
+- [2018年web前端经典面试题及答案](https://www.cnblogs.com/wdlhao/p/8290436.html)
+
+写得很长啊。
+