web相关题目

你觉得前端工程师的价值体现在哪?

  • 为简化用户使用提供技术支持(交互部分)
  • 为多个浏览器兼容性提供支持
  • 为提高用户浏览速度(浏览器性能)提供支持
  • 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  • 为展示数据提供支持(数据接口)

谈谈性能优化问题

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。
缓存利用:缓存ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等
请求数量,合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。
请求带宽:压缩文件,开启GZIP。

代码层的优化
  • hash-table来优化查找
  • 少用全局变量
  • innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
  • setTimeout来避免页面失去相应
  • 缓存DOM节点查找结果
  • 避免使用css Expression
  • 避免全局查询
  • 避免使用with(with会创建自己的作用域,会增加作用域链长度)
  • 多个变量声明合并
  • 避免图片和iFrame等空src,空src会重新加载当前页面,影响速度和效率
  • 尽量避免在HTML标签中些Style属性
移动端性能优化
  • 尽量使用css3动画,开启硬件加速
  • 适当使用touch事件代替click事件
  • 避免使用css3渐变阴影效果
  • 可以用transform:translateZ(0)来开启硬件加速。
  • 不滥用Float,Float在渲染时计算量比较大,尽量减少使用
  • 不滥用web字体。web字体需要下载,解析,重绘当前页面,尽量减少使用。
  • 合理使用requestAnimationFrame动画代替setTimeout
  • css中的属性(CSS3 transitions、3D transforms、Opacity、Canvas、webGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加
  • pc端的在移动端同样适用

HTTP和HTTPS?

http协议通常承载于TCP协议之上,在http和tcp之间添加一个安全协议层(SSL或TSL),这个时候就成了我们常说的HTTPS。
默认http的端口号为80,https的端口号为443。

为什么HTTPS安全?

因为网络请求需要中间有很多服务器路由器的转发,中间的节点都可能篹该信息,而如果使用https,密钥在你和终点站才有。https之所以比http安全,是因为它利用ssl或tsl传输。它包含证书、卸载、流量转发、负载均衡、页面适配、浏览器适配、refer传递等,保证了传输过程的安全性。

请谈谈cookie的弊端?

cookie虽然在持久保持客户端数据提供了方便,分担了服务器存储的负担,但还有很多局限性。
第一: 每个特定的域名下最多生成20个cookie
1.IE或最低版本最多20个cookie
2.IE7和之后的版本最多可以有50个cookie
3.Firefox最多50个cookie
4.Chrome和Safari没有做硬性限制
IE和opera会清理近期最少使用的cookie,firefox会随机清理cookie。
cookie最大约为4096字节,为了兼容性,一般不能超过4095字节。

优点:极高的扩张性和可用性。

1.通过良好的编程,控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
4.控制cookie的生命周期,使之不会永久有效。偷盗者很可能拿到一个过期的cookie。

缺点

1.cookie数量和长度的限制。每个domain最多只能有20个cookie,每个cookie长度不能超过4kb,否则会被截掉。
2.安全性问题,如果cookie被人拦截了,那人就可以取得所有的session信息,即使加密也于事无补,因为拦截者并不需要直到cookie的意义,他只要原样转发cookie就可以达到目的。

  1. 有些状态不可能保存在客户端,例如为了防止重复提交表单,我们需要在服务器端保存一个计数器,如果我们把这个计数器保存在客户端,那么他起不到任何作用。

浏览器本地存储有哪些?

html5中web Storage包括了两种存储方式:sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
web storage和cookie的区别
web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。cookie的大小是受限的,并且每次请求一个新的页面的时候cookie都会被发送过去,这样无形中浪费了宽带,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为http规范的一部分而存在,而webStorage仅仅是为了在本地存储数据而生。
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及ff需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web Storage。
localStorage和seesionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等。

cookie和session的区别:

1.cookie数据存放在客户的浏览器上,session数据放在服务器上。
2.cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。
3.session会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie。
4.单个cookie保存的数据不能超过4kb,很多浏览器都限制一个站点最多保存20个cookie。
5.所以个人建议:

  • 将登陆信息等重要信息存放session
  • s 其他信息如果需要保留,可以放在cookie中

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

调用localstorage、cookies等本地存储方式

一个页面从输入URL到页面加载显示完成,这个过程中都发生了生么?

分为4个步骤:

  1. 当发送一个URL请求时,不管这个URL是web页面的URL还是web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询,这能使浏览器获得请求对应的IP地址。
  2. 浏览器与远程web服务器通过“TCP”三次握手协商来建立一个‘TCP/IP’连接,该握手包括一个同步报文,一个同步应答报文和一个应答报文,这三个报文在浏览器和服务器之间传递,该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
  3. 一旦‘TCP/IP’连接建立,浏览器会通过该连接向远程服务器发送‘HTTP’的‘get’请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。
  4. 此时,‘web’服务器提供资源服务,客户端开始下载资源。
    请求返回后便进入了我们关注的前端模块
    简单来说,浏览器会解析‘HTML’生成‘DOM Tree’,其次会根据css生成Rule Tree,而‘javascript’又可以根据DOM API操作DOM
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,102评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 4,519评论 0 20
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 811评论 0 1
  • StateListDrawable源码详解 背景 在开发过程中我们的按钮有时候会有点击和抬起用到不同的背景效果,一...
    johnnycmj阅读 2,187评论 0 5