服务端与网络
同源策略
同源是指域名、协议、端口都相等。为了保护用户数据安全而采取的策略
- 无法用
js读取非同源的cookie/localstorage等。防止恶意网站通过js获取用户信息 - 无法用
js获取非同源DOM - 无法用
js发送非同源ajax请求
XsS攻击
XSS为跨站脚本攻击，其原理是攻击者向有XSS漏洞的网站中输入恶意的HTML代码，当用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击目的
解决办法：通过正则表达式过滤掺入参数的HTML标签来防范XSS攻击
服务端渲染
服务端渲染简写SSR，是将组件或页面通过服务器生成html字符串，再发送到浏览器。最后将静态标记混合为客户端上完全交互的应用程序
使用SSR的利弊
- 优势
- 由于服务端渲染返回的客户端已经获取了异步数据并执行
js脚本的最终html,网络爬虫就可以抓取到完整的页面信息，利于SEO - 更利于首屏渲染，普通客户端渲染加载所需文件时间较长，首页就会有一个很长的空白等待时间
- 劣势
- 服务端压力较大
- 开发条件受限
- 学习成本高
图片懒加载和预加载
- 懒加载也叫延迟加载。符合某些条件时，再加载图片
- 预加载：提前加载图片，当用户需要查看时可以从本地缓存中读取
前端性能优化方法
内容优化
- 减少
http请求 - 减少
DNS查询 - 避免重定向
- 让
Ajax可以缓存 - 延迟加载组件
- 预加载组件
- 减少
DOM操作 - 避免使用
iframe - 避免404
CSS优化
- 压缩
css - 避免使用
css表达式 - 选择
link放弃使用import - 把样式表放在顶部
JS优化
- 压缩
js - 去除重复脚本
- 脚本放在底部
图片优化
-
图片大小设置合适
-
使用雪碧图或
base64字符- 相关问题
1、这两个哪个好，为什么 雪碧图可以缓存 base64可以减少请求 2、怎么使用它们 webpack配url-loader(base64) webpack的雪碧图插件webpack-spritesmith -
使用字体图片或者
svg -
避免图片
src属性为空
服务器
- 对
AJAX使用get请求 - 使用
cdn - 添上
Expires或者Cache-ControlHTTP头 - 尽早清空缓存区
- 配置
Etags Gzip组件
GIT
git的一些基本命令
git init
git add
git commit -m
git status
git checkout
git branch
git merge
git push
git fetch
git pull
git remote
浏览器
一个页面从输入url到页面加载显示都发生了什么
网络分层：应用层http https ftp，传输层TCP UDP，网络层ip，网络接口层ARP（在ip地址到对应的硬件地址之间提供映射作用的）
浏览器根据请求的url交给DNS域名解析，拿到真实ip，经历三次握手，向服务器发起请求
服务器交给后台处理完成后返回数据，经历四次挥手，断开链接，浏览器接收文件
浏览器对加载到的资源进行语法解析，建立相应的内部数据结构。载入解析到资源文件，渲染页面，完成
它中途会经历三次握手，四次挥手：
1、第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 SN(c) 。此时客户端处于 SYN_Send 状态。
2、第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN(s)，同时会把客户端的 ISN + 1 作为 ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 *SYN_REVD *的状态。
3、第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 establised 状态。
4、服务器收到 ACK 报文之后，也处于 establised 状态，此时，双方以建立起了链接。
三次握手的作用：
1、确认双方的接受能力、发送能力是否正常。
2、指定自己的初始化序列号，为后面的可靠传送做准备。
四次挥手：
1、第一次挥手：客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于FIN_WAIT1状态。
2、第二次握手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 + 1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT状态。
3、第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
4、第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 + 1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态
5、服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。
重绘与回流
-
重绘
当元素样式的改变不影响布局式，浏览器使用重绘对元素进行更新
-
回流
当元素的尺寸、结构或某些属性改变时，浏览器会重新渲染页面
-
触发回流的操作
页面初次渲染
浏览器窗口大小改变
元素尺寸内容位置发生改变等
-
重绘不一定触发回流，但回流一定触发重绘
浏览器缓存
- 强缓存
浏览器在加载资源时，会先根据本地缓存资源的
header中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
expires和cahe-control.
- 协商缓存
Last-Modify/If-Modify-Since
ETag/If-None-Match
- 总结 当浏览器再次访问一个已经访问过的资源时，它会这样做：
1.看看是否命中强缓存，如果命中，就直接使用缓存了。
2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
4.否则，返回最新的资源。
DNS
步骤：
- 本地
hosts文件 - 本地
DNS缓存 DNS服务器缓存DNS服务器递归查找
描述下cookies sessionstorage localstorage 的区别
-
cookie数据始终在同源的http请求中携带，而另外两个不会自动把数据发给服务器，仅在本地保存 -
cookie的储存大小不能超过4M 而另外两个虽然也有储存限制，但比cookie大得多 -
localstorage浏览器关闭，数据不会被删除。除非自己手动删除sessionstorage浏览器关闭，数据被删除cookie数据在设置的有效期内一直有效
浏览器内核
IE：Trident
谷歌：webkit
火狐：Gecko
Safari：webkit
Opera：Presto
浏览器跨域解决方案
跨域：不同协议、不同端口、不同域名都为跨域
-
CORS解决跨域
主要是后端需要配置，使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，他支持所有类型的HTTP请求
-
JSONP解决跨域
这也主要是后端配置，一般后端设置callback，前端只需要给后端传一个callback就行了。 JSONP解决跨域的原理
- 利用 `script` 标签，规避跨域，`<script src="url">`。
- 在客户端声明一个函数，`function jsonCallback() {}`。
- 在服务端根据客户端传来的信息，查找数据库，然后返回一份字符串。
- 客户端，利用`<script>`标签解析为可运行的`JavaScript`代码，调用 `jsonCallback()` 函数。
缺点：JSONP 是很早很成熟的解决方案，但是，只能进行 GET 请求，无法实现上传数据等操作。
-
通过
document.domain来跨子域
在跨域的两个页面中设置document.domain
-
通过
window.name
在应用页面中创建一个iframe，把src指向另外一个数据页面。数据页面会把数据附加到这个iframe的window.name上。在应用页面监听iframe的onload事件。在此事件中设置这个iframe的src指向本地域的代理文件
-
proxy解决跨域
vue中在config下的index设置proxyTable
react使用npm模块http-proxy-middleware
