常见知识点总结

一、输入URL,按下enter，发生了什么?

1、域名解析，浏览器解析域名对应的IP地址

2、发起TCP的3次握手

3、建立TCP链接，发起http请求

4、服务器响应http请求，返回相应的页面资源（html代码）

5、浏览器解析html代码，并请求html代码中的资源（css代码、图片资源等）

6、浏览器对面进行渲染呈现给用户。

二、前端性能优化的理解

1、请求数量：合并样式表和脚本、CSS Sprites、拆分初始化加载、划分主域

2、请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体

3、缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使用Ajax缓存

4、页面结构：将样式表放置于顶部，将脚本放置于底部

5、代码校验：避免CSS表达式、避免重定向。

三、介绍盒子模型

有两种盒子模型：IE6盒子模型，W3C盒子模型。

文档中的每个元素都被描绘为矩形盒子，盒子有四个边界：外边距边界margin，边框边界border，内边距边界padding，内容边界content。

CSS3中有个box-sizing属性可以控制盒子的计算方式：

content-box：W3C盒子模型，padding和border不被包含在定义的width和height内；

border-box：IE6盒子模型，padding和border被包含在定义的width和height内。

四、简述Cookie的弊端

1、每个特定的域名下最多生成的Cookie个数有限制

2、IE和opera会清理近期最少使用的cookie,firefox会随机清理cookie

3、cookie的最大大约为4096字节，为了兼容性，一般不超过4085字节

4、安全性问题，如果cookie被人拦截了，即可取得所有的session信息。

五、优雅降级和渐进增强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，最后再针对高级浏览器进行效果、交互等改进和追加功能达到最好的用户体验。

优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。

两者区别：

1、优雅降级是从复杂的现状开始，并试图减少用户体验的供给

2、渐进增强是从基础的，可实用的版本开始，并不断扩充，以适应未来环境的需要

3、降级以为着往回看，渐进意味着朝前看，同时保证其根基处于安全地带。

六、简述Web Storagea和Cookie的区别

1、cookie的大小是受限的；

2、每次请求一个新页面的时候cookie都会被发送过去，无形中浪费了带宽

3、cookie需要指定作用域，不可跨域使用

4、Web Storage拥有setItem，getItem方法，cookie需要开发者自己封装方法

5、cookie的作用是与服务器进行交互，作为http规范的一部分存在；Web Storage是为了在本地“存储”数据存在

6、IE6、IE7中的UserData通过简单的代码封装可以统一到所有浏览器支持Web Storage。

七、谈谈线程与进程

1、一个程序至少有一个进程，一个进程最少有一个线程

2、线程的划分尺度小于进程，使得多线程程序的并发性高

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

4、每个独立的线程有一个程序运行的入口，顺序执行序列和程序的出口，但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制

5、多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。

八、标签语义化的理解

1、页面结构清晰

2、有利于SEO

3、方便其他设备解析，如屏幕阅读器

4、便于维护和开发，语义化更具可读性，减少了差异化。

九、优化图片加载方法

1、图片懒加载，滚动到相应位置才加载图片，可以使用脚本监控滚动位置，当图片位置出现或即将出现在可视区域时，进行加载

2、图片预加载，如果为幻灯片，相册等，将当前展示图的前一张和后一张优先加载

3、使用CSS Sprites、SVGsprite、Iconfont、Base64等技术

4、若图片过大，可适用特殊编码的图片，加载时先加载一张压缩的缩略图，以提高用户体验。