1.如何访问一个页面
这个时候如果你说就那么访问啊，那你就是个大傻子，可怜我当时就是那么说的。
- 输入要访问的页面地址（如果已经访问过会在历史里面找出进行智能提示）
- DNS解析。（DNS解析的过程就是寻找哪台机器上有你需要资源的过程。）
- 查找浏览器缓存
- 查找本地缓存（hosts文件查找对应的 ip 地址）
- 查找本地DNS服务器（本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。）
- 查找根DNS服务器
- 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程 注意：只是给出地址，并不帮忙查询出结果
- 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址
- 本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
- TCP连接。
- 三次握手啥啥的。可以去了解一下 （目前我觉得没啥必要的，看个人追求）
- 发送http请求。
- 建立了TCP连接之后，发起一个http请求。（例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法。（GET/POST等等的优缺点））
- 返回http响应。
- 处理完请求，返回 HTTP响应，一个响应报文格式基本等同于请求报文，由响应行、响应头、空行、实体组成
- 浏览器解析渲染页面。
- 浏览器解析HTML文件构建DOM树
- 解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
- 这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。
- DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;
- 当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。
- 页面在首次加载时必然会经历reflow和repain。
- 注意 reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain
- 断开连接。
2.前端性能优化
首先要了解优化的目的：及时响应用户的操作，给用户更好的体验，对于开发者来说优化能够减少页面请求数，能够节省资源。
可以从以下方面考虑：减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化
-
减少请求数量：
- 请求合并：（不进行文件合并隐患：文件与文件之间有插入的上行请求，增加了N-1个网络延迟；受丢包问题影响更严重；经过代理服务器时可能会被断开）但是，文件合并问题（1、首屏渲染问题 2、缓存失效问题 所以，对于文件合并，有如下改进建议：公共库合并2、不同页面单独合并）
- 合理的设置http缓存，恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待得更久
-
减少重定向
- 尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验
- 如果一定要使用重定向，如http重定向到https，要使用 301永久重定向，而不是3 02临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后，每次访问http，会直接返回https的页面
-
减小资源大小
- HTML压缩
- CSS压缩
- JS压缩与混乱
- 图片压缩
-
使用CDN
-
使用DNS预解析
-
资源加载位置
- CSS文件放在head中，先外链，后本页
- JS文件放在body底部，先外链，后本页
- 处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件
- body中间尽量不写style标签和script标签
-
资源加载时机
- 异步script标签（defer:异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似；async: 异步加载，加载完成后立即执行）
- 模块按需加载
- 使用资源预加载preload和资源预读取prefetch（preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度；prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度）
- 资源懒加载与资源预加载
-
减少重绘回流
- 控制CSS层级；避免使用CSS表达式；控制大小；尽量不使用Table；给图片设置尺寸；能使用CSS特效的不实用JS实现等
- 防抖和节流
- 事件代理
-
CSS选择符
- 事实上浏览器对CSS的解析是从右往左解析的效率更高，因为第一个id选择基本上就把查找的范围限定了
-
不使用CSS @import
-
webpack优化
- 打包公共代码
- 动态导入和按需加载
- 剔除无用代码
- 长缓存优化
- 公用代码内联
