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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容