前端面试题集锦(一)

移动端的300ms延时:

300ms延时的主要原因是双击缩放,即手指在屏幕上迅速点两下,iOS自带的浏览器会将网页缩放至原始比例。所以假如当用户点击一个链接时,浏览器不能立即确定用户是否要打开这个链接还是执行双击屏幕操作,所以iOS就等待300ms,以等待用户是否再次点击屏幕,而且现在几乎所有的移动端都有这个功能。

解决方案:

添加viewpoint meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minium-scale=1,maximum-scale=1,user-scalable=no /">

前端性能优化:

①减少HTTP请求次数:

根据需要尽可能的去合并静态资源图片,JavaScript代码和css文件,减少页面请求次数,这样可以缩短页面首次访问的等待时间,除此之外也要尽量避免重复资源,防止增加多余的请求。

②减少HTTP请求大小:

对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟等等。

③将css和js放到外部文件中,使用<link hrref="">和<script src="">,在外部进行引入

④为HTML指定Cache-Control或者Expires,可以将HTML内容缓存起来,避免频繁向服务器发送请求,缓存之后浏览器会直接从缓存读取内容,不向服务器发送请求。

<meta http-equiv="Cache_control" content="max-age=7200">

<meta http-equiv="expires" content="Wed ,20 July 2018 10:29:00 GMT">

⑤减少页面的重定向

⑥静态资源不同域名存放:

浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以有多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数。

⑦使用可缓存的Ajax , 合理使用ajax能加快ajax响应速度并减少服务器压力

$.ajax({

  url:url,

  dataType:‘json‘,

  cache:true,

  success:function(data){

  }

})

⑧合理使用get请求

POST请求会首先发送文件头,然后发送HTTP正文的数据。而使用get只发送头部,做一在获取数据时使用get请求效率要高

⑨减少cookie的大小并进行cookie隔离

因为HTTP请求默认会带上浏览器端的cookie一起发送给服务器端,所以在不必要的情况下要尽量减少Cookie。

对于静态的资源,尽量使用不同的域名存放,因为Cookie默认是不能跨域的,这样就会做到不同域名下静态资源请求的Cookie隔离。

页面渲染类的前端优化

①css文件放在页面的头部,JavaScript文件放在页面的底部

②减少DOM元素数量和深度

尽量避免使用table,iframe等慢元素,table的DOM渲染是全部生成完并一次性绘制到页面上,所以长表格渲染是很耗性能,可以考虑用ul代替。

尽量使用异步的方式动态加载iframe,因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML中DOM的解析。

页面重定向的几种方法:

JS实现页面重定向:

window.location.href=c

window.history.back(-1)  //后退一步并刷新

window.navigate("http:www.baidu.com")

self.location="http:www.baidu.com"

原文地址:https://www.cnblogs.com/fanfan0916/p/9389791.html

时间: 2024-10-24 21:28:14

前端面试题集锦(一)的相关文章

Web前端面试题集锦

Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScript: 数据类型.面向对象.继承.闭包.插件.作用域.跨域.原型链.模块化.自定义事件.内存泄漏.事件机制.异步装载回调.模板

前端面试题集锦及答案解析--HTML、 HTTP、web综合问题

前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同:keywords列举出重要关键词即可 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 重要内容HTML代码放在最前:搜索引擎抓取HTMl顺序是从上到下,有的

web前端面试题集锦二

1.为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 2.浮动元素引起的问题? 答案:a. 父元素的高度无法被撑开,影响与父元素同级的元素 b. 与浮动元素同级的非浮动元素会跟随其后 c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构 3.line-height三种赋值方式有

好程序员HTML5大前端分享web前端面试题集锦三

1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元素原来的位置 3.对web标准以及w3c的理解与认识? 答案:web

web前端面试题系列:(一)

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你

前端面试题 -- JS篇

前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数据类型. 原始数据类型: null,undefined, string,number,boolean 引用数据类型:object 两者的区别:1)值存储方式不同: 原始数据类型:将变量名和值都存储在栈内存中 引用数据类型:将变量名存储在栈内存中,将值存储在堆内存中,并在栈内存中存储值的地址,该地址指

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

前端面试题2016--HTML

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的! 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增.正如赫门在2015深JS大会上的<前端服务化之路>主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富.创造的应用也会更加完美.所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前

各大互联网公司前端面试题(js)

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方