撩课-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

复制代码