在求职的过程中，我可是被各种面试题虐得体无完肤，其中的心酸只有经历过才知道啊！为此，我总结了一些前端常见的面试题用于磨炼磨炼基础不扎实的自己，求面试官就别再刁难我了吧！
img 的alt和title有什么区别
- 通常当鼠标滑动到元素上的时候显示
- alt 是 img 的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析
从浏览器地址栏输入 url 到显示⻚面的步骤
- 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;
- 服务器交给后台处理完成后返回数据,浏览器接收文件( HTML 、 JS 、 CSS 、图象等);
- 浏览器对加载到的资源( HTML 、 JS 、 CSS 等)进行语法解析,建立相应的内部数据结构(如 HTML 的 DOM );
- 载入解析到的资源文件,渲染⻚面,完成。
如何进行网站性能优化
content方面
- 减少 HTTP 请求:合并文件、 CSS 精灵、 inline Image
- 减少 DNS 查询: DNS 缓存、将资源分布到恰当数量的主机名
- 减少 DOM 元素数量 Server 方面
- 使用 CDN
- 配置 ETag
- 对组件使用 Gzip 压缩 Cookie 方面
- 减小 cookie 大小 css 方面
- 将样式表放到⻚面顶部
- 不使用 CSS 表达式
- 使用 link 不使用 @import Javascript 方面
- 将脚本放到⻚面底部
- 将 javascript 和 css 从外部引入
- 压缩 javascript 和 css
- 删除不需要的脚本
- 减少 DOM 访问 图片方面
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化 css 精灵
- 不要在 HTML 中拉伸图片
HTTP 状态码及其含义
- 1XX:信息状态码
100 continue 继续,一般在发送 post 请求时,已发送了 http header 之后服务端将返回此信息,表示确认,之后发送具体参数信息
- 2XX :成功状态码
- 200 OK 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求,但尚未处理
- 3XX :重定向
- 301 Moved Permanently 请求的网⻚已永久移动到新位置
- 302 Found 临时性重定向
- 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI
- 304 Not Modified 自从上次请求后,请求的网⻚未修改过
- 4XX :客户端错误
- 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求
- 401 Unauthorized 请求未授权
- 403 Forbidden 禁止访问
- 404 Not Found 找不到如何与 URI 相匹配的资源
- 5XX: 服务器错误
- 500 Internal Server Error 最常⻅的服务器端错误
- 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护
请描述一下cookies,sessionStorage和localStorage的区别?
- cookie是网站为了标示用户身份而储存在用户本地终端( Client Side )上的数据(通常经过加密)
- cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回 传递
- sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存
- 存储大小:
- cookie 数据大小不能超过 4k
- sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大
- 有期时间:
- localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
WEB 标准以及 W3C 标准是什么 ?
标签闭合、标签小写、不乱嵌套、使用外链 css 和 js 、结构行为表现的分离
行内元素有哪些?块级元素有哪些? 空 (void) 元素有那些?行内元素和块级元素有什么区别?
- 行内元素有: a b span img input select strong
- 块级元素有: div ul ol li dl dt dd h1 h2 h3 h4... p
- 空元素: <br> <hr> <img> <input> <link> <meta>
- 行内元素不可以设置宽高,不独占一行
- 块级元素可以设置宽高,独占一行
HTML 全局属性 (global attribute) 有哪些？
- class: 为元素设置类标识
- data-* : 为元素增加自定义属性
- draggable : 设置元素是否可拖拽
- id : 元素 id ,文档内唯一
- lang : 元素内容的的语言
- style : 行内 css 样式
- title : 元素相关的建议信息
Canvas 和 Svg 有什么区别?
- Svg绘制出来的每一个图形的元素都是独立的 DOM 节点,能够方便的绑定事件或用来修改。canvas 输出的是一整幅画布
- 输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯⻮。而canvas 输出标量画布,就像一张图片一样,放大会失真或者锯
网⻚验证码是干嘛的,是为了解决什么安全问题？
- 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
- 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
viewpoint
- width 设置 viewport 宽度,为一个正整数,或字符串 ‘device-width’
- device-width 设备宽度
- height 设置 viewport 高度,一般设置了宽度,会自动解析出高度,可以不用设置
- initial-scale 默认缩放比例(初始缩放比例),为一个数字,可以带小数
- minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
- maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
- user-scalable 是否允许手动缩放
你能描述一下渐进增强和优雅降级之间的不同吗？
- 渐进增强:针对低版本浏览器进行构建⻚面,保证最基本的功能,然后再针对高级浏览器 进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
简述一下 src 与 href 的区别
- src 用于替换当前元素, href 用于在当前文档和引用资源之间确立联系
- src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素
<script src="index.js"></script>当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部
- href是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理
