前端工作面试问题(上)(4)

        Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的<script src=https://www.linuxidc.com/”xxx.js?{VERHASH}”,{VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

css文件放置在head,js放置在文档尾部

在服务器端配置control-cache  last-modify-date

在服务器配置Entity-Tag    if-none-match

 闻东师兄说:

   可再结合H5新特性里的预加载,图片优化方面,可对图片进行压缩,JPG的推荐jpegmin这个软件,png的推荐

前端工作面试问题(上)

https://tinypng.com/,前面这两个是压缩后不会失真的,gif的推荐GIF Optimizer,但可能会有毛边。

 

为什么利用多个域名来提供网站资源会更有效?

浏览器同一时间可以从一个域名下载多少资源?

      即浏览器并发请求数。同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。(借用百度上的一张图片)

前端工作面试问题(上)

请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

  关于实际加载时间,可以使用上题”你如何对网站的文件和资源进行优化?“方法。

  关于感知时间,可以使用上题“编写代码的哪些方面能够使你兴奋或感兴趣?”答案。

请写一个简单的幻灯效果页面

如果不使用JS来完成,可以加分。

*你都使用哪些工具来测试代码的性能?

Profiler, JSPerf, Dromaeo

如果今年你打算熟练掌握一项新技术,那会是什么?

    开发单页webapp的技术。

    SAP能够是页面与页面之间无缝连接,避免出现白页,且带有动态效果,提高用户体验。同时SAP,有javascript渲染页面,然后在从服务器获取小量的数据显示,如此反复,请求的数据无需要服务器处理,减少服务器负荷。

    SAP对技术要求高。要考虑首屏加载事件过长;动画效果要考虑低端手机;垃圾收集,需要自己释放资源,避免页面变卡。

*Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别?

请谈一下你对网页标准和标准制定机构重要性的理解。

    关于W3C标准,要求:

    1)书写闭合,标签小写、不乱嵌套。有利于SEO

    2)尽量使用外链的css和js脚本,结构行为表现分离。有利于页面加载速度加快。

    3)样式和标签分离,使用更合理的语义化标签,内容被更多用户设备访问,维护成本也会降低。

    指定标准,能够规避不同开发商开发出来不同的浏览器显示不一致问题,同时��

*什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为: 1,使用import方法导入样式表。 2,将样式表放在页面底部 3,有几个样式表,放在html结构的不同位置。其实原理很清楚:当样式表晚于 结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂 的 花屏现象。

解决方法:使用LINK标签将样式表放在文档HEAD中更多

请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

  1)用户输入网址

  2)浏览器通过DNS获取网站的IP地址

  3)浏览器尝试与服务器建立连接

  4)服务器发送永久重定向

  5)浏览器跟踪从定向地址

  7)服务器处理请求

  8)服务器发送HTML响应

  9)浏览器开始显示HTML

  10)浏览器发送获取嵌套在html中的元素

    关于页面渲染过程:

    1)解析HTML代码,生成一棵DOM树

    2)解析CSS文件

    3)生成渲染树(受样式影响,包含不可见元素)

    4)渲染树中的节点

 HTML相关问题:

doctype(文档类型)的作用是什么?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/1287c5e455583263de605555e03a89e2.html