前端开发基础知识整理--web综合篇

时间 2019-11-08

标签前端开发基础知识整理 web 综合栏目 HTML 繁體版

原文原文链接

awesome-frontend-interviews是一个用于整理、收集前端基础知识的开源项目，放在Github上，内容会一直更新，欢迎提交好的内容共同进步，欢迎star。javascript

该篇是 web综合篇，主要包含了HTML(HTML5)、http、页面优化及其余一些概念性的问题

doctype是什么？标准模式与兼容模式各有什么区别?

<!doctype>声明必须处于HTML文档的头部，在<html>标签以前，HTML5中不区分大小写,它告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点没法工做。css

行内元素、块级元素、空(void)元素分别是什么？经常使用的有那些？

行内元素：行内元素不造成新内容块，即在其左右能够有其余元素，常见的有：a、span、img、b、i、em、strong、label、input、textarea、select、button、sub、sup、q
块级元素：块级元素占据其父元素（容器）横向的整个内容区域，常见的有：div、ul、ol、li、dl、dt、dd、h1-h六、p、table、form、hr、iframe、pre，html5增长的有：header、nav、section、article、aside、footer、audio、video
空元素：没有内容的 HTML 元素，常见的空元素： br、hr、img 、input 、link 、meta

href和src区别? title和alt

href: 指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的须要的锚点或资源之间定义一个连接或者关系，在 link和a 等元素上使用
src: 属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用
title: 既是html标签，又是html属性，title做为属性时，用来为元素提供额外说明信息,一般当鼠标滑动到元素上的时候显示
alt: alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片没法正常显示时给用户提供文字说明使其了解图像信息

iframe有那些缺点？

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序没法解读这种页面，不利于SEO;
iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。

使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题。html

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

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

绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，好比 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;

移除的元素：html5

纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：java

IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加标签默认的样式。
也能够直接使用成熟的框架、好比html5shim

如何区分HTML5： DOCTYPE声明新增的结构元素功能元素css3

HTML5的离线储存怎么使用，工做原理？

在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件。git

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现。github

如何使用：web

一、页面头部像下面同样加入一个manifest的属性；

二、在cache.manifest文件的编写离线存储的资源；

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

三、在离线状态时，操做window.applicationCache进行需求实现。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。离线的状况下，浏览器就直接使用离线存储的资源。

如何理解HTML结构的语义化？

HTML结构的语义化是指经过使用包含语义的标签恰当地表示文档结构，语义化的好处：

搜索引擎友好
便于团队开发和维护
去掉样式或样式丢失后，页面也能呈现清晰的结构
能够更好的被屏幕阅读器能够读出网内容

渐进加强和优雅降级？

渐进加强：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容

HTTP中GET与POST的区别？

关于这个题目，曾经有一篇文章一度很火：99%的人都理解错了HTTP中GET与POST的区别，后来剧情反转，知乎出现一篇：据说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？

下面引用w3schools的解答：

GET 方法

可被缓存
保留在浏览器历史记录中
可被收藏为书签
不该在处理敏感数据时使用
有长度限制
只应当用于取回数据

POST 方法

不会被缓存
不会保留在浏览器历史记录中
不能被收藏为书签
对数据长度没有要求

如何实现浏览器内多个标签页之间的通讯? (阿里)

WebSocket、SharedWorker，也能够调用localstorge、cookies等本地存储方式，监听localstorge的改变来触发一个事件，经过这个事件，控制它的值来进行页面信息通讯（注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常）

webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

在浏览器中输入URL到整个页面显示在用户面前时这个过程当中到底发生了什么？

这个题目好像是必考题了，大神能够讲几天，推荐这篇文章：从输入 URL 到页面加载完成的过程当中都发生了什么事情？

从网上找到的简答版本以下：

浏览器会开启一个线程来处理这个请求，对 URL 分析判断若是是 http 协议就按照 Web 方式来处理;
调用浏览器内核中的对应方法，好比 WebView 中的 loadUrl 方法;
经过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
进行HTTP协议会话，客户端发送报头(请求报头);
进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
处理结束回馈报头，此处若是浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
文档树创建，根据标记请求所需指定MIME类型的文件（好比css、js）,同时设置了cookie;
页面开始渲染DOM，JS根据DOM API操做DOM,执行事件绑定等，页面显示完成

为何利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的链接数，优化页面响应速度
防止没必要要的安全问题(上传js窃取主站cookie之类的)

前端优化方式有哪些方式？

前端优化的途径有不少，按粒度大体能够分为两类，第一类是页面级别的优化，第二类则是代码层面的优化。

页面级别的优化：

这个就不得不看看雅虎军规35条了，中文版的能够看看毫秒必争，前端网页性能最佳实践，主要是对雅虎军规35条的实践和总结

性能优化的原则是：多使用内存、缓存或者其余方法减小CPU计算、减小网络请求、减小IO

代码层面的优化, 列举部分：

少用全局变量
用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能
缓存DOM节点查找的结果
避免使用CSS表达式
避免全局查询
避免使用with(with会建立本身的做用域，会增长做用域链长度)、eval(容易用错、性能差、容易引发安全问题)、Function(一样性能差，和eval同样，都不利于压缩工具执行压缩)
多个变量声明合并
避免图片和iframe等的空src。空src会从新加载当前页面，影响速度和效率
尽可能避免写在HTML标签中写style属性
不滥用float,float在渲染时计算量比较大，尽可能减小使用

随着CSS3的广泛，同时须要注意优化的点：

尽可能使用css3动画，开启硬件加速
移动端适当使用touch事件代替click事件
避免使用css3渐变阴影效果
能够用 transform: translateZ(0) 来开启硬件加速
不滥用web字体,web字体须要下载，解析，重绘当前页面，尽可能减小使用
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、opacity、canvas、webGL、video）会触发GPU渲染，要合理使用，过渡使用会引起手机过耗电增长