Web前端经典面试试题及答案3

线程与进程的区别

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

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

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

从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

说说你对语义化的理解?

1:去掉或样式丢失的时候能让页面呈现清晰的结构:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)。
4.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重。
6.便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化

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

  1. 静态内容和动态内容分服务器存放,使用不同的服务器处理请求。处理动态内容的只处理动态内容,不处理别的,提高效率,这样使得CDN(内容分发网络)缓存更方便

2、 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com把前面的 lh4换成 lh3,lh6 啥的,都照样能够访问,像地图之类的需要大量并发下载图片的站点,这个非常重要。)

3、跨域不会传cookie,节省宽带;举例说一下:
twitter 的主站 http://twitter.com ,用户的每次访问,都会带上自己的cookie ,挺大的。假如twitter 的图片放在主站域名下,那么用户每次访问图片时,request header 里就会带有自己的cookie ,header 里的cookie 还不能压缩,而图片是不需要知道用户的cookie 的,所以这部分带宽就白白浪费了。
写主站程序时,set-cookie 也不要set 到图片的域名上。
在小流量的网站,这个cookie 其实节省不了多少带宽,当流量如facebook twitter 时,节省下来就很可观了。

4.对于UGC的内容和主站隔离,防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名,而是一个完全独立的第三方域名。
5.数据做了划分,甚至切到了不同的物理集群,通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题,带宽是次要的,安全隔离才是主要的。关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走https的话,还有要多买证书和部署的问题。

请说出三种减少页面加载时间的方法。

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

如果你参与到一个项目中,发现他们使用Tab来缩进代码,但是你喜欢空格,你会怎么做?

  • 建议这个项目使用像EditorConfig(http://editorconfig.org/)之类的规范
  • 为了保持一致性,接受项目原有的风格
  • 直接使用VIM的retab命令

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

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

<style type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。

doctype(文档类型)的作用是什么?你知道多少种文档类型?

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

HTML 4.01规定了三种文档类型:Strict、Transitional以及Frameset。

XHTML 1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。

Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

在js中如何判断当前浏览器正在以何种方式解析?

document对象有个属性compatMode,它有两个值:BackCompat对应quirks mode(怪异模式),CSS1Compat对应strict mode。

使用XHTML的局限有哪些?

XHTML 与HTML的区别为:

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

如果网页内容需要支持多语言,你会怎么做?

下面这些问题需要考虑:

应用字符集的选择,选择UTF-8编码
语言书写习惯&导航结构
数据库驱动型网站

data-属性的作用是什么?

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串

如果把HTML5看作做一个开放平台,那它的构建模块有哪些?

<nav>,<header>,<section>,<footer>等。

列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。

1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,content属性的值设为”.”,空亦是可以的。
4.浮动外部元素

讨论CSS hacks,条件引用或者其他

概述

由于不同的浏览器对于CSS的实现存在差别,为了在所有浏览器中呈现相同的效果,就需要针对特定的浏览器进行特定的处理。

所以这里面关键的技术是CSS过滤器(Css filters),使用CSS过滤器可以甄别出浏览器类型,从而为特定浏览器编写特定的CSS代码。

IE浏览器hack

最简单的方法是使用条件注释,微软的特定做法:

    <!--[if IE 9]>  
    <style type="text/css">  
    </style>  
    <![endif]-->  
       
    < !--[if IE]> Only IE <![endif]-->  
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->  

Firefox浏览器hack

对于FF1,2版本,使用body:empty,对于所有的FF版本,使用专有扩展:-moz,结合-document url-prefix(),这是FF扩展构造器用来标识FF浏览器的方法。

    /* Firefox 1 - 2 */  
    body:empty #firefox12  
    {  
    color:blue;  
    }  
       
    /* Firefox */  
    @-moz-document url-prefix()  
    {  
    #firefox { color:blue; }  
    }  

Safari浏览器hack

Safari和FF一样,使用CSS专有扩展,-webkit。


    /* Safari */  
    @media screen and (-webkit-min-device-pixel-ratio:0)  
    {  
    #safari { color:blue; }  
    }  
      
    body:first-of-type(1) .safari{  
    color:#ff0000;  
    }  

如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字,同时不利于搜索引擎。

  1. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

  .texthidden { 
display:block;
/*统一转化为块级元素*/
 overflow: hidden; 
width: 0; 
height: 0;
 }

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

你熟悉SVG样式的书写吗?

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

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

如何优化网页的打印样式?

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。打印样式示例如下:

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但打印样式表也应注意以下事项:

  • 打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。
  • 最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。
  • 隐藏掉不必要的内容。(@print div{display:none;})
  • 打印样式表中最好少用浮动属性,因为它们会消失。如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了

如果设计中使用了非标准的字体,你该如何去实现?

所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体替代的字体。

方法:

【参考网站】:https://www.cnblogs.com/yb880319/p/8472053.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容