撩课-Web大前端每天5道面试题-Day7
时间:2018-12-10
本文章向大家介绍撩课-Web大前端每天5道面试题-Day7,主要包括撩课-Web大前端每天5道面试题-Day7相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 你能描述一下渐进增强和优雅降级之间的不同吗?
定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressive enhancement): 一开始只构建站点的最少特性, 然后不断针对各浏览器追加功能。 优雅降级和渐进增强都关注于同一网站 在不同设备里不同浏览器下的表现程度。 区别: “优雅降级”观点认为应该针对那些最高级、 最完善的浏览器来设计网站。 而将那些被认为“过时”或有功能缺失的浏览器下 的测试工作安排在开发周期的最后阶段,并把测试 对象限定为主流浏览器(如 IE、Mozilla 等)的 前一个版本。 “渐进增强”观点则认为应关注于内容本身。 总结: "优雅降级"就是首先完整地实现整个网站, 包括其中的功能和效果. 然后再为那些无 法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验 却不至于完全失效。 "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及 完整内容, 然后再以无侵入的方法向页面增加无 害于基础浏览器的额外样式和功能。 当浏览器升级时, 它们会自动呈现并发挥作用。
2. 请说说浏览器内核的组成?
浏览器的结构: 用户界面(UI) - 包括菜单栏、工具栏、地址栏、 后退/前进按钮、书签目录等,也就是能看到的除 了显示页面的主窗口之外的部分; 浏览器引擎(Rendering engine)-也被称为浏览器 内核、渲染引擎,主要负责取得页面内容、整理信息 (应用CSS)、计算页面的显示方式,然后会输出到 显示器或者打印机; JS解释器 - 也可以称为JS内核,主要负责处理 javascript脚本程序,一般都会附带在浏览器 之中,例如chrome的V8引擎; 网络部分 - 主要用于网络调用,例如:HTTP请求, 其接口与平台无关,并为所有的平台提供底层实现; UI后端 - 用于绘制基本的窗口部件,比如组合框和窗口等。 数据存储 - 保存类似于cookie、storage等数据部分, HTML5新增了web database技术,一种完整的轻量级客 户端存储技术。 主要浏览器: IE、Firefox、Safari、Chrome、Opera。 它们的浏览器内核(渲染引擎): IE--Trident FF(Mozilla)--Gecko Safari--Webkit Chrome--Blink(WebKit的分支) Opera--原为Presto,现为Blink
3. 为什么利用多个域名来请求网络资源会更有效?
动静分离需求,使用不同的服务器处理请求。
处理动态内容的只处理动态内容,不处理别的,
提高效率。
突破浏览器并发限制, 同一时间针对同一域名
下的请求有一定数量限制。超过限制数目的请
求会被阻止。不同浏览器这个限制的数目不一样。
Cookieless, 节省带宽,尤其是上行带宽一般比下
行要慢。用户的每次访问,都会带上自己的cookie
,久而久之耗费的带宽还是挺大的。
假如weibo 的图片放在主站域名下,那么用户
每次访问图片时,request header 里就会带有
自己的cookie ,header 里的cookie 还不能压缩,
而图片是不需要知道用户的cookie 的,所以这部分带
宽就白白浪费了。
避免不必要的安全问题(比如: 上传js窃取主站cookie之类的)
节约主域名的连接数,从而提高客户端网络带宽的利用率,
优化页面响应。
4. 说说前端开发中, 如何进行性能优化?
1) 减少http请求次数:css spirit,data uri; 2) JS,CSS源码压缩; 3) 前端模板 JS+数据,减少由于HTML标签导致 的带宽浪费,前端用变量保存AJAX请求结果,每 次操作本地变量,不用请求,减少请求次数; 4) 用innerHTML代替DOM操作,减少DOM操作次数; 5) 用setTimeout来避免页面失去响应; 6) 用hash-table来优化查找; 7) 当需要设置的样式很多时设置className而不 是直接操作style; 8) 少用全局变量; 9) 缓存DOM节点查找的结果; 10) 避免使用CSS Expression; 11) 图片预载; 12) 避免在页面的主体布局中使用table, table要等其中的内容完全下载之后才会显示出来, 显示比div+css布局慢; 13) 控制网页在网络传输过程中的数据量; 比如: 启用GZIP压缩或者保持良好的编程习惯, 避免重复的CSS,JavaScript代码, 多余的HTML标签和属性。
5. 从前端角度出发, 谈谈做好网站seo需要考虑什么?
1) 语义化html标签; 2) 合理的title, description, keywords; 3) 重要的html代码放前面; 4) 少用iframe, 搜索引擎不会抓取iframe中的内容 5) 图片加上alt
- WCF技术剖析之一:通过一个ASP.NET程序模拟WCF基础架构
- 使用动态语言来制作silverlight
- 《资讯》霍金:人工智能的威胁就像核武器,世界将发生10大变化!
- [原创]WCF技术剖析之三:如何进行基于非HTTP的IIS服务寄宿
- 厉害了,连美图CEO都开始热捧区块链了!
- Silverlight制作逐帧动画
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(58)-DAL层重构
- 糟糕了!这次新版微信,要干死所有小游戏了!
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(59)-BLL层重构
- 除了奇奇怪怪的机器人们,2017年人工智能还干了哪些“蠢事”?
- 区块链搬砖的坑及有效鉴别方法
- 英伟达回应禁令:研究人员放心用不更新驱动就没影响
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(88)-Excel导入和导出-主从表结构导出
- WCF中的Binding模型之六(完结篇):从绑定元素认识系统预定义绑定
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 赞!7000 字学习笔记,MySQL 从入到放弃
- 面试官问我Volatile的原理?从操作系统层面的设计怼回去!
- 设计原则之单一职责
- 设计原则之开闭原则
- SpringBoot执行跨域处理
- SpringBoot对全局异常的处理封装
- 自定义springboot-starter揭秘自动配置骚操作
- 【大厂面试题】Redis中是如何实现分布式锁的?
- 最近公司招人,研发组商量了下,暂时定下这么多java面试题!
- 市面上数据库种类那么多,如何选择?
- 玩转正则!推荐一个速查、调试、验证、可视化工具
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?
- Js实现文本复制
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?处理器映射器与处理器篇
- anetTcpGenericConnect 详解