1. 讲讲输入完网址按下回车, 到看到网页这个过程中发生了什么?
------ 域名解析
------ 发起 TCP 的 3 次握手
------ 建立 TCP 连接后发送 http 请求
------ 服务端响应 http 请求, 浏览器获得 html 代码
------ 浏览器解析 html 代码, 并请求 html 代码中的资源
------ 浏览器对页面进行渲染并呈现给用户
2. 谈谈你对前端性能优化的理解
a. 请求数量: 合并脚本和样式表, CSS Sprites, 拆分初始化负载, 划分主域
b. 请求带宽: 开启 GZip, 精简 JavaScript, 移除重复脚本, 图像优化, 将 icon 做成字体
c. 缓存利用: 使用 CDN, 使用外部 JavaScript 和 CSS, 添加 Expires 头, 减少 DNS 查找, 配置 ETag, 使 AjaX 可缓存
d. 页面结构: 将样式表放在顶部, 将脚本放在底部, 尽早刷新文档的输出
e. 代码校验: 避免 CSS 表达式, 避免重定向
3. 请简述盒模型
IE6 盒子模型与 W3C 盒子模型.
文档中的每个元素被描绘为矩形盒子. 盒子有四个边界: 外边距边界 margin, 边框边界 border, 内边距边界 padding 与内容边界 content.
CSS3 中有个 box-sizing 属性可以控制盒子的计算方式,
content-box:padding 和 border 不被包含在定义的 width 和 height 之内. 对象的实际宽度等于设置的 width 值和 border,padding 之和.(W3C 盒子模型)
border-box:padding 和 border 被包含在定义的 width 和 height 之内. 对象的实际宽度就等于设置的 width 值.(IE6 盒子模型)
4. 请你谈谈 Cookie 的弊端
a. 每个特定的域名下最多生成的 cookie 个数有限制
b. IE 和 Opera 会清理近期最少使用的 cookie,Firefox 会随机清理 cookie
c. cookie 的最大大约为 4096 字节, 为了兼容性, 一般不能超过 4095 字节
d. 安全性问题. 如果 cookie 被人拦截了, 那人就可以取得所有的 session 信息.
5. 浏览器本地存储
在 HTML5 中提供了 sessionStorage 和 localStorage.
sessionStorage 用于本地存储一个会话 (session) 中的数据, 这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁, 是会话级别的存储.
localStorage 用于持久化的本地存储, 除非主动删除数据, 否则数据是永远不会过期的.
6.web storage 和 cookie 的区别
a. Cookie 的大小是受限的
b. 每次你请求一个新的页面的时候 Cookie 都会被发送过去, 这样无形中浪费了带宽
c. cookie 还需要指定作用域, 不可以跨域调用
d. Web Storage 拥有 setItem,getItem 等方法, cookie 需要前端开发者自己封装 setCookie,getCookie
e. Cookie 的作用是与服务器进行交互, 作为 HTTP 规范的一部分而存在 , 而 Web Storage 仅仅是为了在本地 "存储" 数据而生
f. IE7,IE6 中的 UserData 通过简单的代码封装可以统一到所有的浏览器都支持 web storage
7. 线程与进程的区别
a. 一个程序至少有一个进程, 一个进程至少有一个线程
b. 线程的划分尺度小于进程, 使得多线程程序的并发性高
c. 进程在执行过程中拥有独立的内存单元, 而多个线程共享内存, 从而极大地提高了程序的运行效率
d. 每个独立的线程有一个程序运行的入口, 顺序执行序列和程序的出口. 但是线程不能够独立执行, 必须依存在应用程序中, 由应用程序提供多个线程执行控制
e. 多线程的意义在于一个应用程序中, 有多个执行部分可以同时执行. 但操作系统并没有将多个线程看做多个独立的应用, 来实现进程的调度和管理以及资源分配
8. 请说出三种减少页面加载时间的方法
a. 尽量减少页面中重复的 HTTP 请求数量
b. 服务器开启 gzip 压缩
c. css 样式的定义放置在文件头部
d. Javascript 脚本放在文件末尾
e. 压缩合并 Javascript,CSS 代码
f. 使用多域名负载网页内的多个文件, 图片
9. 什么叫优雅降级和渐进增强?
渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面, 保证最基本的功能, 然后再针对高级浏览器进行效果, 交互等改进和追加功能达到更好的用户体验.
优雅降级 graceful degradation:
一开始就构建完整的功能, 然后再针对低版本浏览器进行兼容.
区别:
a. 优雅降级是从复杂的现状开始, 并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的, 能够起作用的版本开始, 并不断扩充, 以适应未来环境的需要
c. 降级 (功能衰减) 意味着往回看; 而渐进增强则意味着朝前看, 同时保证其根基处于安全地带
10. 请解释一下 JavaScript 的同源策略
同源策略指的是: 协议, 域名, 端口相同, 同源策略是一种安全协议.
指一段脚本只能读取来自同一来源的窗口和文档的属性.
11. 浏览器的内核分别是什么?
IE 浏览器的内核 Trident,Mozilla 的 Gecko,Chrome 的 Blink(WebKit 的分支),Opera 内核原为 Presto, 现为 Blink;
12. 一个页面上有大量的图片(大型电商网站), 加载很慢, 你有哪些方法优化这些图片的加载, 给用户更好的体验.
a. 图片懒加载, 滚动到相应位置才加载图片.
b. 图片预加载, 如果为幻灯片, 相册等, 将当前展示图片的前一张和后一张优先下载.
c. 使用 CSSsprite,SVGsprite,Iconfont,Base64 等技术, 如果图片为 css 图片的话.
d. 如果图片过大, 可以使用特殊编码的图片, 加载时会先加载一张压缩的特别厉害的缩略图, 以提高用户体验.
13.iframe 的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe 无刷新文件上传
c. iframe 跨域通信
缺点:
a. iframe 会阻塞主页面的 Onload 事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的 http 请求
d. 会产生很多页面, 不容易管理.
14. 请阐述 table 的缺点
a. 太深的嵌套, 比如 table>tr>td>h3, 会导致搜索引擎读取困难, 而且, 最直接的损失就是大大增加了冗余代码量.
b. 灵活性差, 比如要将 tr 设置 border 等属性, 是不行的, 得通过 td
c. 代码臃肿, 当在 table 中套用 table 的时候, 阅读代码会显得异常混乱
d. 混乱的 colspan 与 rowspan, 用来布局时, 频繁使用他们会造成整个文档顺序混乱.
e. table 需要多次计算才能确定好其在渲染树中节点的属性, 通常要花 3 倍于同等元素的时间.
f. 不够语义
15. 简述一下 src 与 href 的区别
src 用于替换当前元素; href 用于在当前文档和引用资源之间确立联系.
src 是 source 的缩写, 指向外部资源的位置, 指向的内容将会嵌入到文档中当前标签所在位置
href 是 Hypertext Reference 的缩写, 指向网络资源所在位置, 建立和当前元素 (锚点) 或当前文档 (链接) 之间的链接
16. 行内元素有哪些? 块级元素有哪些? 空 (void) 元素有那些?
行内元素: a,b,span,img,input,strong,select,label,em,button,textarea
块级元素: div,ul,li,dl,dt,dd,p,h1-h6,blockquote
空元素: 即系没有内容的 HTML 元素, 例如: br,meta,hr,link,input,img
17. 简述同步和异步的区别
同步是阻塞模式, 异步是非阻塞模式.
同步就是指一个进程在执行某个请求的时候, 若该请求需要一段时间才能返回信息, 那么这个进程将会一直等待下去, 直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去, 而是继续执行下面的操作, 不管其他进程的状态. 当有消息返回时系统会通知进程进行处理, 这样可以提高执行的效率.
position 包含几种属性? absolute 和 relative 的区别?
static: 默认状态, 没有定位, 正常流
inherit: 从父元素集成 position 属性的值
fixed: 生成绝对定位的元素(相对于浏览器窗口进行定位)
absolute: 生成绝对定位的元素(相位与 static 定位以外的第一个父元素定位)
relative: 生成相对定位的元素(相对于其正常位置定位)
absolute 和 relative 区别: 父元素的 padding 对 relative 的子元素布局有影响, absolute 的子元素不受影响
JSONP 是什么? 它是如何实现跨域的? 为什么它可以实现跨域?
JSONP(JSON with Padding)是一个非官方的协议, 它允许在服务器端集成 Script tags 返回至客户端, 通过 javascript callback 的形式实现跨域访问.
由于同源策略的限制, XmlHttpRequest 只允许请求当前源 (域名, 协议, 端口) 的资源, 为了实现跨域请求, 可以通过 script 标签实现跨域请求(因为同源策略不阻止动态脚本插入, 并且将脚本看作是从提供 Web 页面的域上加载的), 然后在服务端输出 JSON 数据并执行回调函数, 从而解决了跨域的数据请求.
什么是闭包? 作用是什么?
闭包: 函数能被外部调用到, 则该作用连上的所有变量都会被保存下来.
作用:可以读取函数内部的变量;相当于划出了一块私有作用域, 避免数据污染;让变量始终保存在内存中
使用全局变量被认为是不好的习惯, 而且容易造成错误并且维护成本较高, 所以 js 可以采用闭包的方式读取函数的内部变量. 但是如果大量使用闭包就会造成过多的变量始终保存在内存中, 会造成内存泄漏.
一个简单的闭包例子:
- function f1(){
- var n=999;
- function f2(){
- alert(n);
- }
- return f2;
- }
- var result=f1();
- result(); // 999
谈谈你对预加载的理解?
Web 预加载指的是在网页全加载完成之前, 在页面优先显示一些主要内容, 以提高用户体验. 对于一个较庞大的网站, 如果没有使用预加载技术, 用户界面就会长时间显示一片空白, 直到资源加载完成, 页面才会显示内容.
例如, 可以通过 js 预先从服务加载图片资源(动态创建 Image, 设置 src 属性), 只要浏览器把图片下载到本地, 就会被缓存, 再次请求相当的 src 时就会优先寻找浏览器缓存, 提高访问速度.
图片如何压缩?
可以使用一些在线的图片压缩工具
优先用 png 而不是 gif
压缩 png
去掉 jpg 的 metadata
压缩 gif 动画
尝试使用 png8
避免使用 AlphaImageLoader
压缩动态生成的图像
使 favicon 更小 可缓存
使用 CSS Sprites
23. 压缩文件有哪些方法?
使用 Grunt,Sass,ant 压缩
24. 什么情况下会碰到跨域问题? 有哪些解决方法?
跨域问题是这是浏览器为了安全实施的同源策略导致的, 同源策略限制了来自不同源的 document, 脚本, 同源的意思就是两个 URL 的域名, 协议, 端口要完全相同.
script 标签 jsonp 跨域, nginx 反向代理, node.js 中间件代理跨域, 后端在头部信息设置安全域名, 后端在服务器上设置 cors.
ES5 的继承和 ES6 的继承有什么区别?
ES5 的继承时通过 prototype 或构造函数机制来实现. ES5 的继承实质上是先创建子类的实例对象, 然后再将父类的方法添加到 this 上(Parent.apply(this)).
ES6 的继承机制完全不同, 实质上是先创建父类的实例对象 this(所以必须先调用父类的 super()方法), 然后再用子类的构造函数修改 this.
具体的: ES6 通过 class 关键字定义类, 里面有构造方法, 类之间通过 extends 关键字实现继承. 子类必须在 constructor 方法中调用 super 方法, 否则新建实例报错. 因为子类没有自己的 this 对象, 而是继承了父类的 this 对象, 然后对其进行加工. 如果不调用 super 方法, 子类得不到 this 对象.
ps:super 关键字指代父类的实例, 即父类的 this 对象. 在子类构造函数中, 调用 super 后, 才可使用 this 关键字, 否则报错.
HTTP 状态码知道哪些?
100 Continue 继续, 一般在发送 post 请求时, 已发送了 http header 之后服务端将返回此信息, 表示确认, 之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求, 但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置.
302 Found 临时性重定向.
303 See Other 临时性重定向, 且总是使用 GET 请求新的 URI.
304 Not Modified 自从上次请求后, 请求的网页未修改过.
400 Bad Request 服务器无法理解请求的格式, 客户端不应当尝试再次使用相同的内容发起请求.
401 Unauthorized 请求未授权.
403 Forbidden 禁止访问.
404 Not Found 找不到如何与 URI 相匹配的资源.
500 Internal Server Error 最常见的服务器端错误.
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护).
未完, 不定期更新!
timg.jpg
来源: http://www.jianshu.com/p/6e87b9cb3842