• Web大前端面试题-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
  • 相关阅读:
    618狂欢结束,来聊聊华为云GaussDB NoSQL的蓬勃张力
    用GaussDB合理管控数据资源的几点心得
    边缘计算告诉你们公司空调怎么开最省钱
    应对高并发,服务器如何笑而不“崩”
    父亲节程序员硬核示爱:你能看懂几条
    Spring Boot 之Spring data JPA简介
    将Spring Boot应用程序注册成为系统服务
    Spring Boot Admin的使用
    Spring Boot devtool的使用
    Spring Boot国际化支持
  • 原文地址:https://www.cnblogs.com/qingchunshiguang/p/10413714.html
Copyright © 2020-2023  润新知