HTML5&CSS3总结

1. 选择器优先级
一般来说，选择器的优先级（从上往下依次降低）是：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器  

2. required 的查找模块的顺序

首先加载核心模块,不管有没有同名/同目录的情况下,核心模块优先加载.

其次按照相对路径/绝对路径加载文件模块(加载顺序,首先试图按照路径查找 .js 扩展名的文件,如果没有,试图按照路径查找 .json 扩展名的文件,如果还是没有,就按照路径查找 .node 扩展名的c++模块了)

最后搜索 node_modules 目录下通过npm下载的第三方模块. 

3. 比较Ajax与Flash的优缺点

1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。

2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度

3.Ajax的劣势：1.它可能破坏浏览器的后退功能   2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。

4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间  4.性能问题

4. iframe 的优缺点？

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：

1. iframe 会阻塞主页面的 Onload 事件

2. 即时内容为空，加载也需要时间

3. 没有语意

5. 请你谈谈 Cookie 的弊端？

缺点：

1.`Cookie`数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不

能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密

也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到

目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存

一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

6. IE和DOM事件流区别

1.执行顺序不一样

2.参数不一样

3.事件加不加 on

4.this 指向问题

7、怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点

createDocumentFragment() //创建一个 DOM 片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的 Name 属性的值

getElementById() //通过元素 Id，唯一性

8、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){}) 有什么不同？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

9、简述 link 和 import 的区别？

区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import

属于 CSS 范畴，只能加载 CSS。

区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入

以后加载。

区别 3：link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏

览器不支持。

区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

10. javascript 的同源策略

一段脚本只能读取来自于同一来源的窗口和文档属性，这里的同一来源指的是域名、协议、端口相同

11、div+css 的布局较 table 布局有什么优点？

改版的时候更方便 只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

12. Web Storage与Cookie有何区别？

1. Web Storage 是为了更大容量存储设计的。Cookie 的大小

是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费

了带宽，

2. 另外 cookie 还需要指定作用域，不可以跨域调用。

3. Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie

需要前端开发者自己封装 setCookie，getCookie。

4. 但是 Cookie 也是不可以或缺的：Cookie

的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为

了在本地“存储”数据而生

13、px 和 em 的区别

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。

em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,

10px=0.625em。

14. 列举浏览器对象模型 BOM 里常用的对象以及window 对象的常用方法

对象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

15、本地对象，内置对象和宿主对象

本地对象为 array obj regexp 等可以 new 实例化

内置对象为 global Math 等不可以实例化的

宿主为浏览器自带的 document,window 等

16. 前端性能优化方法

1、内容优化

① 尽量减少HTTP请求：常见方法包括合并多个CSS文件和JavaScript文件，利用CSS Sprites整合图像，Image map（图像中不同的区域设置不同的链接），内联图象（使用 data: URL scheme 在实际的页面嵌入图像数据）等。

② 减少DNS查找，一般dns查找需要花费20-120ms，Windows的DNS缓存，可以通过ipconfig /displaydns 这个命令来查看。

③ 避免重定向

④ 使Ajax可缓存

⑤ 延迟加载组件：考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构可以稍后再加载，根据这个优先级进行设定。

⑥ 预加载组件：预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

⑦ 减少DOM元素数量：页面中存在大量DOM 元素，会导致JavaScript遍历DOM的效率变慢。

⑧根据域名划分页面内容：把页面内容划分成若干部分可以使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间（否则与第2条冲突）。

⑨ 最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

⑩ 避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2、服务器优化

① 使用内容分发网络（CDN）：把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
添加Expires或Cache-Control信息头：对于静态内容，可设置文件头过期时间Expires的值为“Never expire（永不过期）”；对于动态内容，可使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
② Gzip压缩

③ 设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

④ 提前刷新缓冲区：当用户请求一个页面时，服务器会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同⑤时处理剩余的HTML页面。

⑥ 对Ajax请求使用GET方法：当使用XMLHttpRequest时，浏览器中的POST方法会首先发送文件头，然后才发送数据。因此使用GET最为恰当。

⑦ 避免空的图像src

3、Cookie优化

① 减小cookie大小：去除不必要的coockie，并使coockie体积尽量小以减少对用户响应的影响

② 针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名。

4、CSS优化

① 将CSS代码放在HTML页面的顶部

② 避免使用CSS表达式：CSS表达式在执行时候的运算量非常大，会对页面性能产生大的影响

③ 使用来代替@import

④ 避免使用Filters：IE独有属性AlphaImageLoader用于修正IE 7以下版本中PNG图片的半透明效果，但它的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。

5、JavaScript优化

① 将JavaScript脚本放在页面的底部

② 将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

③ 缩小JavaScript和CSS

④ 删除重复的脚本

⑤ 最小化DOM的访问：使用JavaScript访问DOM元素比较慢

⑥ 开发智能的事件处理程序

6、图像优化

① 优化图片大小
② 通过CSS Sprites优化图片
③ 不要在HTML中使用缩放图片
④ favicon.ico要小而且可缓存

7、针对移动优化

① 保持组件大小在25KB以下：主要是因为iPhone不能缓存大于25K的文件（注意这里指的是解压缩后的大小）。

② 将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中获取多个组件。