烦大家点赞关注走一波哦~~~整理不易,谢谢啦~
前端面试题整理
面试面试
目录
$HTML, HTTP,web综合问题1、前端需要注意哪些 SEO2、 <img>的 title和 alt有什么区别3、 HTTP的几种请求方法用途4、从浏览器地址栏输入 url到显示页面的步骤5、如何进行网站性能优化6、HTTP状态码及其含义7、语义化的理解8、介绍一下你对浏览器内核的理解9、 html5有哪些新特性、移除了那些元素?10、 HTML5的离线储存怎么使用,工作原理能不能解释一下?11、浏览器是怎么对 HTML5的离线储存资源进行管理和加载的呢12、请描述一下 cookies, sessionStorage 和 localStorage 的区别13、 iframe有那些缺点?14、 WEB标准以及W3C标准是什么?15、 xhtml和 html有什么区别?16、 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?17、行内元素有哪些?块级元素有哪些? 空( void )元素有那些?行内元素和块级元素有什么区别?18、 HTML全局属性( global attribute )有哪些19、 Canvas和 SVG有什么区别?20、 HTML5 为什么只需要写 <!DOCTYPE HTML>?21、如何在页面上实现一个圆形的可点击区域?22、网页验证码是干嘛的,是为了解决什么安全问题
$CSS部分1、 css sprite是什么,有什么优缺点2、 display: none;与 visibility: hidden ;的区别3、 link与 @import的区别4、什么是 FOUC?如何避免5、如何创建块级格式化上下文( block formatting context ), BFC有什么用7、清除浮动的几种方式,各自的优缺点8、为什么要初始化 CSS样式?9、 css3有哪些新特性10、 display有哪些值?说明他们的作用11、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?12、 CSS优先级算法如何计算?13、对 BFC规范的理解?
14、谈谈浮动和清除浮动15、 position的值, relative和absolute`定位原点是16、 display:inline-block 什么时候不会显示间隙?(携程)17、 PNG,GIF,JPG的区别及如何选18、行内元素 float:left后是否变为块级元素?19、在网页中的应该使用奇数还是偶数的字体?为什么呢?20、 ::before 和 :after中双冒号和单冒号有什么区别?解释一下这 2个伪元素的作用21、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
$JavaScript1、闭包2、说说你对作用域链的理解3、 JavaScript原型,原型链 ? 有什么特点?4、请解释什么是事件代理5、 Javascript如何实现继承?6、谈谈 This对象的理解7、事件模型8、 new操作符具体干了什么呢?9、 Ajax原理11、模块化开发怎么做?12、异步加载 JS的方式有哪些?13、那些操作会造成内存泄漏?14、 XML和 JSON的区别?15、谈谈你对 webpack的看法17、常见 web安全及防护原理18、用过哪些设计模式?19、为什么要有同源限制?20、 offsetWidth/offsetHeight , clientWidth/clientHeight与 scrollWidth/scrollHeight的区别21、 javascript有哪些方法定义对象22、常见兼容性问题?22、说说你对 promise的了解23、你觉得 jQuery源码有哪些写的好的地方25、 Node的应用场景26、谈谈你对 AMD、 CMD的理解27、那些操作会造成内存泄漏?28、 web开发中会话跟踪的方法有哪些29、介绍 js的基本数据类型30、介绍 js有哪些内置对象?31、说几条写 JavaScript的基本规范?32、 JavaScript有几种类型的值?,你能画一下他们的内存图吗?33、 javascript创建对象的几种方式?34、 eval是做什么的?35、 null,undefined 的区别?36、 ["1", "2", "3"].map(parseInt) 答案是多少?37、 javascript 代码中的 "use strict" ;是什么意思 ? 使用它区别是什么?38、 JSON的了解?39、js延迟加载的方式有哪些?
40、同步和异步的区别?41、渐进增强和优雅降级42、 defer和 async43、说说严格模式的限制44、 attribute和 property的区别是什么?45、谈谈你对 ES6的理解46、ECMAScript6 怎么写class么,为什么会出现class这种东西?
$编程题1、写一个通用的事件侦听器函数2、如何判断一个对象是否为数组3、冒泡排序4、快速排序5、编写一个方法 求一个字符串的字节长度
$其他1、谈谈你对重构的理解2、什么样的前端代码是好的3、对前端工程师这个职位是怎么样理解的?它的前景会怎么样?4、你觉得前端工程的价值体现在哪5、平时如何管理你的项目?
人事面
面试完你还有什么问题要问的吗你有什么爱好?你最大的优点和缺点是什么?你为什么会选择这个行业,职位?你觉得你适合从事这个岗位吗?你有什么职业规划?你对工资有什么要求?如何看待前端开发?未来三到五年的规划是怎样的?
一些问题
文资料来源于
https://github.com/qiu-deqing/FE-interview
目前已在github获得4700个star,在前端知识项目中名列第一。
本文主要分享该项目中的HTML, HTTP,web综合问题的知识点及面试题部分,后续分享剩余5个章节。
目录
- 前端需要注意哪些SEO
- web开发中会话跟踪的方法有哪些
- <img>的title和alt有什么区别
- doctype是什么,举例常见doctype及特点
- HTML全局属性(global attribute)有哪些
- 什么是web语义化,有什么好处
- HTTP method
- 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
- HTTP request报文结构是怎样的
- HTTP response报文结构是怎样的
- 如何进行网站性能优化
- 什么是渐进增强
- HTTP状态码及其含义
欢迎关注笔者,优质文章都在这里等你。
常见排序算法的时间复杂度,空间复杂度
前端需要注意哪些SEO
- 合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可
- 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
- 重要内容不要用js输出:爬虫不会执行js获取内容
- 少用iframe:搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
web开发中会话跟踪的方法有哪些
- cookie
- session
- url重写
- 隐藏input
- ip地址
<img>的title和alt有什么区别
- title是global attributes之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
- alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
doctype是什么,举例常见doctype及特点
- <!doctype>声明必须处于HTML文档的头部,在<html>标签之前,HTML5中不区分大小写
- <!doctype>声明不是一个HTML标签,是一个用于告诉浏览器当前HTMl版本的指令
- 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染,一些浏览器有一个接近标准模型。
- 在HTML4.01中<!doctype>声明指向一个DTD,由于HTML4.01基于SGML,所以DTD指定了标记规则以保证浏览器正确渲染内容
- HTML5不基于SGML,所以不用指定DTD
HTML全局属性(global attribute)有哪些
参考资料:MDN: html global attribute或者W3C HTML global-attributes
- accesskey:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
- class:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素
- contenteditable: 指定元素内容是否可编辑
- contextmenu: 自定义鼠标右键弹出菜单内容
- data-*: 为元素增加自定义属性
- dir: 设置元素文本方向
- draggable: 设置元素是否可拖拽
- dropzone: 设置元素拖放类型: copy, move, link
- hidden: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果
- id: 元素id,文档内唯一
- lang: 元素内容的的语言
- spellcheck: 是否启动拼写和语法检查
- style: 行内css样式
- tabindex: 设置元素可以获得焦点,通过tab可以导航
- title: 元素相关的建议信息
- translate: 元素和子孙节点内容是否需要本地化
什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义,如Microformat通过添加符合规则的class描述信息 为什么需要语义化:
- 去掉样式后页面呈现清晰的结构
- 盲人使用读屏器更好地阅读
- 搜索引擎更好地理解页面,有利于收录
- 便团队项目的可持续运作及维护
HTTP method
- 一台服务器要与HTTP1.1兼容,只要为资源实现GET和HEAD方法即可
- GET是最常用的方法,通常用于请求服务器发送某个资源。
- HEAD与GET类似,但服务器在响应中值返回首部,不返回实体的主体部分
- PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档,或者,如果那个URL已经存在的话,就用干这个主体替代它
- POST起初是用来向服务器输入数据的。实际上,通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器,然后由服务器将其发送到要去的地方。
- TRACE会在目的服务器端发起一个环回诊断,最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断,用于验证请求是否如愿穿过了请求/响应链。
- OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
- DELETE请求服务器删除请求URL指定的资源
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
- 在浏览器地址栏输入URL
- 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
- 如果资源未缓存,发起新请求
- 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
- 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control:
- HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
- HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 浏览器解析URL获取协议,主机,端口,path
- 浏览器组装一个HTTP(GET)请求报文
- 浏览器获取主机ip地址,过程如下:
- 浏览器缓存
- 本机缓存
- hosts文件
- 路由器缓存
- ISP DNS缓存
- DNS递归查询(可能存在负载均衡导致每次IP不一样)
- 打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
- 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
- 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
- 客户端发送ACK=Y+1, Seq=Z
- TCP链接建立后发送HTTP请求
- 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
- 主动方发送Fin=1, Ack=Z, Seq= X报文
- 被动方发送ACK=X+1, Seq=Z报文
- 被动方发送Fin=1, ACK=X, Seq=Y报文
- 主动方发送ACK=Y, Seq=X报文
- 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
- 如果资源可缓存,进行缓存
- 对响应进行解码(例如gzip压缩)
- 根据资源类型决定如何处理(假设资源为HTML文档)
- 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,以下分别解释
- 构建DOM树:
- Tokenizing:根据HTML规范将字符流解析为标记
- Lexing:词法分析将标记转换为对象并定义属性和规则
- DOM construction:根据HTML标记关系将对象组成DOM树
- 解析过程中遇到图片、样式表、js文件,启动下载
- 构建CSSOM树:
- Tokenizing:字符流转换为标记流
- Node:根据标记创建节点
- CSSOM:节点创建CSSOM树
- 根据DOM树和CSSOM树构建渲染树:
- 从DOM树的根节点遍历所有可见节点,不可见节点包括:1)script,meta这样本身不可见的标签。2)被css隐藏的节点,如display: none
- 对每一个可见节点,找到恰当的CSSOM规则并应用
- 发布可视节点的内容和计算样式
- js解析如下:
- 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
- HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
- 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
- 当文档完成解析,document.readState变成interactive
- 所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
- 浏览器在Document对象上触发DOMContentLoaded事件
- 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件
- 显示页面(HTML解析过程中会逐步显示页面)
HTTP request报文结构是怎样的
rfc2616中进行了定义:
- 首行是Request-Line包括:请求方法,请求URI,协议版本,CRLF
- 首行之后是若干行请求头,包括general-header,request-header或者entity-header,每个一行以CRLF结束
- 请求头和消息实体之间有一个CRLF分隔
- 根据实际请求需要可能包含一个消息实体 一个请求报文例子如下:
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
name=qiu&age=25
HTTP response报文结构是怎样的
rfc2616中进行了定义:
- 首行是状态行包括:HTTP版本,状态码,状态描述,后面跟一个CRLF
- 首行之后是若干行响应头,包括:通用头部,响应头部,实体头部
- 响应头部和响应实体之间用一个CRLF空行分隔
- 最后是一个可能的消息实体 响应报文例子如下:
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1
{"name": "qiu", "age": 25}
如何进行网站性能优化
雅虎Best Practices for Speeding Up Your Web Site:
- 减少HTTP请求:合并文件、CSS精灵、inline Image
- 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
- 避免重定向:多余的中间访问
- 使Ajax可缓存
- 非必须组件延迟加载
- 未来所需组件预加载
- 减少DOM元素数量
- 将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
- 减少iframe数量
- 不要404
- 使用CDN
- 添加Expires或者Cache-Control响应头
- 对组件使用Gzip压缩
- 配置ETag
- Flush Buffer Early
- Ajax使用GET进行请求
- 避免空src的img标签
- 减小cookie大小
- 引入资源的域名不要包含cookie
- 将样式表放到页面顶部
- 不使用CSS表达式
- 使用不使用@import
- 不使用IE的Filter
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
- 合理设计事件监听器
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小并且可缓存
- 保证组件小于25k
- Pack Components into a Multipart Document
什么是渐进增强
渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:
- 所有浏览器都必须能访问基本内容
- 所有浏览器都必须能使用基本功能
- 所有内容都包含在语义化标签中
- 通过外部CSS提供增强的布局
- 通过非侵入式、外部javascript提供增强功能
- end-user web browser preferences are respected
HTTP状态码及其含义
参考RFC 2616
- 1XX:信息状态码
- 100 Continue:客户端应当继续发送请求。这个临时相应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。服务器必须在请求万仇向客户端发送一个最终响应
- 101 Switching Protocols:服务器已经理解力客户端的请求,并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后,服务器将会切换到Upgrade消息头中定义的那些协议。
- 2XX:成功状态码
- 200 OK:请求成功,请求所希望的响应头或数据体将随此响应返回
- 201 Created:
- 202 Accepted:
- 203 Non-Authoritative Information:
- 204 No Content:
- 205 Reset Content:
- 206 Partial Content:
- 3XX:重定向
- 300 Multiple Choices:
- 301 Moved Permanently:
- 302 Found:
- 303 See Other:
- 304 Not Modified:
- 305 Use Proxy:
- 306 (unused):
- 307 Temporary Redirect:
- 4XX:客户端错误
- 400 Bad Request:
- 401 Unauthorized:
- 402 Payment Required:
- 403 Forbidden:
- 404 Not Found:
- 405 Method Not Allowed:
- 406 Not Acceptable:
- 407 Proxy Authentication Required:
- 408 Request Timeout:
- 409 Conflict:
- 410 Gone:
- 411 Length Required:
- 412 Precondition Failed:
- 413 Request Entity Too Large:
- 414 Request-URI Too Long:
- 415 Unsupported Media Type:
- 416 Requested Range Not Satisfiable:
- 417 Expectation Failed:
- 5XX: 服务器错误
- 500 Internal Server Error:
- 501 Not Implemented:
- 502 Bad Gateway:
- 503 Service Unavailable:
- 504 Gateway Timeout:
- 505 HTTP Version Not Supported:
您的转发+关注就是对笔者最大的支持,欢迎关注。
对大厂架构设计,BAT等厂家面试题解读,编程语言理论或者互联网圈逸闻趣事这些感兴趣,欢迎关注笔者,没有错,干货文章都在这里。
信大家都知道,图片对企业营销型网站建设来说,都是一项必不可少的元素,任何网站离开了图片,都无法形成一个完整的网站,并且网站效果也会非常差。虽然说图片的优势非常多,但前提是在合理使用的情况下,如果图片使用不合理,则有可能会起到适得其反的效果。因此,企业想要营销型网站效果更好,在制作网站时,就必须要将图片优化的更合理。接下来长沙网站建设创研科技就给大家分享四个图片的优化技巧。
网站图片必须添加属性
在HTML标签中,图片有ALT属性、TITLE属性两种标签,前者是在图片无法加载的时候才会显示出来的标签,而TITLE属性是在图片正常加载鼠标划上去显示的值,这样对于网站用户体验效果是非常有帮助的。另外对于搜索引擎来说,由于无法识别图片中的内容,只能通过属性来判断,所以为图片添加属性,还可以使网站对搜索引擎更友好,从而提高网站的优化效果。
图片的尺寸大小要合适
在网站的许多地方,图片的尺寸大小和比例都是固定的,那么我们在设计图片时,就需要根据这个尺寸大小和比例去设计,这样当图片上传之后,才会等比展示出来。否则的话,就会导致图片被拉伸或是缩放从而变形,失去体验感。另外由于PC端和移动端屏幕大小差异,因此在设计PC和移动页面图片时,要分开设计,不能共用,否则的话,就会导致另外一端的图片失去美感。
确定好统一的图片格式
虽然现在很多网站都支持多种图片格式,但是这里还是建议大家使用JPEG(或说.jpg)这一种格式,当然除去LOGO,因为LOGO有的背景需要透明,会采用PNG格式的。这是由于JPEG格式的图片的显示效果要比GIF和PNG有明显的优势,这样就能为网站塑造很好的用户体验效果,加深用户对网站的印象。另外,JPEG格式的图片会更加容易被搜索引擎收录,从而起到更好的网站优化效果。
控制好图片的文件大小
虽然说图片的文件大小是与其质量度成正比的,越大的图片质量就越好,越是清晰,而越小的图片,其失真就越严重,效果越差,从而使网站的体验感更差。虽然网站图片看似是越大越能起到更好的效果。但是我们还需要考虑到一个问题,那就是图片文件越大,那么用户打开时需要加载的东西就越多,这样网站打开的时间就要更长。但网站不能很快打开的话,用户又会离开,所以要控制好图片的文件大小,既保证网站快速打开,又不影响其质量。
总的来说,图片对于网站来说,是非常重要的,特别是对于企业需要依靠其来盈利的营销型网站。因为网站的页面是否精美,是否具有吸引力,大部分都是依靠图片来实现的,图片各方面都恰当的话,自然会为网站起到更大的助力作用,但如果图片要求不恰当的话,则会导致网站效果更差,反而会拖累网站。所以说,企业营销型网站如果想要实现更好的转化,取得更好的效果,那就千万不要忽视对图片的优化工作。