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. 说说前端开发中, 如何进行性能优化?

) 减少http请求次数:css spirit,data uri;
) JS,CSS源码压缩;
) 前端模板 JS+数据,减少由于HTML标签导致
的带宽浪费,前端用变量保存AJAX请求结果,每
次操作本地变量,不用请求,减少请求次数;
) 用innerHTML代替DOM操作,减少DOM操作次数;
) 用setTimeout来避免页面失去响应;
) 用hash-table来优化查找;
) 当需要设置的样式很多时设置className而不
是直接操作style;
) 少用全局变量;
) 缓存DOM节点查找的结果;
) 避免使用CSS Expression;
) 图片预载; ) 避免在页面的主体布局中使用table,
table要等其中的内容完全下载之后才会显示出来,
显示比div+css布局慢; ) 控制网页在网络传输过程中的数据量;
比如: 启用GZIP压缩或者保持良好的编程习惯,
避免重复的CSS,JavaScript代码,
多余的HTML标签和属性。

5. 从前端角度出发, 谈谈做好网站seo需要考虑什么?

) 语义化html标签;
) 合理的title, description, keywords;
) 重要的html代码放前面;
) 少用iframe, 搜索引擎不会抓取iframe中的内容
) 图片加上alt

 

撩课-Web大前端每天5道面试题-Day7的更多相关文章

  1. 撩课-Web大前端每天5道面试题-Day10

    1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...

  2. 撩课-Web大前端每天5道面试题-Day4

    1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...

  3. 撩课-Web大前端每天5道面试题-Day1

    1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...

  4. 撩课-Web大前端每天5道面试题-Day11

    1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} ...

  5. 撩课-Web大前端每天5道面试题-Day31

    1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...

  6. 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...

  7. 撩课-Web大前端每天5道面试题-Day30

    1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不 ...

  8. 撩课-Web大前端每天5道面试题-Day23

    1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...

  9. 撩课-Web大前端每天5道面试题-Day16

    1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { ...

随机推荐

  1. Thread.sleep(1000)

    public class Wait { public static void main(String[] args) { System.out.println(System.currentTimeMi ...

  2. 使用git提交代码流程

    一.拉取最新代码 一般在本地进行开发时,都是切换到自己的dev分支进行开发,当开发完成需要进行代码提交,在进行代码提交前需要先进行拉取远程仓库代码,进行更新,但是此时会提示需要将本地代码进行commi ...

  3. 替代iframe新逻辑

    使用ajax请求.下面是代码逻辑 $.ajax({ url:url, type:'get', dataType: "text", success:function(msg){ $( ...

  4. mysql 查看索引

    查看索引 mysql> show index from tblname; mysql> show keys from tblname; · Table 表的名称. · Non_unique ...

  5. php性能优化三(PHP语言本身)

    0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册 ...

  6. Nginx文件上传下载实现与文件管理

    1.Nginx 上传 Nginx 依赖包下载 # wget http://www.nginx.org/download/nginx-1.2.2.tar.gzinx # wget http://www. ...

  7. 细化Azure RBAC权限

    Azure RBAC权限的细化一直是比较繁琐的事情,以下示例抛砖引玉,供大家参考 客户需求: 新用户在指定资源组下权限需求如下: 一.禁止以下权限 1. 调整虚拟机大小配置 2. 删除&停止虚 ...

  8. 在eclipse中,用maven创建web项目

    备注:该文档是之前学习时,根据网上其他童鞋的经验自己测试后梳理,如有侵权,请勿怪,感谢! 1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击ne ...

  9. @ModelAttribute注解和POJO传参过程

    1.@ModelAttribute注解 @ModelAttribute主要有三个用途,对方法进行注解,对参数进行注解,还有@ModelAttribute和@RequestMapping一起对方法进行注 ...

  10. 在 Go 语言中使用 Log 包--转自GCTT

    Linux 在许多方面相对于 Windows 来说都是独特的,在 Linux 中编写程序也不例外.标准输出,标准 err 和 null devices 的使用不仅是一个好主意,也是一个原则.如果您的程 ...