纯前端如何实现跳转页面而不改变URL(不使用iframe)?

43、vue常用的修饰符?

.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.self: 当事件发生在该元素本身而不是子元素的时候会触发;
.capture: 事件侦听,事件发生的时候会调用

45、回答以下代码,alert的值分别是多少?

因为a为全局变量,函数中改变的也是全局a

46、new操作符具体干了什么呢?

1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。

49、vue组件中data为什么必须是一个函数?

因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。
而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
doctype是一种标准通用标记语言文档类型声明,目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档,声明必须是HTML文档的第一行,位于html标签之前

52、如何实现浏览器内多个标签页之间的通信

53、响应式和自适应有什么区别?

响应式设计(Responsive design):一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计(Adaptive Design):是为同类别的物理设备建立三种不同的网页(PC),检测到设备分辨率大小后调用相应的网页。

54、Vue 中怎么自定义指令?

指令:分为全局指令和局部指令
//注册一个全局自定义指令 v-focus
 //当绑定的元素插入到DOM中时...

55、 什么是事件代理,它的原理是什么

事件代理:通俗来说就是将元素的事件委托给它的父级或者更外级元素处理 原理:利用事件冒泡机制实现的
优点:只需要将同类元素的事件委托给父级或者更外级的元素,不需要给所有元素都绑定事件,减少内存空间占用,提升性能; 动态新增的元素无需重新绑定事件
watch 为了监听某个响应数据的变化。
computed 是自动监听依赖值的变化,从而动态返回内容,主要目的是简化模板内的复杂运算。
所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。
break语句 当前循环中退出
continue语句 继续下一个循环语句

59、列举浏览器对象模型中常用的对象,并列举window对象常用的方法至少五个

60、vue自定义组件@click点击失效的原因和解决办法

原因:click事件作用于组件内部,如果组件内没有写click事件,便会无响应。
2.可以用:将事件传递至组件内,也符合组件间的单向数据流,我就是这样解决的
 
3.使用$emit来实现事件传递
 
2.$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
1.localStorage长期存储数据,浏览器关闭数据后不丢失;
3.cookie是网站为了标识用户身份而存储在用户本地终端(Client Side)上的数据(通常经过加密)。cookie始终在同源的http请求中携带(即使不需要)都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;
5.有期时间:localStorage存储持久数据,浏览器关闭后数据不丢失,除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭;

63、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

行内元素:会水平方向排列,不能包含块级元素,设置width无效,height无效,可设置line-height,margin上下无效,padding上下无效
块级元素:各占据一行,垂直方向排列,可设置width、height等属性,从新行开始结束接着一个断行

64、ie和标准浏览器,有哪些兼容的写法?

65、事件委托是什么?如何阻止事件冒泡?如何阻止默认事件?

事件委托:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行

66、简述下面页面跳转区别

wx.navigateTo():保留当前页面,跳转到应用内的某个页面。不能跳转tabBar页
wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。不能跳转tabBar页
 可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
wx.reLaunch():关闭所有页面,打开到应用内的某个页面
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法,await后面跟一个表达式
async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

68、小程序的声明周期函数

onLoad()页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow()页面显示/切入前台时触发
onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)

70、Vue 组件中data 为什么必须是函数

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
for of 数组对象都可以遍历,历的是数组元素值 for in 一般用来遍历对象或json,遍历的是数组的索引(即键名key)

72、v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏;
不同点:实现本质方法不同
 v-show:本质是通过控制css中的display设置为none,控制隐藏,只会编辑一次;
 v-if是动态的向DOM树内添加或删除DOM元素,若初始值为false,就不会编译了,而且v-if不停的销毁和创建会比较销毁性能;
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。

73、Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

74、canvas在标签上设置宽高和在style中设置宽高有什么区别?

canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度,还会出现被拉伸的效果,和设置的值不符合
如果canvas的width和height没指定或值不正确,就被设置成默认值

75、vue第一次页面加载会触发哪几个钩子?

传参可以使用params和query两种方式。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
5、二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示。

