前端的认知与见解
Posted sweet-ice
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端的认知与见解相关的知识，希望对你有一定的参考价值。
你遇到过比较难的技术问题是？你是如何解决的？
在vue router 后面的参数变化不会引起视图的更新。
（用watch 来监控路由的变化）
vue里对象属性的增加或者删除也不会引起视图的更新。
（ 用this.$set() ）
浏览器兼容问题
对前端界面工程师这个职位是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
1、前端页面有哪三层构成，分别是什么？作用是什么？
a. 结构层：由 html 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
2、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
3、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
4、浏览器本地存储
在HTML5中提供了sessionStorage和localStorage.
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
5、web storage和cookie的区别
a. Cookie的大小是受限的
b. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
c. cookie还需要指定作用域，不可以跨域调用
d. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
e. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
f. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
6、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
7、WEB应用从服务器主动推送Data到客户端有那些方式？
a. html5 websoket
b. WebSocket 通过 Flash
c. XHR长时间连接
d. XHR Multipart Streaming
e. 不可见的Iframe
f. <script>标签的长时间连接(可跨域)
8、请解释一下 javascript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
9、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
10、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
11、
请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
12、
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
13、
iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
以上是关于前端的认知与见解的主要内容，如果未能解决你的问题，请参考以下文章