前端常见问题整理

时间 2019-11-07

标签前端常见问题整理繁體版

原文原文链接

1.前端性能优化css

　a.请求数量：合并脚本和样式表，CSS Sprites;html

　b.请求带宽：精简压缩JavaScript文件，移出重复脚本，图片优化；前端

　c.使用CDN，使用外部JavaScript和CSS，添加Expires头，减小DNS查找，配置ETag，使AjaX可缓存；html5

　d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出；web

　e. 代码校验：避免CSS表达式，避免重定向跨域

2.在浏览器中输入一个网址以后浏览器都作了什么？数组

　① 浏览器查找该域名的 IP 地址浏览器

　② 浏览器根据解析获得的IP地址向 web 服务器发送一个 HTTP 请求缓存

　③ 服务器收到请求并进行处理性能优化

　④ 服务器返回一个响应

　⑤ 浏览器对该响应进行解码，渲染显示

　⑥ 页面显示完成后，浏览器发送异步请求。

3.简述盒模型

　文档中的每一个元素被描绘为矩形盒子。

　盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。　

4.浏览器本地存储　

　在HTML5中提供了sessionStorage和localStorage.

　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁，是会话级别的存储。

　localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

5.减小页面加载时间的方法

　a. 尽可能减小页面中重复的HTTP请求数量

　b. 服务器开启gzip压缩

　c. css样式的定义放置在文件头部

　d. Javascript脚本放在文件末尾

　e. 压缩合并Javascript、CSS代码

　f. 使用多域名负载网页内的多个文件、图片

6.浏览器的内核有哪些？

　IE浏览器的内核Trident，

　Mozilla的Gecko，

　Chrome的Blink（WebKit的分支），

　Opera内核原为Presto，现为Blink；

7.前端的三层结构和做用

　a. 结构层：由 HTML 或 XHTML 之类的标记语言负责建立，仅负责语义的表达。解决了页面“内容是什么”的问题。

　b. 表示层：由CSS负责建立，解决了页面“如何显示内容”的问题。

　c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件做出反应”的问题。

8.一个页面有大量的图片，如何提升加载速度，提升用户体验。

　a. 图片懒加载，滚动到相应位置才加载图片。

　b. 图片预加载，若是为幻灯片、相册等，将当前展现图片的前一张和后一张优先下载。

　c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，若是图片为css图片的话。

　d. 若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的缩略图，以提升用户体验。

9.从前端角度作好SEO

　　// SEO全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。

　　// 存在的意义：为了提高网页在搜索引擎天然搜索结果中的收录数量以及排序位置而作的优化行为。简言之，就是但愿百度等搜索引擎能多多咱们收录精心制做后的网站，而且在别人访问时网站能排在前面。

　　a.网站结构布局优化；

　　b.代码优化，如：　

　　<title>标题：只强调重点便可，尽可能把重要的关键词放在前面，关键词不要重复出现，尽可能作到每一个页面的<title>标题中不要设置相同的内容。

　　<meta keywords>标签：关键词，列举出几个页面的重要关键字便可，切记过度堆砌。

　　<meta description>标签：网页描述，须要高度归纳网页内容，切记不能太长，过度堆砌关键词，每一个页面也要有所不一样。

　　<body>中的标签：尽可能让代码语义化，在适当的位置使用适当的标签，用正确的标签作正确的事。让阅读源码者和“蜘蛛”都一目了然。好比：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

　　<a>标签：页内连接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部连接，连接到其余网站的，则须要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，由于一旦“蜘蛛”爬了外部连接以后，就不会再回来了。

10.<img>标签上title属性与alt属性的区别

　alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽量的短。

　这包括那些使用原本就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

　title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

11.标签语义化的理解

　a. 去掉或者丢失样式的时候可以让页面呈现出清晰的结构

　b. 有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；

　c. 方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

　d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，能够减小差别化。

12.Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

　<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器以何种模式来渲染文档。

　严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。

　在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

　DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

13.Doctype文档类型

　标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

　HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

　XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

　Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

　Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

14.HTML与XHTML的区别

　a. XHTML 元素必须被正确地嵌套。

　b. XHTML 元素必须被关闭。

　c. 标签名必须用小写字母。

　d. XHTML 文档必须拥有根元素。

15.html5有哪些新特性、移除了那些元素？

　a. HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

　b. 拖拽释放(Drag and drop) API

　c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

　d. 音频、视频API(audio,video)

　e. 画布(Canvas) API

　f. 地理(Geolocation) API

　g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

　h. sessionStorage 的数据在页面会话结束时会被清除

　i. 表单控件，calendar、date、time、email、url、search

　j. 新的技术webworker, websocket等

　移除的元素：

　a. 纯表现的元素：basefont，big，center, s，strike，tt，u；

　b. 对可用性产生负面影响的元素：frame，frameset，noframes；

16.iframe的优缺点？

优势：

　a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

　b. iframe无刷新文件上传

　c. iframe跨域通讯

缺点：

　a. iframe会阻塞主页面的Onload事件

　b. 没法被一些搜索引擎索引到

　c. 页面会增长服务器的http请求

　d. 会产生不少页面，不容易管理。

17.简述一下src与href的区别

　src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

　src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

　href是Hypertext Reference的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接

18.DOM操做 - 添加、移除、移动、复制、建立和查找节点

（1）建立新节点

　　createDocumentFragment() //建立一个DOM片断

　　createElement() //建立一个具体的元素

　　createTextNode() //建立一个文本节点

（2）添加、移除、替换、插入

　　appendChild()

　　removeChild()

　　replaceChild()

　　insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

　　getElementsByTagName() //经过标签名称

　　getElementsByName() //经过元素的Name属性的值(IE容错能力较强，会获得一个数组，其中包括id等于name值的)

　　getElementById() //经过元素Id，惟一性