前端优化(不含框架优化策略)
参考回答
降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。
加快请求速度:预解析 DNS,减少域名数,并行加载,CDN 分发。
缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。
渲染:JS/CSS 优化,加载顺序,服务端渲染,pipeline。
GET 和 POST 的区别
参考回答
get 参数通过 url 传递,post 放在 request body 中。
get 请求在 url 中传递的参数是有长度限制的,而 post 没有。
get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。
get 请求只能进行 url 编码,而 post 支持多种编码方式
get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。
GET 和 POST 本质上就是 TCP 链接,并无差别。但是由于 HTTP 的规定和浏览器/服务器 的限制,导致他们在应用过程中体现出一些不同。
GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。
如何画一个三角形
参考回答
div {
width:0px;
height:0px;
/* 想要那个方向的三角形,就设置他的反方向不为透明即可 */
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
在地址栏里输入一个 URL,到这个页面呈现出来,中间会发生什么?
参考回答
输入 url 后,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻 找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存-》系统缓存-》路由 器缓存,缓存中没有则查找系统的 hosts 文件中是否有记录,如果没有则查询 DNS 服务 器,得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号,构造一个 http 请 求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数 据,并将这个 http 请求封装在一个 tcp 包中,这个 tcp 包会依次经过传输层,网络层, 数据链路层,物理层到达服务器,服务器解析这个请求来作出响应,返回相应的 html 给浏览器
因为 html 是一个树形结构,浏览器根据这个 html 来构建 DOM 树,在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接,则会停止构建 DOM 树来执行和下载 相应的代码,这会造成阻塞,这就是为什么推荐 JS 代码应该放在 html 代码的后面,之 后根据外部样式,内部样式,内联样式构建一个 CSS 对象模型树 CSSOM 树,构建完成 后和 DOM 树合并为渲染树(render树),这里主要做的是排除非视觉节点,比如 script,meta 标签和 排除 display 为 none 的节点,之后进行布局,布局主要是确定各个元素的位置和尺寸, 之后是渲染页面
因为 html 文件中会含有图片,视频,音频等资源,在解析 DOM 的过 程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一 般是 4-6 个,当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别 在于 Cache-Control 使用相对时间,Expires 使用的是基于服务器 端的绝对时间,因为存 在时差问题,一般采用 Cache-Control,在请求这些有设置了缓存的数据时,会先 查看 是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修 改,如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给 服务器校验,如果一致,继续校验 Last-Modified,没有设置 ETag 则直接验证 Last-Modified,再决定是否返回 304。
csrf 和 xss 的网络攻击及防范
参考回答
CSRF:跨站请求伪造,可以理解为攻击者盗用了用户的身份,以用户的名义发送了恶 意请求,比如用户登录了一个网站后,立刻在另一个tab页面访问量攻击者用来制造 攻击的网站,这个网站要求访问刚刚登陆的网站,并发送了一个恶意请求,这时候 CSRF 就产生了,比如这个制造攻击的网站使用一张图片,但是这种图片的链接却是可以修改 数据库的,这时候攻击者就可以以用户的名义操作这个数据库,防御方式的话:使用验 证码,检查 https 头部的 refer,使用 token;
XSS:跨站脚本攻击,是说攻击者通过注入恶意的脚本,在用户浏览网页的时候进行攻 击,比如获取 cookie,或者其他用户身份信息,可以分为存储型和反射型,存储型是攻 击者输入一些数据并且存储到了数据库中,其他浏览者看到的时候进行攻击,反射型的 话不存储在数据库中,往往表现为将攻击代码放在 url 地址的请求参数中,防御的话为 cookie 设置 httpOnly 属性,对用户的输入进行检查,进行特殊字符过滤。
怎么看网站的性能如何
参考回答
检测页面加载时间一般有两种方式,一种是被动去测:就是在被检测的页面置入脚本或 探针,当用户访问网页时,探针自动采集数据并传回数据库进行分析
另一种主动监测的方式,即主动的搭建分布式受控环境,模拟用户发起页面访问请求,主动采集性能数 据并分析,在检测的精准度上,专业的第三方工具效果更佳,比如说性能极客。