前端面试题平时总结

清疚 2023-01-14 12:58 82阅读 0赞

1、浏览器缓存有哪些，通常缓存有哪几种

1、http缓存是基于HTTP协议的浏览器文件级缓存机制。
    2、websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现
    3、indexDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API
    4、Cookie一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）
    5、Localstoragehtml5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度
    6、Sessionstorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。
    7、application cache 是将大部分图片资源、js、css等静态资源放在manifest文件配置中
    8、cacheStorage是在ServiceWorker的规范中定义的，可以保存每个serverWorker申明的cache对象
    9、flash缓存 这种方式基本不用，这一方法主要基于flash有读写浏览器端本地目录的功能

2、谷歌浏览器的核心是？

使用Blink内核。

3.前端怎么解决跨域

1、 通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享（CORS）
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域

4 cookies和localstorage sessionStorage区别  
[问题][Link 1]  
https://blog.csdn.net/weixin\_42614080/article/details/90706499

5 优雅降级和渐进增强

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
    
    　　渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    
    　　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
    
    　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
    
     
    
    “优雅降级”观点
    
    “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
    
    在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
    
     
    
    “渐进增强”观点
    
    “渐进增强”观点则认为应关注于内容本身。
    
    内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

6 ajax原理  
https://blog.csdn.net/weixin\_37580235/article/details/81459282  
[解释很清楚][Link 2]

7 常见的状态码

200 表示从客户端发来的请求在服务器端被正常处理了。
    204 表示请求处理成功，但没有资源返回。
    301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。
    302 表示临时性重定向。
    304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）
    400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
    401 表示未授权（Unauthorized)，当前请求需要用户验证
    403 表示对请求资源的访问被服务器拒绝了
    404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
    500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
    503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

8 GET和POST请求数据区别

使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面
    使用Get请求发送数据量小,Post请求发送数据量大
    使用Get请求安全性低，会被缓存，而Post请求反之

9 HTML5的离线储存怎么使用，工作原理能不能解释一下

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
    
    原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
    
    如何使用
    
    页面头部像下面一样加入一个manifest的属性；
    在cache.manifest文件的编写离线存储的资源
    在离线状态时，操作window.applicationCache进行需求实现

10 . 介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎和js引擎。
    
    渲染引擎是负责取得网页的内容（html，xml，图像等），整理讯息（比如加入css等），以及计算网页的显示方式，然后会输出到显示器或者打印机。浏览器的内核不同，对网页语法的解释也就不同，渲染效果就不同。所有的浏览器等以及需要编辑，显示网络内容的应用程序都需要内核。
    js引擎：则用来解析JavaScript来实现网页的动态效果
    最开始这两个引擎区分的不是很明确，后来js引擎越来越独立，内核就倾向于只指渲染引擎

11 iframe有那些缺点

iframe的优点：
    1.iframe能够原封不动的把嵌入的网页展现出来。
    2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
    3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
    4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
    
    
    iframe的缺点：
    1.会产生很多页面，不容易管理。
    2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
    3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
    4.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
    5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
    分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

[Link 1]: https://blog.csdn.net/weixin_42614080/article/details/90706499
[Link 2]: https://blog.csdn.net/weixin_37580235/article/details/81459282