前端面试题及答案,网络和优化

1.1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求,浏览器得到html代码

e. 浏览器解析html代码,并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

参考《输入URL到展现页面的全过程

1.2、谈谈你对前端性能优化的理解

a. 请求优化:

合并JS和CSS,减少DNS查找次数,避免重定向,使用GET完成AJAX请求,减小请求中的Cookie,缓存资源,使用CDN,开启GZip,压缩HTML页面,开启长连接,避免行内脚本阻塞并行下载,少用iframe(阻塞onload事件,影响并行下载)。

b. CSS优化:

样式表置于页面顶部,避免使用CSS表达式,使用外部JS和CSS,压缩JS和CSS,避免滤镜。

c. JavaScript优化:

脚本置于页面底部,减少DOM访问,减少重绘和重排,尽量使用局部变量,使用定时器分割大型任务,用合适的正则操作字符串,惰性模式减少分支,事件委托,第三方代码异步加载,节流与去抖动,使用localStorage替代cookie。

d. 图片优化:

内联图使用Data:URL,压缩图片或使用WebP格式,固定图片尺寸,图片预加载,图片延迟加载,使用字体矢量图标,Sprites图片。

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

a. 尽量减少页面中重复的HTTP请求数量

b. 服务器开启gzip压缩

c. css样式的定义放置在文件头部

d. Javascript脚本放在文件末尾

e. 压缩合并Javascript、CSS代码

f. 使用多域名负载网页内的多个文件、图片

1.4、请介绍下cache-control

每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略

Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久

Cache-Control 头在 HTTP/1.1 规范中定义,取代了之前用来定义响应缓存策略的头(例如 Expires)。

1.5、一次js请求一般情况下有哪些地方会有缓存处理?

a. 浏览器端存储

b. 浏览器端文件缓存

c. HTTP缓存304

d. 服务器端文件类型缓存

e. 表现层&DOM缓存

1.6、一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

a. 图片懒加载,滚动到相应位置才加载图片。

b. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。

d. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

1.7、谈谈以前端角度出发做好SEO需要考虑什么?

a. 了解搜索引擎如何抓取网页和如何索引网页

b. meta标签优化

c. 关键词分析

d. 付费给搜索引擎

e. 链接交换和链接广泛度(Link Popularity)

f. 合理的标签使用

1.8HTTP2.0有哪些提升?

a. HTTP 2.0中的二进制分帧层突破了限制:客户端和服务器可以把HTTP消息分解为互不依赖的帧,然后乱序发送,最后再在另一端把它们重新组合起来。

b. 把HTTP消息分解为很多独立的帧之后,就可以通过优化这些帧的交错和传输顺序,进一步提升性能。

c. HTTP 2.0通过让所有数据流共用同一个连接,可以更有效地使用TCP连接。

d. 服务器除了对最初请求的响应外,服务器还可以额外向客户端推送资源,而无需客户端明确地请求。

e. HTTP 2.0会压缩首部元数据,针对之前的数据只编码发送差异数据。

1.9TCPUDP的区别

a. UDP 协议的头长度不到TCP头的一半,所以同样大小的包里UDP携带的净数据比TCP包多。

b. TCP会发响应,UDP不会。并且UDP没有Seq和Ack等概念,省去了建立连接的开销,DNS解析就使用UDP协议。TCP有3次握手4次挥手。

c. UDP不能分割报文段(MSS),超过MTU的时候,发送方的网络层负责分片,接收方收到分片后再组装起来,这个过程会消耗资源,降低性能。

d. UDP没有重传机制,丢包的时候就不能按需发送。TCP有超时重传、快速重传和SACK。

1.10URIURL

URI(Uniform Resource Identifier):统一资源标识符。

URL(Uniform Resoure Locator):统一资源定位符,通俗的说法是网址。

URI表示某一互联网资源,而URL表示资源地点,所以URL是URI的子集。

原文地址:https://www.cnblogs.com/binmengxue/p/12120109.html

时间: 2024-11-09 14:19:29

前端面试题及答案,网络和优化的相关文章

最全的web前端面试题及答案整理 你不得不看

面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下) (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设

web前端面试题及答案

1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下) 答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 块

前端面试题及答案整理(一)(转)

各公司秋招很快就开始了,最近在准备面试的东西,干脆将发现的各类 面试题整理一下共享出来,大部分面试题是没有标准答案的,我给出的答案也是仅供参考,如果有更好的解答欢迎在评论区留言. Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.inde

史上最全前端面试题(含答案) - Web开发面试题

HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更广泛的设备所访问.更少的代码和组件,容易维 护.改版方便,不需要变动页面内容.提供打印版本而不需要复制内容.提高网站易用性: 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正

前端面试题_2.web前端性能优化的方式

从前的日色变得慢,车,马,邮件都慢······ 巴特,现在前端是庞大的,针对方方面面的资源都有不同的方式. 站在用户角度,我们希望页面加载得更快.页面对用户的操作响应得更及时,能够给用户提供更为友好的体验. 站在服务商的角度,我们希望前端优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 1. 减少请求资源或者次数 尽量合并压缩 css 和 js 文件:为了减少http请求次数以及减少请求资源的大小 采用图片懒加载(延迟加载):减少页面第一次加载过程中http的请求次数 能用cs

Java -- Web前端面试题及答案(需更深入了解)

Web前端方面 1.CSS引入的方式有哪些? 1)外联:<link>标签 2)内联:<style>标签 3)元素内嵌:元素的style属性 2.CSS选择符有哪些? 标签选择符.类选择符.id选择符.组合选择符 3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 4."=="和"==="的不同 ==只比较值,===比较值和数据类型 5.什么是盒

前端面试题及答案,HTML

1.1.<img>标签上title属性与alt属性的区别是什么? alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的.且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短. 这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等. title属性为设置该属性的元素提供建议性的信息.使用title属性提供非本质的额外信息. 1.2.分别写出以下几个HTML标签:文字加粗.下标.居中.字体 加粗:<b>.&l

前端面试题及答案,CSS

1.1.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div style="clear:both"></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasL

一份来自于全球的前端面试题清单,看看老外喜欢考哪些题(部分有答案)

方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国内的题目,如有错误,欢迎指正.有些原链可能已无法打开,有些可能需要代理才能查看. 一.HTML [HTML related interview questions] 1.What is doctype? Why do u need it? 2.What is the use of data-* at