前端面试相关

来源:互联网 发布:淘宝金丝楠木手串真假 编辑:程序博客网 时间:2024/04/30 04:58

1.什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?

  渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

  区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
2.线程与进程的区别(小弟不懂,copy,答案都懒得抄)

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。

另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
3.说说你如何理解HTML结构的语义化?
用合适的标签放在合适的位置表达合适的意思让浏览器更好的解析开发者更好的阅读;
1,让页面结构清晰增强可读性 2. 便于团队开发维护 3.利于seo检索索优化

4.你如何对网站的文件和资源进行优化?
期待的解决方案包括:文件合并文件最小化/文件压缩使用CDN托管缓存的使用(多个域名来提供缓存)其他。

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

1.优化图片2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)3.优化CSS(压缩合并css,如margin-top,margin-left…)4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)6.减少http请求(合并文件,合并图片)。

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

1.CDN缓存更方便2.突破浏览器并发限制(一般每个域名建立的链接不超过6个)3.Cookieless,节省带宽,尤其是上行带宽一般比下行要慢4.对于UGC的内容和主站隔离,防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名,而是一个完全独立的第三方域名。5.数据做了划分,甚至切到了不同的物理集群,通过子域名来分流比较省事。这个可能被用的不多。 PS:关于Cookie的问题,带宽是次要的,安全隔离才是主要的。关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走https的话,还有要多买证书和部署的问题。

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

如果不使用JS来完成,可以加分。(如:纯CSS实现的幻灯片效果)
9.你都使用哪些工具来测试代码的性能?

Profiler,JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout),Dromaeo。
10.如果今年你打算熟练掌握一项新技术,那会是什么?
nodejs,html5,css3,less等。
11.请谈一下你对网页标准和标准制定机构重要性的理解。
w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。
12.什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

FOUC(Flash Of Unstyled Content)–文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,只要在之间加入一个或者

header {height: auto;}

searchform {position: absolute;top: 5px;right: 0;}

content {width: auto; float: none; margin: 20px 0;}

sidebar {width: 100%; float: none; margin: 0;}

}
30.你熟悉SVG样式的书写吗?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 书写示例如下:
0 0
原创粉丝点击