笔记

代码重构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XO56tAfI-1589971833570)(C:\Users\wanglei\AppData\Roaming\Typora\typora-user-images\1589010837908.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-65kEqSAI-1589971833643)(C:\Users\wanglei\AppData\Roaming\Typora\typora-user-images\1589022076208.png)]

项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1x5vBuLB-1589971833647)(C:\Users\wanglei\AppData\Roaming\Typora\typora-user-images\1588955408055.png)]

*单页面应用首屏加载慢

  • Vue-router懒加载

Vue-router懒加载就是按需加载组件,只有当路由被访问时才会加载对应的组件,而不是在加载首页的时候就加载,项目越大,对首屏加载的速度提升得越明显。

  • 使用CDN加速

在做项目时,我们会用到很多库,采用cdn加载可以加快加载速度。

  • 异步加载组件
  • 服务端渲染

服务端渲染还能对seo优化起到作用,有利于搜索引擎抓取更多有用的信息(如果页面纯前端渲染,搜索引擎抓取到的就只是空页面)

*单页面多页面区别

单页面的优点:

1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小

2,前后端分离

3,页面效果会比较炫酷(比如切换页面内容时的专场动画)

单页面缺点:

1,不利于seo

2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

3,初次加载时耗时多

4,页面复杂度提高很多

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fayFxEn5-1589971833651)(C:\Users\wanglei\AppData\Roaming\Typora\typora-user-images\1588213585241.png)]

*单页面实现前进后退

1.前进:
history.forward();
history.go(1);
2.后退:
history.back();
history.go(-1);

3.获取记录个数:
history.length:

webpack

打包流程及原理

treeshaking

多页打包

优化

跨域

*为什么AJAX不能跨域访问?

在网页中写了一段js代码,使用ajax向淘宝发起登陆请求,因为很多数人都访问过淘宝,所以电脑中存有淘宝的cookie,不需要输入账号密码直接就自动登录了,然后小黑在ajax回调函数中解析了淘宝返回的数据,得到了很多人的隐私信息。

*同源策略

同源政策:不是同协议 同域名 同端口 的网页无法相互访问。

用form表单提交到不同源的网页是被允许的,因为 form 提交到另一个域名之后,原页面的脚本无法获取新页面中的内容,所以浏览器认为这是安全的。

而 AJAX 是可以读取响应内容的,因此浏览器不能允许你这样做。如果你细心的话你会发现,其实请求已经发送出去了,你只是拿不到响应而已。

所以浏览器这个策略的本质是,一个域名的 JS ,在未经允许的情况下,不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

同源策略限制内容有:

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 请求发送后,结果被浏览器拦截了

但是有三个标签是允许跨域加载资源:

你可能感兴趣的:(面试)