一、前端编程
1.你能描述一下渐进增强和优雅降级之间的不同吗?
答:
定义:
优雅降级（gracefuldegradation):一开始就构建站点的完整功能，然后针对浏览器测试和修复
渐进增强（progressiveenhancement):一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
都关注于同一网站在不同设备里不同浏览器下的表现程度
区别:
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站.而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。
“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。
理解:
"优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果.然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
"渐进增强"则是从浏览器支持的基本功能开始,首先为所有设备准备好清晰且语义化的html及完整内容,然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能.当浏览器升级时,它们会自动呈现并发挥作用.
参考自:渐进增强、优雅降级渐进增强和优雅降级
2.浏览器兼容问题:
问题1不同浏览器的标签默认的外补丁和内补丁不同.
即随便写几个标签,在不加样式控制的情况下,各自的margin和padding差异较大.
解决方法:CCS里:*{margin:0;padding:0}
问题2块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
会使得ie6后面的一块被顶到下一行.
解决方案:在float的标签样式中加入display:inline;将其转化为行内属性
问题3设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
原因:ie8之前的浏览器都会给标签一个最小默认的行高的高度.即使标签是空的,这个标签的高度还是会达到默认的行高.
问题4行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决:在display:block;后面加入display:inline;display:table;
问题5图片默认有间距
几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决:使用float属性为img布局
问题6标签最低高度设置min-height不兼容
因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px;height:auto!important;height:200px;overflow:visible;}
问题7透明度的兼容CSS设置
使用hacker
IE6认识的hacker是下划线_和*
IE7,遨游认识的hacker是*
问题8IEol的序号全为1,不递增
解决:li设置样式{display:list-item}
问题9
ie6,7不支持display:inline-block
解决方法:设置inline并触法haslayout
display:inline-block;*display:inline;*zoom:1
参考自:常见浏览器兼容性问题与解决方案
3.如何对网站的文件和资源进行优化?
答:
文件合并（同上题“假若你有5个不同的CSS文件,加载进页面的最好方式是？”）
减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....)no-repeatx-offsety-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。
文件最小化/文件压缩
即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以从负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的
使用CDN托管
CDN的全称是ContentDeliveryNetwork，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。
缓存的使用
Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<scriptsrc=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。
css文件放置在head，js放置在文档尾
在服务器端配置control-cachelast-modify-date
在服务器配置Entity-Tagif-none-match
用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：
1.csssprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置
2.将资源放在多个域名下-----打开控制台，可以看到很多网站都是这么做的~
3.图片延迟加载-----很多电商网站、新闻网站，尤其是用到瀑布流展示图片的时候，很多都这么做了，这个技术已经很普遍~
书写代码的时候要注意优化：
1.css
将可以合并的样式合并起来，比如margin-top、margin-bottom等。
给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
2.js
少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……
3.img
优化图片，不失真的情况下尽量减少图片大小，使用iconfont等
4.怎么学习前端?怎么接触web新知识?
5.关于前后端分离:
前端：负责View和Controller层。
后端：只负责Model层，业务处理/数据等。
6.关于浏览器内核(渲染引擎)
先说一下浏览器的结构：
①、用户界面（UI）-包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等，也就是能看到的除了显示页面的主窗口之外的部分；
②、浏览器引擎（Renderingengine）-也被称为浏览器内核、渲染引擎，主要负责取得页面内容、整理信息（应用CSS）、计算页面的显示方式，然后会输出到显示器或者打印机；
③、JS解释器-也可以称为JS内核，主要负责处理javascript脚本程序，一般都会附带在浏览器之中，例如chrome的V8引擎；
④、网络部分-主要用于网络调用，例如：HTTP请求，其接口与平台无关，并为所有的平台提供底层实现；
⑤、UI后端-用于绘制基本的窗口部件，比如组合框和窗口等。
⑥、数据存储-保存类似于cookie、storage等数据部分，HTML5新增了webdatabase技术，一种完整的轻量级客户端存储技术。
注：IE只为每个浏览器窗口启用单独的进程，而chrome浏览器却为每个tab页面单独启用进程，也就是每个tab都有独立的渲染引擎实例。
现在的主要浏览器：
IE、Firefox、Safari、Chrome、Opera。
它们的浏览器内核（渲染引擎）：
IE--Trident、
FF(Mozilla)--Gecko、
Safari--Webkit、
Chrome--Blink（WebKit的分支）、
Opera--原为Presto，现为Blink。
因此在开发中，兼容IE、FF、Opera（Presto引擎是逐步放弃的）、Chrome和Safari中的一种即可，Safari、Chrome的引擎是相似的。
7.浏览器加载文件(repaint/reflow)
文件加载顺序
浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。
reflow
在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。
因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有varwidth=$('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。
常见的能引起reflow的行为：
1.改变窗囗大小
2.改变文字大小
3.添加/删除样式表
4.脚本操作DOM
5.设置style属性
等等……
reflow是不可避免的，只能尽量减小，常用的方法有：
1.尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式
2.给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed，这样不会影响其他元素
repaint
另外，有个和reflow相似的术语，叫做repaint（重绘），在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow……
8.为什么利用多个域名来请求网络资源会更有效？
动静分离需求，使用不同的服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提高效率。CDN缓存更方便
突破浏览器并发限制：相关问题：浏览器同一时间可以从一个域名下载多少资源？（即：浏览器并发请求数）
也就是说：同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。不同浏览器这个限制的数目不一样。
Cookieless,节省带宽，尤其是上行带宽一般比下行要慢。
用户的每次访问，都会带上自己的cookie，挺大的。假如twitter的图片放在主站域名下，那么用户每次访问图片时，requestheader里就会带有自己的cookie，header里的cookie还不能压缩，而图片是不需要知道用户的cookie的，所以这部分带宽就白白浪费了。
节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。
避免不必要的安全问题(上传js窃取主站cookie之类的)
9.进程和线程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
线程是独立调度的基本单位,进程是拥有资源的基本单位
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。
每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。
但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，
多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
10.前端开发的优化问题
前端开发的优化问题：
(1)减少http请求次数：cssspirit,datauri
(2)JS，CSS源码压缩
(3)前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
(4)用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
(5)用setTimeout来避免页面失去响应
(6)用hash-table来优化查找
(7)当需要设置的样式很多时设置className而不是直接操作style
(8)少用全局变量
(9)缓存DOM节点查找的结果
(10)避免使用CSSExpression
(11)图片预载
(12)避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
如何控制网页在网络传输过程中的数据量
（1）启用GZIP压缩
（2）保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性
11.Flash、Ajax各自的优缺点，在使用中如何取舍?
Ajax的优势
(1)可搜索型
(2)开放性
(3)费用
(4)易用性
(5)易于开发
Flash的优势
(1)多媒体处理
(2)兼容性
(3)矢量图形比SVG，Canvas优势大很多
(4)客户端资源调度，比如麦克风，摄像头
参考：前端开发的优化问题
二、CSS
1.CSS3
CSS3新特性：
新增各种CSS选择器(:not(.input):所有class不是“input”的节点）
圆角border-radiuis
多列布局：multi-columnlayout
阴影和反射：multi-columnlayout
文字特效：text-shadow
线性渐变：gradient
旋转：transform
缩放，定位，倾斜，动画，多背景：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation
参考：CSS3中的一些属性
2.css居中的方式
参考：实现div的水平居中和垂直居中
3.请写一个简单的幻灯效果页面
4.什么是无样式内容闪烁?如何避免?
答:
what?
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的InternetExplorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。
why?
使用import导入样式表
将样式表放在页面底部
有几个样式表,放在页面不同位置
原因即:当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
how?
使用LINK标签将样式表放在文档HEAD中。
5.display:none和visibility:hidden的区别
display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。
6.解释浮动和工作原理
答:
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
关于清除浮动:清除浮动可以理解为打破横向排列。clear:none|left|right|both
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
参考自:经验分享：CSS浮动(float,clear)通俗讲解
7.清除浮动
答:
在浮动元素后面添加空标签clear:both
给父标签使用overflow:hidden/auto;zoom:1
父级div定义,使用伪类:after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
zoom:1的作用：触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。
当设置了zoom的值之后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
8.解释CSSSprites,以及你要如何使用?
答:CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
9.你最喜欢的图片替换方法是什么，你如何选择使用?
答:
1)<h1><imgsrc="image.gif"alt="ImageReplacement"></h1>
2)移开文字:
<h1><span>ImageReplacement</span></h1>
h1{background:url(hello_world.gif)no-repeat;width:150px;height:35px;}
span{display:none;}
注意问题:①结构性需要增加一个标签包裹文本②需要把背景图设置在外标签上,并把文本外标签隐藏.
缺点:不利于阅览器浏览网页
3)text-indent属性，并且给其设置一个较大的负值，x达到隐藏文本的效果
<h1class="technique-three">w3cplus</h1>
.technique-three{
width:329px;
height:79px;
background:url(images/w3cplus-logo.png);
text-indent:-9999px;
}
4)我们此处使用一个透明的gif图片，通过在img标签中的“alt”属性来弥补display:none。这样阅读器之类的就能阅读到所替换的文本是什么
<h1class="technique-five">
<imgsrc="images/blank.gif"alt="w3cplus"/<
<span>w3cplus</span>
</h1>
.technique-five{
width:329px;
height:79px;
background:url(images/w3cplus-logo.png);
}
.technique-fivespan{
display:none;
}
5)使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值
<h1class="technique-six">w3cplus</h1>
.technique-six{
width:329px;
padding:79px000;
height:0px;
font-size:0;
background:url(images/w3cplus-logo.png);
overflow:hidden;
}
6)通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果
<h1class="technique-seven">
<span>w3cplus</span>
</h1>
.technique-seven{
width:329px;
height:79px;
background:url(images/w3cplus-logo.png);
}
.technique-sevenspan{
display:block;
width:0;
height:0;
font-size:0;
overflow:hidden;
}
7)利用一个空白的span标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果。
<h1class="technique-eight">
<span></span>w3cplus
</h1>
.technique-eight{
width:329px;
height:79px;
position:relative;
}
.technique-eightspan{
background:url(images/w3cplus-logo.png);
position:absolute;
width:100%;
height:100%;
}
8)设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来
<h1class="technique-nine">w3cplus</h1>
.technique-nine{
width:329px;
height:79px;
background:url(images/w3cplus-logo.png);
font-size:1px;
color:white;
}
9)使用css的clip属性来实现图片替换文本的效果
<h1class="technique-ten"><span>w3cplus</span></h1>
.technique-ten{
width:329px;
height:79px;
background:url(images/w3cplus-logo.png);
}
.technique-tenspan{
border:0!important;
clip:rect(1px1px1px1px);
clip:rect(1px,1px,1px,1px);
height:1px!important;
margin:-1px;
overflow:hidden;
padding:0!important;
position:absolute!important;
width:1px;
}
参考自:十种图片替换文本CSS方法
10.讨论CSShacks,条件引用或者其他
hacks
_width针对于ie6。*width,+width针对于ie6,7。
color:red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到ie10。
*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。
!important在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。
条件引用
<!--[if!IE]><!-->除IE外都可识别<!--<![endif]-->
<!--[ifIE]>所有的IE可识别<![endif]-->
<!--[ifIE6]>仅IE6可识别<![endif]-->
<!--[ifltIE6]>IE6以及IE6以下版本可识别<![endif]-->
<!--[ifgteIE6]>IE6以及IE6以上版本可识别<![endif]-->
<!--[ifIE7]>仅IE7可识别<![endif]-->
<!--[ifltIE7]>IE7以及IE7以下版本可识别<![endif]-->
<!--[ifgteIE7]>IE7以及IE7以上版本可识别<![endif]-->
<!--[ifIE8]>仅IE8可识别<![endif]-->
<!--[ifIE9]>仅IE9可识别<![endif]-->
11.如何为有功能限制的浏览器提供网页?
答:功能限制的浏览器,比如低版本IE,手机浏览器,等会在很多功能上不符合Web标准,而应对方式主要有:
只提供符合Web标准的页面
提供另一个符合那些浏览器标准的页面
兼容:两种思路:
渐进增强:提供一个可用的原型，后来再为高级浏览器提供优化
优雅降级:据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本
相关技术:
MediaQuery
CSShack
条件判断<!--[if!IE]><!-->除IE外都可识别<!--<![endif]-->
参考自:如何为有功能限制的浏览器提供网页
12.在书写高效CSS时会有哪些问题需要考虑?
答:
1）reset。参照下题“描述下“reset”CSS文件的作用和使用它的好处”的答案。
2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。
2）抽取可重用的部件，注意层叠样式表的“优先级”。
13.如何优化网页的打印样式?
针对打印机的样式:@mediaprint{...}
参考:如何优化网页的打印样式？移动端H5知识普及-CSS3媒体查询
14.描述下你曾经使用过的CSS预处理的优缺点
答:优点:
结构清晰,便于扩展
可以方便屏幕浏览器私有语法差异
可以轻松实现多重继承
完全兼容css代码
参考:再谈CSS预处理器
less学习笔记
15.如果设计中使用了非标准的字体，你该如何去实现？
图片替代
web:fonts在线字库
@font-face
参考:如果设计中使用了非标准的字体，你该如何去实现？
16.解释下浏览器是如何判断元素是否匹配某个CSS选择器？
作者：张靖超链接：https://www.zhihu.com/question/24959507/answer/29672263来源：知乎著作权归作者所有，转载请联系作者获得授权。
从后往前判断。
浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready#wrapper>.lol233
先把所有class中有lol233的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的parentid不为#wrapper则把元素从集合中删去。再向上，从这个元素的父元素开始向上找，没有找到一个tagName为body且class中有ready的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。
为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使html没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于CSSRule数量远远小于元素数量的假设和索引的运用，遍历每一条CSSRule通过集合筛选，比遍历每一个元素再遍历每一条Rule匹配要快得多。
17.解释一下你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。
答:
盒模型：文档中的每个元素被描绘为矩形盒子，渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。
在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界marginedge，边框边界borderedge，内边距边界paddingedge和内容边界contentedge。
内容区域是真正包含元素内容的区域，位于内容边界的内部，它的大小为内容宽度或content-box宽及内容高度或content-box高。如果box-sizing为默认值，width、min-width、max-width、height、min-height和max-height控制内容大小。
内边距区域paddingarea用内容可能的边框之间的空白区域扩展内容区域。通常有背景——颜色或图片（不透明图片盖住背景颜色）。
边框区域扩展了内边距区域。它位于边框边界内部，大小为border-box宽和border-box高。
外边距区域marginarea用空白区域扩展边框区域，以分开相邻的元素。它的大小为margin-box的高宽。
在外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由line-height属性决定。
盒子模型分为两类：W3C标准盒子模型和IE盒子模型（微软确实不喜欢服从他家的标准）
这两者的关键差别就在于：
W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含填充（padding）和边框（border）
IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border）
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。
各浏览器盒模型的组成结构是一致的，区别只是在"怪异模式"下宽度和高度的计算方式，而“标准模式”下则没有区别。组成结构以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C标准盒子模型）。页面在“怪异模式”下，css中为元素的width和height设置的值在标准浏览器和ie系列(ie9除外)里的代表的含义是不同的（IE盒子模型）。
因而解决兼容型为题最简洁和值得推荐的方式是：下述的第一条。
将页面设为“标准模式”。添加对应的dtd标识
使用hack或者在外面套上一层wrapper
参考:解释一下你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。
MSDN：盒模型
18.伪类的用法：
参考：CSS中伪类及伪元素用法详解
19.描述下"reset"css文件的作用和使用它的好处
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
比如说，
1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
3）后面设置的属性将会覆盖前面重复设置的属性。
期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
20.请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处？
说到IE的bug，在IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将border与padding都包含在width之内。而另外一些浏览器则与它相反，是不包括border和padding的。对于IE浏览器，当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding；对于非IE浏览器，当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素borderbox的尺寸以使其内容的宽或高最小为0。
使用*{box-sizing:border-box;}能够统一IE和非IE浏览器之间的差异。
21.block,inline和inline-block的区别
答:
起新行
block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化
设置宽高
block元素可以设置width,height属性.块级元素即使设置了宽度,仍然独占一行
inline元素设置width,height无效
内外边距
block元素可以设置margin和padding属性
inline元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都会产生边距效果.但是数值方向的margin/padding-top/bottom不会产生边距效果
包含
block可以包含inline和block元素,而inline元只能包含inline元素
而display:inline-block,则是将对象呈现为inline对象,但是对象的内容作为block对象呈现.之后的内联对象会被排列到一行内.比如我们可以给一个link(a元素)inline-block的属性,使其既有block的高宽特性又有inline的同行特性
22.css动画和js动画的优缺点
CSS3的动画
优点：
1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
缺点：
1.在动画控制上不够灵活
2.兼容性不好
3.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画
优点：
1.控制能力很强，可以单帧的控制、变换
2.兼容性好，写得好完全可以兼容IE6，且功能强大。
缺点：
计算没有css快，另外经常需要依赖其他的库。
结论
所以，不复杂的动画完全可以用css实现，复杂一些的，或者需要交互的时候，用js会靠谱一些~
23.你用过媒体查询，或针对移动端的布局/CSS吗？
答:
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局
@mediascreenand(min-width:400px)and(max-width:700px){…}
@mediahandheldand(min-width:20em),screenand(min-width:20em){…}
参考自:CSS3媒体查询使用CSS媒体查询创建响应式网站《响应式Web设计实践》学习笔记
24.有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用)
答：
display:none或者visibility:hidden，overflow:hidden。
1.display:none;的缺陷
搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
2.visibility:hidden;的缺陷
隐藏的内容会占据他所应该占据物理空间
3.overflow:hidden;一个比较合理的方法
例：.texthidden{display:block;overflow:hidden;width:0;height:0;}
将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的
25.CSS选择器级别
1.如果样式是行内样式（通过Style=””定义），那么a=1
2.b为ID选择器的总数
3.c为Class类选择器的数量。
4.d为类型选择器的数量
5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样
6.!important权重最高，比inlinestyle还要高。
一般来讲，越详细的级别越高。CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级
参考：CSS样式选择器优先级
26.img设置属性title和alt的区别?
答:
Alt是img的特有属性,或与<inputtype="image">配合使用，规定图像的替代文本.如果无法显示图像,浏览器将显示替代文本.用于图片无法加载显示、读屏器阅读图片，可提高图片可访问性，搜索引擎会重点分析。最长可包含1024个字符,
Title为元素提供附加的提示信息，用于鼠标滑到元素上的时候显示。其值可以比alt属性值设置的更长,但是有些浏览器会截断过长的文字.
27.知道BFC吗?
答:BFC指的是BlockFormattingContext,它提供了一个环境,html元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局.决定了元素如何对其内容进行定位,以及和其他元素的关系和相互作用.
其中:FC(FormattingContext):指的是页面中的一个渲染区域,并且拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用.
BFC:块级格式化上下文,指的是一个独立的块级渲染区域,只有block-levelbox参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关.
BFC的生成:
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute或fixed
BFC的约束规则
生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
分解:
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
BFC在布局中的应用
不和浮动元素重叠:
如果一个浮动元素后面跟着一个非浮动元素,就会产生覆盖
防止margin重叠:
同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode
解决浮动相关问题
父元素:overflow:hiddenIE:zoom:1(hasLayout)
根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式。
多栏布局
比如左右两栏宽度固定,中间栏自适应则中间栏设置overflow:hidden生成BFC
IE中类似概念:hasLayout
参考:我对BFC的理解CSSBFC和IEHaslayout介绍
28.行内元素有哪些？块级元素有哪些？空元素有哪些？
答：
行内元素有：spanimginputselectstrong
块级元素有：divuloldldtddh1h2h3h4p...
常见的空元素：brhrimginputlinkmetabaseareacommandembedkeygenparamsourcetrackwbr....
三、html
1.h5的改进:
新元素
画布canvas:HTML5<canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成
音频audio
视频video
语义性:article,nav,footer,section,aside,hgroup等.
时间time
新属性
拖放:draggable<imgdraggable="true">
可编辑:contenteditable
新事件
拖放ondragondrop
关闭页面onunload
窗口大小改变onresize
取消了一些元素:fontcenter等
新的DOCTYPE声明<!DOCTYPEhtml>
完全支持CSS3
Video和Audio
2D/3D制图
本地存储
本地SQL数据
Web应用
参考自:猿教程
2.什么是语义化的html?
答:
what?
根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
why?
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
how?
尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
参考自:理解HTML语义化
3.从前端角度出发谈谈做好seo需要考虑什么?
答:
语义化html标签
合理的title,description,keywords;
重要的html代码放前面
少用iframe,搜索引擎不会抓取iframe中的内容
图片加上alt
4.文档类型(DOCTYPE)
答:
作用:doctype声明位于文档中最前面的位置，处于标签之前，告知浏览器使用的是哪种规范。
类型:三种:Strict、Transitional以及Frameset
如果不声明:不写doctype，浏览器会进入quirksmode（混杂模式）。即，如果不声明doctype，浏览器不引入w3c的标准，那么早期的浏览器会按照自己的解析方式渲染页面。浏览器采用自身方式解析页面的行为称为"quirksmode（混杂模式也称怪异模式）"；采用w3c方式解析就是"strictmode（标准模式）"。如果完全采用strictmode就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度
用哪种:
没有doctype声明的采用quirksmode解析
对于有doctype的大多数采用standardmord。
特殊情况：
对于那些浏览器不能识别的doctype,浏览器采用quirksmode；
没有声明DTD或者html版本声明低于4.0采用quirksmode，其他使用standardmode；
ie6中，如果在doctype声明前有一个xml声明(比如:<?xmlversion="1.0"encoding="iso-8859-1"?>)，则采用quirksmode解析
标准模式与怪异模式的区别:
标准模式：浏览器根据规范呈现页面
混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。
他们最大的不同是对盒模型的解析。
在strictmode中：width是内容宽度，也就是说,元素真正的宽度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
在quirksmode中：width则是元素的实际宽度，内容宽度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
5.使用XHTML的局限有哪些?
答：
XHTML较为严格，标签必须闭合，必须要body，head等
如果页面使用'application/xhtml+xml'一些老的浏览器并不兼容
6.如果网页内容需要多语言,要怎么做?
答:采用统一编码utf-8模式
<METAHTTP-EQUIV=“Content-Type”CONTENT=“text/html;CHARSET=字符集">
不写，根据浏览器默认字符集显示
charset=gb2312简体中文
charset=big5繁体中文
charset=EUC_KR韩语
charset=Shift_JIS或EUC_JP日语
charset=KOI8-R/Windows-1251俄语
charset=iso-8859-1西欧语系（荷兰语,英语,法语,德语,意大利语,挪威语,葡萄牙语,瑞士语.等十八种语言）
charset=iso-8859-2中欧语系
charset=iso-8859-5斯拉夫语系（保加利亚语,Byelorussian语,马其顿语,俄语,塞尔维亚语,乌克兰语等）
charset=uft-8unicode多语言
参考自:多语言的网站怎么做呀多语言网站设计需要注意的问题
7.data-*属性的作用
html5规范里增加了一个自定义data属性
为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取
<divdata-author="david"data-time="2011-06-20"data-comment-num="10">...</div>
div.dataset.commentNum;//可通过js获取10
data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性
需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
8.如果把HTML5看作做一个开放平台，那它的构建模块有哪些？
答:
1）WebStorageAPI
2）基于位置服务LBS
3）无插件播放音频视频
4）调用相机和GPU图像处理单元等硬件设备
5）拖拽和FormAPI
9.请描述一下cookies，sessionStorage和localStorage的区别？
答:
cookie:
cookie是网站为了标示用户身份而储存在用户本地终端（ClientSide）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage数据在当前浏览器窗口关闭后自动删除。
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同:
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
WebStorage支持事件通知机制，可以将数据更新的通知发送给监听者。
WebStorage的api接口使用更方便。
sessionStorage和localStorage是HTML5WebStorageAPI提供的，这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，
其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
WebStorage数据完全存储在客户端,不需要通过浏览器的请求将数据传给服务器,因此比cookies能够存储更多的数据,大概5M左右
WebStorage带来的好处：使用localstorage和sessionstorage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage.这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。
减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
ViewCode
10.浏览器本地存储与服务器端存储之间的区别
其实数据既可以在浏览器本地存储，也可以在服务器端存储。
浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。
2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的session对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递sessionid即可，服务器根据sessionid找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。
服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。
服务器存储数据安全一些，浏览器只适合存储一般数据。
11.sessionStorage和页面js数据对象的区别
答:
页面中一般的js对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。
而sessionStorage只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。
12.canvas和svg的区别?
答:
svg:
SVG是一种使用XML描述2D图形的语言
SVG基于XML,这意味着SVGDOM中的每个元素都是可用的.所以可以为每个元素附加JavaScript事件处理器
在SVG中,每个被绘制的图像均被视为对象.如果SVG对象的属性发生变化,那么浏览器能够自动重现图像
Canvas
Canvas通过js来绘制2D图形
Canvas是逐像素进行渲染的
在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象.
区别
Canvas支持分辨率,SVG不支持
Canvas不支持事件处理器,SVG支持
Canvas只有弱的文本渲染能力,而SVG最适合带有大型渲染区域的应用程序(比如谷歌地图)
Canvas能够以.png或.jpg格式保存结果图像
SVG的复杂度过高的话会减慢渲染速度(任何过度使用DOM的应用都不快)
Canvas最适合图像密集型的游戏,其中的许多对象会被频繁重绘.而SVG不适合游戏应用
Canvas是基于位图的图像,它不能够改变大小,只能缩放显示;SVG是基于矢量的,所以它能够很好地处理图形大小的改变
Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制;SVG功能更完善,适合静态图片显示,高保真文档查看和打印的应用场景
绘制Canvas对象后,不能使用脚本和CSS对它进行修改;而SVG对象是文档对象模型的一部分,所以可以随时使用脚本和CSS修改它们
13.src和href的区别?
答:
src指向外部资源的位置,用于替换当前元素,比如js脚本,图片等元素
href指向网络资源所在的位置,用于在当前文档和引用资源间确定联系,加载css
四、js
1.ajax,跨域,jsonp
参考：《JavaScript》高级程序设计第21章：Ajax和Comet
js跨域
jQuery中Ajax操作
2.apply和call的用法和区别:
用法:都能继承另一个对象的方法和属性,区别在于参数列表不一样
区别:
Function.apply(obj,args)args是一个数组,作为参数传给Function
Function.call(obj,arg1,arg2,...)arg*是参数列表
apply一个妙用:可以将一个数组默认的转化为一个参数列表
举个栗子:有一个数组arr要push进一个新的数组中去,如果用call的话需要把数组中的元素一个个取出来再push,而用apply只有Array.prototype.push.apply(this,arr)
参考自:区别和详解：js中call()和apply()的用法
3.bind函数的兼容性
用法:
bind()函数会创建一个新函数,为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数。
4.解释下事件代理
答:事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.
例:
html部分:要点击li弹出其id
<ulid="list">
<liid="li-1">Li2</li>
<liid="li-2">Li3</li>
<liid="li-3">Li4</li>
<liid="li-4">Li5</li>
<liid="li-5">Li6</li>
<liid="li-6">Li7</li>
</ul>
//js部分
document.getElementById("list").addHandler("click",function(e){
vare=e||window.event;
vartarget=e.target||e.srcElement;
if(target.nodeName.toUpperCase=="LI"){
console.log("Listitem",e,target.id,"wasclicked!");
}
});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
JavaScript js技巧 AddFavorite setHomePage execCommand createStyleSheet appendscript scriptNode 正则表达式 BROWSER