77、vuex是什么?怎么使用?哪种功能场景使用它?

vue框架中的状态管理器
场景:当页面应用中,组件之间的状态、音乐的播放、登录状态、加入购物车等
push()方法是向数组末尾添加一个或者多个元素,并返回新的长度。
pop()方法删除数组的最后一个元素,把数组的长度减1,并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素,并且返回新的长度。
Shift()方法用于把数组的第一个元素从其中删除,并返回被删除的值
window.onload需要等所有文件都加载完才开始加载,$(document).ready只需等文档结构加载完了就开始加载

80、哪些操作会造成内存泄露

内存泄露指任何对象在不再拥有或不再需要它之后依然存在
setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
循环(两个对象彼此引用且彼此保留)

 

82、CSS3新增伪类有那些?

p:only-child 选择属于其父元素的唯一子元素 :checked 单选框或复选框被选中。

83、 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。

84、下面代码输出什么?

85、解释一下变量的提升

变量的提升是JavaScript的默认行为,这意味着将所有变量声明移动到当前作用域的顶部,并且可以在声明之前使用变量。初始化不会被提升,提升仅作用于变量的声明。

严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中,关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如,分号在每个语句声明之后使用。

87、Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

88、vue更新数组时能够触发视图更新的数组方法

created(创建完成):在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted(挂载完成):在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

90、为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
display:none 不显示对应的元素(不占位),在文档布局中不再分配空间(回流+重绘)
visibility:hidden 隐藏对应元素(占位),在文档布局中仍保留原来的空间(重绘)
null 表示一个对象被定义,但是放了个空指针,转换为数值时为0
undefined 表示声明的变量未初始化,转换为数值时为NaN

93、同步和异步的区别?

同步的概念在操作系统中:不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式),同步强调的是顺序性,谁先谁后。异步不存在顺序性。
同步:浏览器访问服务器,用户看到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容之后进行下一步操作。
异步:浏览器访问服务器请求,用户正常操作,浏览器在后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

94、请给出异步加载js方案,不少于两种

95、项目做过哪些性能优化?

1、减少HTTP请求数
6、减少DOM元素数量
主要是通过 children,它同样是一个数组

97、媒体查询是什么?怎么使用?

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式。
Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例,包装成一个新的Promise实例。都成功才会返回成功
promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后,就算完成,但是 进程不会立即停止
import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 require是运行时调用,所以require理论上可以运用在代码的任何地方 import是编译时调用,所以必须放在文件开头 require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量 import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require storage能提供5M左右的存储空间,cookie能提供4k左右的存储空间 storage每个域都有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混淆 storage中的数据仅仅是本地存储,不会和服务器发生任何交互 cookie的内容会跟随着请求一并发送到服务端(每个新页面请求时,都会携带cookie,无形中造成带宽浪费)

101、跨域请求的解决办法有哪些?

古老的方法 JSONP跨域(动态创建script来读取他域的动态资源)
跨域资源共享(CORS)
nodejs中间件代理跨域

102、vue的指令有哪些

103、vue的计算属性和方法有什么区别

methods中定义的函数,只要页面上调用,就无条件的执行
computed中的计算属性依赖的数据不发送变化时,只读取,不会重新计算,计算属性的结果无需在data中定义,在页面中可以直接使用,会在vue实例上产生一个缓存,如果依赖的数据不发生变化,则会读取缓存

用于保留组件状态或避免从新渲染(缓存的作用 | 缓存使用频率高的页面,提高渲染效率)
可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
 include:字符串或者正则表达式。只有匹配的组件会被缓存
 exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。

105、列举vue生命周期钩子函数

hash:在地址栏url中的#符号,虽然在url中,却不会被包含在http请求中,对后端没有影响,因此改变不会重新加载页面
history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求

107、箭头函数有什么特点

不能使用 new 构造函数 箭头函数不能当作Generator函数

108、vue组件间如何传值

父子组件通信 --通过自定义属性和props来实现
子父组件通信 --通过自定义事件和$emit实现

