WEB 前端面试题（1）

来源：互联网发布：在淘宝上卖剑三外观编辑：程序博客网时间：2024/05/19 16:23

1、渐进增强和优雅降级区别。

这两个概念是随着css3流出来的概念。

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

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

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应

未来环境的需要。渐进增强就是让牛B的浏览器效果更好，优雅降级就是让2B的浏览器在功能上ok。

2、线程与进程的区别。

一个程序至少有一个进程，一个进程至少有一个线程，线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，

而多个线程共享内存单元，从而大大提高了程序的运行效率。线程和进程在执行过程中也是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的

出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以

同时执行。但操作系统并没有将多个线程看成是独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

3、请解释一下什么是“语义化的HTML”。

（1）去掉或样式丢失的时候能让页面呈现清晰的结构，html 本身是没有样式的，但是浏览器对html的标记提供了默认的样式，即是为了更好地表达html语义，

所以说，浏览器的默认样式和语义化的html结构是不可分割的。

（2）屏幕阅读器会根据html的标记来解读网页

（3）PDA、手机等设备可能无法像普通电脑的浏览器来渲染网页（主要是对css的支持较弱）

（4）搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

（5）爬虫在爬取信息时，会忽略表现的标记，而只注重语义标记

（6）便于团队开发和维护语义化的html：标题用h1-h6，文字段落用p，列表用ul，li

4、你如何对网站的文件和资源进行优化？

文件合并，文件最小化，文件压缩使用CDN托管缓存的使用。

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

三个最主流的原因:1.CDN缓存更方便2.突破浏览器并发限制(你随便挑一个G家的url:https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg,把前面的lh4换成lh3,lh6啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)3.Cookieless,节省带宽，尤其是上行带宽一般比下行要慢。。。还有另外两个非常规原因:4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事.^_^这个可能被用的不多。PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

6、减少页面加载时间的方法

（1）优化图片

（2）图像格式的选择，GIF 提供的颜色较少，可用在一些对颜色要求不高的地方。

（3）优化css，压缩合并css

（4）网址后加斜杠，如 www.wikid.com/ 目录，会判断这个目录是什么文件类型，或者是目录

（5）标明高度和宽度。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，

也影响浏览体验。当浏览器知道了高度和宽度参数后，即是图片暂时无法显示，页面也会腾出图片的空位，额按后继续加载后面的内容。从而加载时间快了，

体验变好了

（6）减少http 请求，合并图片，合并文件

7、FOUC，无样式内容闪烁，如何避免FOUC。

FOUC 即 Flash Of Unstyled Content ，<style type='text/css' media='all'>@import '../fous.css'</style>

而引用css文件的@important就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的css文件，因此，在页面DOM加载完成到css导入完成

中间会有一段时间页面上的内容没有样式，这段时间的长短跟网速，电脑速度都有关系。解决方法，只要在<head>之间加入一个<link>或者<script>元素就行了。

8、doctype（文档类型）的作用是什么？你知道多少种文档类型

此标签可告知浏览器文档使用哪种html或者xhtml规范。该标签可声明三种DTD类型，分别表示严格版，过渡版本以及基于框架的HTML文档。有三种：

Strict，Transitional，以及Frameset.

9、浏览器标准模式和怪异模式之间的区别是什么？

W3C标准推出后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来之前，很多页面都是根据旧的渲染方法编写，如果用的

是标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法。这样浏览器就产生了Quircks mode 和

Standard mode ，两种渲染方法共存在一个浏览器上。

IE盒子模型和标准W3C盒模型：ie 的width 包括：padding ，boder 而标准的width不包括

在js中判断浏览器以何种方式解析？

document对象有个属性compatMode，它有两个值：BackCompat 对应quirks mode；CSS1Compat 对应strict mode

10、data- 属性

用来为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute 方法来获取。

0 0