网站建设板块免费下载,wordpress内链,跨境电商平台有哪些新手入门,网站做镜像HTML面试题#xff08;一#xff09;
前言#xff1a; 面试题及答案解析#xff0c;大部分来自网络整理#xff0c;我自己做了一些简化#xff0c;如果想了解的更多#xff0c;可以搜索一下#xff0c;前端面试题宝典微信公众号或者查百度#xff0c;另外如果出现错误…HTML面试题一
前言 面试题及答案解析大部分来自网络整理我自己做了一些简化如果想了解的更多可以搜索一下前端面试题宝典微信公众号或者查百度另外如果出现错误请积极指正❤❤❤ 1.什么是HTML5以及和HTML的区别是什么 HTML5是HTML的新标准其主要目标是无需任何额外的插件如Flash、Silverlight等就可以传输所有内容 它囊括了动画、视频、丰富的图形用户界面等。 HTMl5是由万维网W3C和 Web Hypertext Application Technology Working Group 合作创建的HTML新版本。
区别
从文档声明类型上看
HTML是很长的一段代码很难记住HTML5却只有简简单单的声明方便记忆
从语义结构上看
HTML没有体现结构语义化的标签HTML5提供了一些新的标签
2.什么是渐进增强和优雅降级 渐进增强progressive enhancement 主要是针对低版本的浏览器进行页面重构保证基本的功能情况下再针对高级浏览器进行效果交互等方面的改进和追加功能以达到更好的用户体验 优雅降级 graceful degradation 一开始就构建完整的功能然后再针对低版本的浏览器进行兼容
区别 优雅降级是从复杂的现状开始的并试图减少用户体验的供给 而渐进增强是从一个非常基础的能够起作用的版本开始的并在此基础上不断扩充以适应未来环境的需要 优雅降级功能衰竭意味着往回看 而渐进增强则意味着往前看同时保证其根基处于安全地带
3.Node与Element的关系
Element 继承于 Node具有Node的方法同时又拓展了很多自己的特有方法
Element的一些方法里是明确区分了Node和Element的比如说childNodes与 children, parentNode与parentElement等方法
Node的一些方法返回值为Node比如说文本节点注释节点之类的而Element的一些方法返回值则一定是Element
4.导致页面加载白屏时间长的原因有哪些怎么优化
白屏时间
从屏幕空白到显示第一个画面的时间
白屏时间的重要性
提升用户的体验减少用户的跳出提升页面的留存率
白屏的过程
1、浏览器会先对页面进行域名解析获取到服务器的IP地址后进而和服务器进行通信。 Tips: 通常在整个加载页面的过程中浏览器会多次进行DNS Lookup包括页面本身的域名查询以及在解析HTML页面时加载的JS、CSS、Image、Video等资源产生的域名查询。
2、建立TCP连接请求 浏览器和服务端TCP请求建立的过程是基于TCP/IP该协议由网络层的IP和传输层的TCP组成。IP是每一台互联网设备在互联网中的唯一地址。 TCP通过三次握手建立连接并提供可靠的数据传输服务。
3服务端请求处理响应 在TCP连接建立后Web服务器接受请求开始进行处理同时浏览器端开始等待服务器的处理响应。 Web服务器根据请求类型的不同进行相应的处理。静态资源如图片、CSS文件、静态HTML直接进行响应如其他注册的请求转发给相应的应用服务器进行如数据处理、缓存中取数据将数据按照约定好的格式响应给浏览器。 在大型应用中通常为分布式服务架构应用服务器的处理有可能经过很多个系统的中间件最终获取到需要的数据
4客户端下载、解析、渲染显示页面 在服务器返回数据后客户端浏览器接收数据进行HTML下载、解析、渲染显示
a. 如果是Gzip包则先解压为HTML
b. 解析HTML的头部代码下载头部代码中的样式资源文件或脚本资源文件
c. 解析HTML代码和样式文件代码构建HTML的DOM树以及与CSS相关的CSSOM树
d. 通过遍历DOM树和CSSOM树浏览器依次计算每个节点的大小、坐标、颜色等样式构造渲染树
e. 根据渲染树完成绘制过程
浏览器下载HTML后首先解析头部代码进行样式表下载然后继续向下解析HTML代码构建DOM树同时进行样式下载。当DOM树构建完成后立即开始构造CSSOM树。理想情况下样式表下载速度够快DOM树和CSSOM树进入一个并行的过程当两棵树构建完毕构建渲染树然后进行绘制。
Tips:浏览器安全解析策略对解析HTML造成的影响
当解析HTML时遇到内联JS代码会阻塞DOM树的构建特别悲惨的情况 当CSS样式文件没有下载完成时浏览器解析HTML遇到了内联JS代码此时根据浏览器的安全解析策略浏览器暂停JS脚本执行暂停HTML解析。直到CSS文件下载完成完成CSSOM树构建重新恢复原来的解析。
一定要合理放置JS代码
白屏-性能优化
1.DNS解析优化 针对DNS Lookup环节我们可以针对性的进行DNS解析优化。 - DNS缓存优化- DNS预加载策略- 稳定可靠的DNS服务器2.TCP网络链路优化 针对网络链路的优化好像除了花钱没有什么更好的方式
3.服务端处理优化 服务端的处理优化是一个非常庞大的话题会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…
4.浏览器下载、解析、渲染页面优化 根据浏览器对页面的下载、解析、渲染过程可以考虑一下的优化处理 - 尽可能的精简HTML的代码和结构- 尽可能的优化CSS文件和结构- 一定要合理的放置JS代码尽量不要使用内联的JS代码5.大量图片加载优化
优先加载首屏所需图片完成之后再加载其他部分图片图片裁剪使用更优的图片格式 jpeg ,png ,gif、webp
5.浏览器渲染流程Composite渲染层合并简单总结
浏览器请求、加载、渲染大致过程
DNS查询TCP连接HTTP请求即响应服务器响应浏览器渲染浏览器渲染线程接收到请求加载并渲染网页大致过程解析HTML 建立 DOM tree解析 css 建立 css rules treeDOM 和 CSS 合并后生成 render tree布局 render tree ,负责元素尺寸 位置计算绘制 render tree ,绘制页面像素信息浏览器会将各层的信息发送给GPUGPU进程最多一个用于3D绘制等GPU会将各层合成composite显示在屏幕上
6.前端浏览器动画性能优化
1、精简DOM合理布局
2、使用transform代替left、top减少使用引起页面重排的属性
3、开启硬件加速
4、尽量避免浏览器创建不必要的图形层
5、尽量减少js动画如需要使用对性能友好的requestAnimationFrame
6、使用chrome performance工具调试动画性能
7.什么渐渐式jpg
在 Web 浏览器中呈现时会首先给出模糊图像的外观
然后一点一点地开始图片渲染直到它显示完全渲染的图像
浏览器实际上是逐行解释图像但在占位符中提供了完整图像的模糊预览
8.怎么在选择图片后通过浏览器预览待上传的图片
那么无论哪种方法首先都得得到文件数据获得文件数据是从files集合中获取
一种是用 window.URL.createObjectURl 方法对选择的图片数据可以勉强理解为input的value生成一个图片对象路径
function imgChange(img) {document.querySelector(img).srcwindow.URL.cteateObejectURL(img.files[0]);
}第二种是使用 FileReader 读取器 创建 FileReader 对像调用 readAsDataURL 方法读取文件调用 onload 事件监听。因为我们需要拿到完整的数据但我们又不知道文件何时读完所以需要第三步监听通过 FileReader 的 result 属性拿到读取结果。
function imgChange(img) {// 生成一个文件读取的对象const reader new FileReader();reader.onload function (ev) {document.querySelector(img).src imgFile;}//发起异步读取文件请求读取结果为data:url的字符串形式reader.readAsDataURL(img.files[0]);
}9.怎么实现点击回到顶部的功能
1.锚点
使用锚点链接是一种简单的返回顶部的功能实现。
该实现主要在页面顶部放置一个指定名称的锚点链接然后在页面下方放置一个返回到该锚点的链接用户点击该链接即可返回到该锚点所在的顶部位置。
body styleheight:2000px; div idtopAnchor/div a href#topAnchor styleposition:fixed;right:0;bottom:0回到顶部/a
/body2.scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。
元素未滚动时scrollTop的值为0如果元素被垂直滚动了scrollTop的值大于0且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的可以利用scrollTop来实现回到顶部的功能
body styleheight:2000px; button idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscript test.onclick function(){ document.body.scrollTop document.documentElement.scrollTop 0; } /script
/body3.scrollTo
scrollTo(x,y)方法滚动当前window中显示的文档让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
body styleheight:2000px; button idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscript test.onclick function(){ scrollTo(0,0); } /script
/body4.scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数逆向滚动则可以实现回到顶部的效果
body styleheight:2000px; button idtest styleposition:fixed;right:0;bottom:0回到顶部/button script test.onclick function(){ var top document.body.scrollTop || document.documentElement.scrollTop scrollBy(0,-top); } /script
/body5.scrollIntoView()
Element.scrollIntoView方法滚动当前元素进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true表示元素的顶部与当前区域的可见部分的顶部对齐前提是当前区域可滚动如果为false表示元素的底部与当前区域的可见部分的尾部对齐前提是当前区域可滚动。如果没有提供该参数默认为true
使用该方法的原理与使用锚点的原理类似在页面最上方设置目标元素当页面滚动时目标元素被滚动到页面区域以外点击回到顶部按钮使目标元素重新回到原来位置则达到预期效果
body styleheight:2000px;div idtarget/divbutton idtest styleposition:fixed;right:0;bottom:0回到顶部/buttonscripttest.onclick function(){target.scrollIntoView();}/script
/body10.SPA应用怎么进行SEO?
SPA全名是Single Page Application指的是单页面应用。
SEO全称为Search Engine Optimization指的是搜索引擎优化。
SPA技术将产出html的逻辑从服务器转移到了客户端在进入React, Vue等UI框架进行开发时我们开发的页面更多的是在客户端进行脚本执行、数据请求和UI动态装载。
那么搜索引擎爬虫在抓取这样的页面的时在未做任何优化的情况下通常拿到的是类似下面的字符文本
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titletitle/title
/head
body
div idroot/div
script srcindex.js/script
/body
/html除了可以事先定义的title可能title也不能事先确定在SPA下很多内容需要通过ajax请求server拿到数据通过脚本执行产生。
通常爬虫不会有类似浏览器的执行环境去产生这些内容。
那么如何让爬虫拿到的数据和用户通过浏览器看到的数据尽量是一致
SPA的优缺点
优点用户体验好前后端代码分离利于后期的维护
缺点SEO不好首次加载时长比较久导航需要自己去实现前进后退。
SPA如何解决SEO的问题
SSR 服务端渲染
优点首屏加载快(因为服务器返回的网页已经包含数据, 所以之下载完JS/CSS就可以直接渲染)。每次请求返回的都是一个独立完成的网页, 更利于SEO。
缺点就是服务器压力会比较大对网络要求比较大
预渲染
无需服务器实时动态编译采用预渲染在构建时针对特定路由简单的生成静态HTML文件
本质就是客户端渲染, 只不过和SPA不同的是预渲染有多个界面
最大优点: 由于有多个界面, 所以更利于SEO
最大缺点: 首屏加载慢, 预编译会非常的慢
11.Script标签放在header里和放在body底部里有什么区别
放在 header 中你能看到 html 第一时间被加载进来但页面 body 内容迟迟没有渲染出来。因为在等待 header 标签中 script 脚本的加载3 秒后整个页面渲染完成。
放在 body 底部这次 html 内容第一时间渲染完成随后等待 js 的加载。
脚本会阻塞页面的渲染所以推荐将其放在 body 底部因为当解析到 script 标签时通常页面的大部分内容都已经渲染完成让用户马上能看到一个非空白页面。
另外你能看到多个脚本之间都是异步向服务器请求他们之间不互相依赖最终只等待 3 秒而非 333 秒。
12.如何实现SEO优化
内部优化
保持站内的更新服务器端渲染内部链接优化优化关键词
外部优化
保持链接多样性交换友情链接坚持添加一定数量的外部链接
13.SEO是什么
Search Engine Optimization
搜索引擎优化
一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式
14.SEO的原理是什么
爬行和抓取索引搜索词处理排序
15.前端跨页面通信方法有哪些
同源策略
通常对于两个不同页面的脚本只有具有相同的协议https,端口豪433为https的默认值以及主机时这两个脚本才能相互通信。
同源页面之间的通信的方法
BroadCastChannelService WorkerLocalStorageShared WorkerIndexedDBwindow.open() window.opener
非同源页面之间的通信的方法
jsonpwindow.postmessage()iframe
总结
广播模式
Broadcast ChanneService WorkerLocalStorageStorageEvent
共享存储模式
Shared WorkerIndexedDBcookie
口口相传模式
window.open window.opener
基于服务端
WebsocketCometSSE
16.DNS预解析是什么怎么实现
DNS优化
减少DNS请求次数缩短DNS解析时间dns-prefetch
什么是dns-prefetch?
dns-prefectch(DNS预获取)
提前解析之后可能会用到的域名使解析结果缓存到系统缓存中缩短DNS解析时间
为什么要用dns-prefetch?
发送一次请求就要先通过DNS解析将该域名解析为IP地址浏览器才能发出请求
如果某一时间内有多个请求都发送给同一个服务器那么DNS解析会多次并且重复触发
导致整体的网页加载有延迟
dns-prefetch原理
当浏览器访问一个域名的时候需要解析一次DNS获取对应域名的ip地址
解析过程
浏览器缓存系统缓存路由器缓存ISP运营商DNS缓存根域名服务器顶级域名服务器主域名服务器
的顺序逐步读取缓存直到拿到IP地址
dns-prefetch就是在将解析后的IP缓存在系统中
这样一来后续的解析步骤就不用执行了
浏览器DNS缓存与dns-prefetch
现在浏览器为了优化DNS解析也设有了浏览器DNS缓存
每当在首次DNS解析后会对其IP进行缓存。至于缓存时长每种浏览器都不一样比如Chrome的过期时间是1分钟在这个期限内不会重新请求DNS。
DNS在系统的缓存时间是大于浏览器的。
dns-prefetch缺点
dns-prefetch最大的缺点就是使用它太多。
过多的预获取会导致过量的DNS解析对网络是一种负担。
注意
dns-prefetch 仅对跨域域上的 DNS查找有效因此请避免使用它来指向相同域。
这是因为到浏览器看到提示时您站点域背后的IP已经被解析。
除了link 还可以通过使用 HTTP链接字段将 dns-prefetch以及其他资源提示指定为 HTTP标头
Link: https://fonts.gstatic.com/; reldns-prefetch17.HTML5有哪些drag相关的API
dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发darg事件主体是被拖放元素在正在拖放被拖放元素时触发dragenter事件主体是目标元素在被拖放元素进入某元素时触发dragover事件主体是目标元素在被拖放在某元素内移动时触发dragleave事件主体是目标元素在被拖放元素移出目标元素是触发drop事件主体是目标元素在目标元素完全接受被拖放元素时触发dragend事件主体是被拖放元素在整个拖放操作结束时触发
18.浏览器乱码的原因是什么如何解决
产生乱码的原因
网页源代码是gbk的编码而内容中的中文字是utf-8编码的这样浏览器打开即会出现html乱码反之也会出现乱码html网页编码是gbk而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码浏览器不能自动检测网页编码造成网页乱码
解决办法
使用软件编辑HTML网页内容如果网页设置编码是gbk而数据库储存数据编码格式是UTF-8此时需要程序查询数据库数据显示数据前进程序转码如果浏览器浏览时候出现网页乱码在浏览器中找到转换编码的菜单进行转换
19.Canvas和SVG有什么区别
**SVG**在 SVG 中每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化那么浏览器能够自动重现图形。
其特点如下
不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用
Canvas Canvas是画布通过Javascript来绘制2D图形是逐像素进行渲染的。其位置发生改变就会重新进行绘制。
其特点如下
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏其中的许多对象会被频繁重绘
20.title与h1的区别b与strong的区别i与em的区别 strong标签有语义是起到加重语气的效果而b标签是没有的b标签只是一个简单加粗标签。 b标签之间的字符都设为粗体strong标签加强字符的语气都是通过粗体来实现的而搜索引擎更侧重strong标签。 title属性没有明确意义只表示是个标题H1则表示层次明确的标题对页面信息的抓取有很大的影响 i内容展示为斜体em表示强调的文本
21.浏览器是如何对HTML5的离线存储资源进行管理和加载
在线的情况下:
浏览器发现 html 头部有 manifest 属性它会请求 manifest 文件如果是第一次访问页面 那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
如果已经访问过页面并且资源已经进行离线存储了那么浏览器就会使用离线的资源加载页面
然后浏览器会对比新的 manifest 文件与旧的 manifest 文件如果文件没有发生改变就不做任何操作如果文件改变了就会重新下载文件中的资源并进行离线存储。
离线的情况下:
浏览器会直接使用离线存储的资源。
22.HTMl5的离线存储怎么适用它的工作原理是什么
离线存储是指
在用户没有与因特网连接时可以正常访问站点或应用
在用户与因特网连接时更新用户机器上的缓存文件
原理
HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)
通过这个文件上的解析清单离线存储资源这些资源就会像cookie一样被存储了下来
之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行页面展示
后记
后续会继续更新冲冲✨✨✨