109、vue等单页面应用及其优缺点

用户体验好,快,内容的改变不需要重新加载整个页面,对服务器压力较小 前后端分离,如vue项目 完全的前端组件化,前端开发不再以页面为单位,更多采用组件化思想,代码结构和组织方式更加规范,便于修改和调整 首次加载页面的时候需要加载大量静态资源,相对时间相对较长 不利于seo优化,单页页面,数据渲染前,意味着没有seo 浏览器的前进、后台导航不能使用 能够原封不动的把嵌入页面展示出来 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决 会产生很多页面,不容易管理 iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化 很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差 iframe框架页面会增加服务器的http请求,对于大型网站是不可取的 现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发

111、css选择器有哪些?哪些属性可以继承

需要在border外侧添加空白时 上下相连接的两个盒子之间的空白,需要相互抵消时 需要在border内侧添加空白时 上下相连的两个盒子之间的空白,希望等于两者之和时

113、介绍js的基本数据类型

114、介绍js有哪些内置对象

不在同一行声明多个变量
使用字面量方式创建对象、数组,(替代new Array)
函数不应该有的时候有return,有的时候没有return
fon-in循环中的变量,用var关键字说明作用域,防止变量污染

116、如何实现数组的随机排序?

118、使用js实现获取文件扩展名?

119、列举几个你知道的js框架么?能讲出他们各自的优点和缺点?

jQuery:实现脚本与页面的分离,最少的代码做最多的事情,插件丰富/不向后兼容,插件兼容, AngularJs:双向数据绑定,模块化/无法完美兼容低版本,太笨重 vue:性能好,简单易用,前后的分离,单页面应用/不利于seo优化,报错不明显 React:虚拟DOM,跨浏览器兼容,模块化,单项数据流,兼容性好/不适合单独做一个完整的框架
文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流
文本流:文档的读取和输出顺序,也就是我们通常看到的由左到右、由上而下的读取和输出形式
 ready:表示文档结构已经加载完成(不包含图片等非文字媒体文件)
 onload:表示页面包含图片等文件在内的所有元素都加载完成

121、vue数据双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
模型(Model)指的是后端传递的数据。 视图(View)指的是所看到的页面。 一是将模型(Model)转化成视图(View),即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。 二是将视图(View)转化成模型(Model),即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。 M和V指的意思和MVVM中的M和V意思一样。 使用MVC的目的就是将M和V的代码分离。 MVC和MVVM的区别并不是VM完全取代了C,只是在MVC的基础上增加了一层VM,只不过是弱化了C的概念,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性。
封装组件:主要是为了解耦,具备高性能、低耦合,在通用组件的时候要留一个插槽
第一步:在compoents文件夹中新建一个vue文件
第二步:在main.js中全局引入,先import,再注册到VUE中
第三步:在任何页面直接使用自己定义的组件
url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示 注意点:query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据。
当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

127、vue-loader是什么?使用他的用途有哪些?

像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

130、vue开发过程中用过的性能优化的方式?

3:三方插件懒加载(按需加载) 4:减少引入外部文件大小

1、尽量减少HTTP请求次数
终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分;
图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变,但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用,如导航栏。确定图片的坐标和可能会比较繁琐且容易出错,同时使用图片地图导航也不具有可读性,因此不推荐这种方法;
内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表(可缓存)中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说,HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧!

2、减少DNS查找次数

域名系统(DNS)提供了域名和IP的对应关系,就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入/newuri
浏览器会把用户指向到Location中指定的URL。头文件中的所有信息在一次跳转中都是必需的,内容部分可以为空。不管他们的名称,301和302响应都不会被缓存除非增加一个额外的头选项,如Expires或者Cache-Control来指定它缓存。<meat />元素的刷新标签和JavaScript也可以实现URL的跳转,但是如果你必须要跳转的时候,最好的方法就是使用标准的3XXHTTP状态代码,这主要是为了确保“后退”按钮可以正确地使用。
但是要记住跳转会降低用户体验。在用户和HTML文档中间增加一个跳转,会拖延页面中所有元素的显示,因为在HTML文件被加载前任何文件(图像、Flash等)都不会被下载。
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问/astrology 时,实际上返回的是一个包含301代码的跳转,它指向的是/astrology/

