web前端整理 | 前端知识总结，发牢骚，吐槽的地方
对于前端开发者来说移动端存在更多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题（我们俗称BUG或坑），那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。
移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6坑多了。下面先介绍一下4类具体常见的坑：
A、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：
document.documentElement.style.height = window.innerHeight + 'px';
B、叠加区高亮
在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);
A、事件无法被触发
在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。
B、:active 效果不兼容
在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:
var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);
A、浏览器崩溃
var act = function(){
window.removeEventListener('devicemotion',act);
window.addEventListener('devicemotion',act,false);
解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。
B、预加载、自动播放无效
如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
C、无法同时播放多音频
在android设备中,播放后一音频会打断前一音频，而不会同步播放,这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。
D、不支持局部滚动
在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案:
1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。
2、利用iscroll、自写js控制translate、scrollTop模拟
4、系统/硬件
A、怪异悬浮的表单
在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: 隐藏输入密码从而解决。
B、错误出现滚动条
在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的 &body scroll=”no”& 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！
C、链接打开系统浏览器
在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验。那么我们尝试给这个元素添加 target=”_blank”‘ 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。
D、Flex box 不兼容
在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，所以导致错误，所以我们写完整历史版本呢的3种Flex box 解决。那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少不不要的麻烦。
面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案,我们需要学会如何去解决坑:
解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？
1、首先我们需要定位问题，我们可以使用下列方法：
A、DOM隔离定位法
不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素
B、样式、JS剔除法
不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题
C、多运行环境测试法
在多环境中测试，排查是否是由于特定环境引起
D、PC与手机联合调试法
联合PC与手机进行定位，如：
2、我们解决问题可以尝试如下的方式：
* 尝试、转思维、绕解决
* 优雅降权、区分处理、沟通
* 搜索与提问……
和以下的思维：
* 分割……
3、在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：
B、stackoverflow
C、同事、朋友、QQ群、论坛等
Google和stackoverflow让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。
在发现、解决问题后，更重要的是要学会如何总结问题：
A、总结记录问题产生条件、解决方法和解决过程
B、尽可能分析原理、产生的条件，避免重蹈覆辙
C、分享给更多的人
无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了
我们在总结记录问题的同时，整理了一个移动端小贴士，记录问题与一些坑，虽然目前还不完善但是希望能分享给更多的人也希望更多的人能参与完善。
链接: 文章来自：
IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多，使得大家可以更方便的定制所需的功能了。
做项目的时候正好用到了这个插件，自己做了一下总结，发在这里方便大家学习IScroll5。
IScroll最简单的DOM结构:
初始化iscroll
var myScroll = new IScroll(‘#wrapper’,options);
初始化设置
初始化设置使用实例：
var myScroll = new IScroll(‘#wrapper’, {
mouseWheel: true,
scrollbars: true
设置列表：
options.useTransform
是否使用CSS3的Transform属性
options.useTransition
是否使用CSS3的Transition属性，否则使用requestAnimationFram代替
options.HWCompositing
是否启用硬件加速
options.bounce
是否启用弹力动画效果，关掉可以加速
Basic features
options.click
是否启用click事件。建议关闭此选项并启用自定义的tap事件（options.tap）
options.disableMouse
是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。
options.disablePointer
是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。
options.disableTouch
是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。
options.eventPassthrough
使用IScroll的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。
options.freeScroll
主要在上下左右滚动都生效时使用，可以向任意方向滚动。
options.keyBindings
绑定按键事件。
options.invertWheelDirection
反向鼠标滚轮。
options.momentum
是否开启动量动画，关闭可以提升效率。
options.mouseWheel
是否监听鼠标滚轮事件。
options.preventDefault
是否屏蔽默认事件。
options.scrollbars
是否显示默认滚动条
options.scrollX
options.scrollY
可以设置是否显示横向或纵向滚动条
options.tap
是否启用自定义的tap事件
可以自定义tap事件名
Scrollbars
options.scrollbars
是否显示默认滚动条
options.fadeScrollbars
是否渐隐滚动条，关掉可以加速
options.interactiveScrollbars
用户是否可以拖动滚动条
options.resizeScrollbars
是否固定滚动条大小，建议自定义滚动条时可开启。
options.shrinkScrollbars
滚动超出滚动边界时，是否收缩滚动条。
‘clip’：裁剪超出的滚动条
‘scale’:按比例的收缩滚动条（占用CPU资源）
false:不收缩，
options.indicators
指示IScroll该如何滚动，Scrollbars的底层实现方式。
options.indicators.el
制定滚动条的容器。容器中的第一个元素即为指示器。
indicators: {
el: document.getElementById(‘indicator’)
indicators: {
el: ‘#indicator’
options.indicators.ignoreBoundaries
是否忽略容器边界。设为true 可以设置滚动速度
options.indicators.listenX
options.indicators.listenY
指示器监听那个方向的滚动，可以设置为一个方向或2个方向
options.indicators.speedRatioX
options.indicators.speedRatioY
指示器相对主滚动条的速度
options.indicators.fade
options.indicators.interactive
options.indicators.resize
options.indicators.shrink
如scrollbars的设置
options.probeType
需要使用iscroll-probe.js才能生效
probeType：1
滚动不繁忙的时候触发
probeType：2
滚动时每隔一定时间触发
probeType：3
每滚动一像素触发一次
分割页面snap
options.snap
自动分割容器，用于制作走马灯效果等。
Options.snap:true//根据容器尺寸自动分割
Options.snap:el//根据元素分割
options.zoom
是否打开缩放
最好使用iscroll-zoom.js
如放大模糊，可将源容器定义为2倍大小，然后scale(0.5)
options.zoomMax
最大缩放等级
options.zoomMin
最小缩放等级
options.startZoom
初始缩放等级
options.wheelAction
设为’zoom’，可以用滚轮缩放
options.bindToWrapper
光标、触摸超出容器时，是否停止滚动
options.bounceEasing
弹力动画效果
预置效果：’quadratic’, ‘circular’, ‘back’, ‘bounce’, ‘elastic’（最后两个不能通过css3表现）
还可以自定义效果
bounceEasing: {
style: ‘cubic-bezier(0,0,1,1)’,//css3时
fn: function (k) { }//不使用css3，使用requestAnimationFrame时
‘circular’
options.bounceTime
弹力动画持续的毫秒数
options.deceleration
滚动动量减速
越大越快，建议不大于0.01
options.mouseWheelSpeed
鼠标滚轮速度
options.preventDefaultException
列出哪些元素不屏蔽默认事件；
{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }
options.resizePolling
重新调整窗口大小时，重新计算IScroll的时间间隔
options.keyBindings
监听按键事件控制IScroll
keyBindings: {
pageUp: 33,
pageDown: 34,
right: 39,
IScroll5的API：
scrollTo(x, y, time, easing)
滚动到：x，y，事件，easing方式
Easing: quadratic | circular | back | bounce | elastic
见IScroll.utils.ease 对象
myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
scrollBy(x, y, time, easing)
滚动到相对于当前位置的某处
scrollToElement(el, time, offsetX, offsetY, easing)
滚动到某个元素。el为必须的参数
offsetX/offsetY：相对于el元素的位移。设为true即为屏幕中心
分割页面snap
goToPage(x, y, time, easing)
根据options.snap分割页面，跳转到横向、纵向某页。XY可以同时生效。
结合options.snap使用
上一页，下一页
结合options.snap使用
zoom(scale, x, y, time)
Scale:缩放因子
刷新IScroll
销毁IScroll，节省资源
IScroll的事件
事件使用实例：
myScroll = new IScroll(‘#wrapper’);
myScroll.on(‘scrollEnd’, doSomething);
beforeScrollStart
用户点击屏幕，但是还未初始化滚动前
scrollCancel
初始化滚动后又取消
scrollStart
轻击屏幕左、右
IScroll的属性
myScroll.x/y
myScroll.directionX/Y
上一次的滚动方向(-1 下/右, 0 保持原状, 1 上/左)
myScroll.currentPage
当前Snap信息
myScroll.maxScrollXmyScroll.maxScrollY
当滚动到底部时的 myScroll.x/y
1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test(“a1a__a1a__a1a__a1a__”);
2，截取字符串abcdefg的efg
var str = “abcdefg”;
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf(“efg”), 3);
alert(efg);
3，判断一个字符串中出现次数最多的字符，统计这个次数
//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数
var str = “abcdefgaddda”;
var obj = {};
for (var i = 0, l = str. i & i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
obj[key]++;
/*遍历这个hash table，获取value最大的key和value*/
var max = -1;
var max_key = “”;
for (key in obj) {
if (max & obj[key]) {
max = obj[key];
alert(“max:”+max+” max_key:”+max_key);
4，IE与FF脚本兼容性问题
(1) window.event：
表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源，而FF用target获取事件源
(3) 添加，去除事件
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)
(5) document.getElementByName()和document.all[name]
IE；document.getElementByName()和document.all[name]均不能获取div元素
(6) input.type的属性
IE：input.type只读
FF：input.type可读写
(7) innerText textContent outerHTML
IE：支持innerText, outerHTML
FF：支持textContent
(8) 是否可用id代替HTML元素
IE：可以用id来代替HTML元素
FF：不可以
这里只列出了常见的，还有不少，更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结
5，规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok
6，javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：
function Animal(name) {
this.name =
Animal.prototype.getName = function() {alert(this.name)}
function Dog() {};
Dog.prototype = new Animal(“Buddy”);
Dog.prototype.constructor = D
var dog = new Dog();
7，FF下面实现outerHTML
FF不支持outerHTML，要实现outerHTML还需要特殊处理
思路如下：
在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&
&html xmlns=”http://www.w3.org/1999/xhtml”&
&meta http-equiv=”Content-Type” content=”text/ charset=gb; /&
&title&获取outerHMTL&/title&
div{ background:#0000FF;width:100height:100}
span{ background:#00FF00;width:100height:100}
p{ background:#FF0000;width:100height:100}
&div id=”a”&&span&SPAN&/span&DIV&/div&
&span&SPAN&/span&
&script type=”text/javascript”&
function getOuterHTML(id){
var el = document.getElementById(id);
var newNode = document.createElement(“div”);
document.appendChild(newNode);
var clone = el.cloneNode(true);
newNode.appendChild(clone);
alert(newNode.innerHTML);
document.removeChild(newNode);
getOuterHTML(“a”);
8，编写一个方法 求一个字符串的字节长度
一个英文字符占用一个字节，一个中文字符占用两个字节
function GetBytes(str){
var len = str.
var bytes =
for(var i=0; i& i++){
if (str.charCodeAt(i) & 255) bytes++;
alert(GetBytes(“你好,as”));
9，编写一个方法 去掉一个数组的重复元素
var arr = [1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique = function(){
var ret = [];
var o = {};
var len = this.
for (var i=0; i& i++){
var v = this[i];
if (!o[v]){
ret.push(v);
alert(arr.unique());
10，写出3个使用this的典型应用
（1）在html元素事件属性中使用，如
&input type=”button” onclick=”showInfo(this);” value=”点击一下”/&
（2）构造函数
function Animal(name, color) {
this.name =
this.color =
&input type=”button” id=”text” value=”点击一下” /&
&script type=”text/javascript”&
var btn = document.getElementById(“text”);
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
（4）CSS expression表达式中使用this关键字
&table width=&#px” height=&#px”&
&div style=”width:expression(this.parentNode.width);”&div element&/div&
12，如何显示/隐藏一个DOM元素？
el.style.display = “”;
el.style.display = “none”;
el是要操作的DOM元素
13，JavaScript中如何检测一个变量是一个String类型？请写出函数实现
String类型有两种生成方式：
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);
function IsString(str){
return (typeof str == “string” || str.constructor == String);
var str = “”;
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));
14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&
&meta http-equiv=”Content-Type” content=”text/ charset=UTF-8″&
&title&倒计时&/title&
&input type=”text” value=”” id=”input” size=&#″/&
&script type=”text/javascript”&
function counter() {
var date = new Date();
var year = date.getFullYear();
var date2 = new Date(year, 12, 31, 23, 59, 59);
var time = (date2 – date)/1000;
var day =Math.floor(time/(24*60*60))
var hour = Math.floor(time%(24*60*60)/(60*60))
var minute = Math.floor(time%(24*60*60)%(60*60)/60);
var second = Math.floor(time%(24*60*60)%(60*60)%60);
var str = year + “年还剩”+day+”天”+hour+”时”+minute+”分”+second+”秒”;
document.getElementById(“input”).value =
window.setInterval(“counter()”, 1000);
15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面&div& &input type=”button” id =”button1″ value=”1″ onclick=”???”& &input type=”button” id =”button2″ value=”2″ /”& &/div&
&input type=”button” id =”button1″ value=+ onclick=”moveBtn(this);”&
&input type=”button” id =”button2″ value=+ /&
&script type=”text/javascript”&
function moveBtn(obj) {
var clone = obj.cloneNode(true);
var parent = obj.parentN
parent.appendChild(clone);
parent.removeChild(obj);
16，JavaScript有哪几种数据类型
简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function
17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport
borderLeftColor
mozViewport
18，JavaScript中如何对一个对象进行深度clone
function cloneObject(o) {
if(!o || ‘object’ !== typeof o) {
var c = ‘function’ === typeof o.pop ? [] : {};
for(p in o) {
if(o.hasOwnProperty(p)) {
if(v && ‘object’ === typeof v) {
c[p] = Ext.ux.clone(v);
19，如何控制alert中的换行
\n alert(“p\np”);
20，请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&
&html xmlns=”http://www.w3.org/1999/xhtml”&
&meta http-equiv=”Content-Type” content=”text/ charset=gb; /&
&title&鼠标点击页面中的任意标签，alert该标签的名称&/title&
div{ background:#0000FF;width:100height:100}
span{ background:#00FF00;width:100height:100}
p{ background:#FF0000;width:100height:100}
&script type=”text/javascript”&
document.onclick = function(evt){
var e = window.event ||
var tag = e[“target”] || e[“srcElement”];
alert(tag.tagName);
&div id=”div”&&span&SPAN&/span&DIV&/div&
&span&SPAN&/span&
21，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
var url = “/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url){
var params = {};
var arr = url.split(“?”);
if (arr.length &= 1)
arr = arr[1].split(“&”);
for(var i=0, l=arr. i&l; i++){
var a = arr[i].split(“=”);
params[a[0]] = a[1];
var url = “/index.php?key0=0&key1=1&key2=2″;
var ps = parseQueryString(url);
alert(ps[“key1″]);
22，ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：
XHTML：对应W3C的XHTML规范，目前是XHTML1.0。
CSS：对应W3C的CSS规范，目前是CSS2.0
DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
JavaScript：对应于ECMA的ECMAScript规范
XML：对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest：对应WhatWG的Web Applications1.0规范（http://whatwg.org/specs/web-apps/current-work/）
AJAX交互模型
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复
跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或下的对象，具体场景如下：
PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1) document.domain+iframe
(2) 动态创建script标签
23，什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
&ul id=”test”&
&li&这是第一条&/li&
&li&这是第二条&/li&
&li&这是第三条&/li&
内部函数被定义它的函数的外部区域调用的时候就产生了闭包。
(function A() {
var index = 0;
var ul = document.getElementById(“test”);
var obj = {};
for (var i = 0, l = ul.childNodes. i & i++) {
if (ul.childNodes[i].nodeName.toLowerCase() == “li”) {
var li = ul.childNodes[i];
li.onclick = function() {
alert(index);
24，请给出异步加载js方案，不少于两种
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
异步加载方式：
(1) defer，只支持IE
(2) async：
(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
var script = document.createElement(“script”)
script.type = “text/javascript”;
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == “loaded” ||
script.readyState == “complete”){
script.onreadystatechange =
callback();
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
script.src =
document.body.appendChild(script);
25，请设计一套方案，用于确保页面中JS加载完全。
var n = document.createElement(“script”);
n.type = “text/javascript”;
//以上省略部分代码
//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)
if(ua.ie){
n.onreadystatechange = function(){
var rs = this.readyS
if(‘loaded’ === rs || ‘complete’===rs){
n.onreadystatechange =
f(id,url); //回调函数
//省略部分代码
//safari 3.x supports the load event for script nodes(DOM2)
n.addEventListener(‘load’,function(){
f(id,url);
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
n.onload = function(){
f(id,url);
26，js中如何定义class,如何扩展prototype?
Ele.className = “***”; //***在css中定义，形式如下：.*** {…}
A.prototype.B = C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
27，如何添加html元素的事件,有几种方法.
（1） 为HTML元素的事件属性赋值
（2） 在JS中使用ele.on*** = function() {…}
（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent
28，documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
29，多浏览器检测通过什么？
（1） navigator.userAgent
（2） 不同浏览器的特性，如addEventListener
30，js的基础对象有那些, window和document的常用的方法和属性列出来
String,Number,Boolean
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：name,parent,screenLeft,screenTop,self,top,status
方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性：cookie,doctype,domain,documentElement,readyState,URL,
31，前端开发的优化问题
（1） 减少http请求次数：css spirit,data uri
（2） JS，CSS源码压缩
（3） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（4） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
（5） 用setTimeout来避免页面失去响应
（6） 用hash-table来优化查找
（7） 当需要设置的样式很多时设置className而不是直接操作style
（8） 少用全局变量
（9） 缓存DOM节点查找的结果
（10） 避免使用CSS Expression
（11） 图片预载
（12） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
32，如何控制网页在网络传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性
33，Flash、Ajax各自的优缺点，在使用中如何取舍？
Ajax的优势
（1） 可搜索型
（2） 开放性
（3） 费用
（4） 易用性
（5） 易于开发
Flash的优势
（1） 多媒体处理
（2） 兼容性
（3） 矢量图形 比SVG，Canvas优势大很多
（4） 客户端资源调度，比如麦克风，摄像头
Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现&head&标签内有一个&link&标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中&body&部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个&img&标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的&script&标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个&div& （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了&/html&的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下&link&标签的CSS路径；
11. 浏览器召集了在座的各位&div&&span&&ul&&li&们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
求了新的CSS文件，重新渲染页面。
浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。
reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的&img&图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。 如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于 reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。
web开发者最担心的是新技术推出时由于其不成熟所产生的问题，如果能够实现互联网通用标准，可以避免各浏览器之间的不统一，这一点已经明确了：
1.兼容性：html5在老版本的浏览器上也可以正常运行
2.实用性：html内部并没有什么很复杂的，不切实际的功能，而是封装了简单实用的功能
3：非革命性的发展：html5的内部功能不是革命性的，而只是发展性的