连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种情况下往往要连接网站的不同内容然后根据用户的不同类型(如浏览器类型、用户账号所属类型)来进行跳转。使用跳转来实现两个网站的切换十分简单,需要的代码量也不多。尽管使用这种方法对于开发者来说可以降低复杂程度,但是它同样降低用户体验。一个可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的不同而采用跳转,那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。

Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是,使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中,用户是否需要等待响应取决于Ajax如何来使用。例如,在一个基于Web的Email客户端中,用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点,“异步”并不异味着“即时”,这很重要。
为了提高性能,优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性,具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax:
让我们来看一个例子:一个为例,你可以看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在中你可以看到如何在你输入内容时加载额外的页面内容。

有预期的加载:载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨“新的页面看起来很酷,但是却比以前慢”。问题可能出在用户对于你的旧站点建立了完整的缓存,而对于新站点却没有任何缓存内容。因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。

7、减少DOM元素数量

一个复杂的页面意味着需要下载更多数据,同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗?你有没有仅仅为了布局而引入更多的<div>元素呢?也许会存在一个适合或者在语意是更贴切的标签可以供你使用。

使用无coockie域名存在静态内容的另外一个好处就是一些代理(服务器)可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是,如果你想确定应该使用example.org还是www.example.org作为你的一主页,你要考虑到coockie带来的影响。忽略掉www会使你除了把coockie设置到*.example.org(*是泛域名解析,代表了所有子域名译者dudo注)外没有其它选择,因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie。

设计人员完成对页面的设计之后,不要急于将它们上传到web服务器,这里还需要做几件事:
你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查:
如果你发现图片中只用到了4种颜色,而在调色板的中显示的256色的颜色槽,那么这张图片就还有压缩的空间。
尝试把GIF格式转换成PNG格式,看看是否节省空间。大多数情况下是可以压缩的。由于浏览器支持有限,设计者们往往不太乐意使用PNG格式的图片,不过这都是过去的事情了。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题,不过同样的,GIF也不是真彩格式也不支持半透明。因此GIF能做到的,PNG(PNG8)同样也能做到(除了动画)。下面这条简单的命令可以安全地把GIF格式转换为PNG格式:
“我们要说的是:给PNG一个施展身手的机会吧!”
在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)。例如:
在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作,同时它还可以用于优化和清除图片中的注释以及其它无用信息(如EXIF信息):

在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小;
Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式;

便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素,而就是100万像素。

31、不要在HTML中缩放图像

那么你的图片(mycat.jpg)就应该是100×100像素而不是把一个500×500像素的图片缩小使用。

favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。
因此,为了减少favicon.ico带来的弊端,要做到:
文件尽量地小,最好小于1K
在适当的时候(也就是你不要打算再换favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

33、保持单个内容小于25K

这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求,因此精简文件就显得十分重要。

34、打包组件成复合文本

把页面内容打包成复合文本就如同带有多附件的Email,它能够使你在一个HTTP请求中取得多个组件(切记:HTTP请求是很奢侈的)。当你使用这条规则时,首先要确定用户代理是否支持(iPhone就不支持)。

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

中某个文档的、 、,因为这是当前域的子域,也不可以设成//,但是还是必须显示的设置///mons.httpclient.HttpStatus;     // 指定允许其他域名访问     // 响应类型     // 响应头设置

6、其它Spring框架的跨域配置

这个会随着版本不断更新提供出不同的方法去实现,不列举先。

除了以上几种方法外,还有flash、在服务器上设置代理页面等跨域方式,这里就不做介绍了。

以上几种方法,可以根据项目的实际情况来进行选择应用,个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。

(以上内容转自此篇文章)

我要回帖

更多关于 iframe跨域问题 嵌入别人的网站 的文章

 

随机推荐