机智的皮卡丘的博客

最近在做跨页面的广播通信，相对于前端来说用的比较少，主要使用了broadcast Channel，他可以在同源的浏览器tab中相互通信，类似localstorage，使用的发布订阅模式使用方法如下。const channel= new BroadcastChannel('eventCode');channel.postMessage('')// 需要触发的页面new之后监听channel.onmessage =function(e) { console.log('接收到消息:', e.d.

前端缓存一般针对如CSS,JS,image等使用缓存Expires头 这些标头用于指定相应时间段，浏览器可在指定的这段时间内使用已缓存的资源，而无需查看网络服务器是否提供了新版资源。这些缓存标头功能强大，没有任何应用条件限制。 解读: 炒鸡厉害的缓存，基本接到该资源会看下expires要到什么时候才会结束下图为2037年，缓存20年，本地有缓存会显示200 from cache(以后也不会去跟

chrome和ff一直都是web开发者最后青睐的浏览器，作为先进浏览器在兼容性和html5的支持都非常的不错，比IE要好多了，头好痛，今天来研究下chrome开发者工具 在window中按F12就可以调出来了，中间有几个选项卡，Elements、console、sources、network、timeline，profiles，application，Security，audits

一、web标准 简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等

这也是我面试的时候经常碰到的一个问题，有的时候面试官表达的比较模糊，有的时候我不太明白意思（被首页这两个字迷惑），所以有点蒙，结果就答得不好，今天稍微整理了下1.书写标准1.将样式表放在头部 2.将脚本放在底部 3.使用外部的JavaScript和CSS，可缓存 4.减少DNS查找 5.避免重定向发出多次请求 6.减少重构重绘 7.减少DOM元素的数量 8.尽量减少DOM

1、PC优化手段在Mobile侧同样适用。 2、在Mobile侧三秒种内渲染完成首屏指标或使用Loading。 3、基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB，加载时间就会越长，会增加网民访问的跳出率。 4、Mobile侧因手机配置原因，除加载外渲染速度也是优化重点，要合理处理代码减少渲染损耗。 5、加载完成后用户交互使用时也需注意性能。 6、

官网上对PWA的宣传是这四个关键字：可靠、快速、Engaging、安全；再点进去PWA的主页，会发现还有Instant Loading、添加自主屏、通知推送、响应式，而官方教程就更棒了，一次性给了10个关键字！包括Progressive, App-like, Fresh, Installable……什么是渐进式Web应用程序？ 渐进式Web应用程序是：渐进式 - 适用于所有用户，无论浏览器的选择是

要求熟练玩转前端技术三驾马车，掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准，掌握Ajax异步编程； 能够写出高性能、可复用的前端组件 对OO、MVC、MVVM等编程思想有了解，对前端MV*框架有深刻理解，熟练掌握一个前端框架（Vuejs, AngularJS, React ）了解其原理； 熟练掌握React、Redux及相关框架和技术，有单页

在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖

Web安全，也可以叫做Web应用安全。 互联网本来是安全的，自从有了研究安全的人之后，互联网就变的不安全了。Web安全的本质是信任问题 由于信任，正常处理用户恶意的输入导致问题的产生 非预期的输入 安全是木桶原理，短的那块板决定的木桶世纪能装多少水，同样的，假设把99%的问题都处理了，那么1%的余留会是造成安全问题的那个短板xss 跨站脚本攻击(Cross Site Scr

HTML5 添加了很多语义元素如下所示： 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本，使其脱离其父元素的文本方向设置。 定义命令按钮，比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 定义对话框，比如提示框 标签包含 details 元素的标题 规定独立的流内容（图像、图表、照片、代

SVG 什么是SVG？ 　　SVG 指可伸缩矢量图形 (Scalable Vector Graphics) 　　SVG 用来定义用于网络的基于矢量的图形 　　SVG 使用 XML 格式定义图形 　　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 　　SVG 是万维网联盟的标准 　　SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG有什么优势？

所谓的Hybrid App其实会有不同的分支。而且会和Native应用有重合的地方。下面就说三种不同的解决方案。方案一：使用PhoneGap、AppCan 、html5+之类的中间件，以WebView作为用户界面层，以Javascript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。这种架构一般会非常依赖WebView层的性能。方案二：使用Adobe Air、Ruby

主流的app分为Native，webapp，hybirdapp三种。 Native原生开发，目前较为成熟，各大公司均采用此方式。但是其人工成本较高，同一个项目，至少需要Android端、iOS端、Web端三个开发团队。 Web App是指基于Web的系统和应用，运行在高端手机的网络和浏览器上，用网页技术开发实现特定功能的应用。与WAP的区别：功能层面。WAP的侧重使用网页技术在移动端做展示，包括

国内Hybird开发模式 的app 淘宝,天猫,微信,京东,携程,网易 微信 html 我的钱包具体功能，发现购物 淘宝、携程 native：首页，系统列表页 https://www.zhihu.com/question/28469978 淘宝天猫这样的超大型App业务逻辑太复杂，目前天猫是20% native +70% H5，search，detail，范儿，还有作者所在的交易链

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

下面介绍几种经典HTTP状态： 101:长连接状态，web端的话使用html5的websocket会出现，如下图，是个websocket的实例，可以看出长时间pending，一直处于连接状态（用来做通讯类的） 200:服务器已成功处理了请求,返回结果，成功了(有可能是expires缓存，不

Java实现原理研究 参照Android：WebView与Javascript交互（相互调用参数、传值）http://itfish.net/article/25514.html 研究了安卓java的功能接口代码,上述地址先在Activity(java源生和js之间类似与桥梁的文件)中先使用了 webView.addJavascriptInterface(new JsInte

前端常用优化技巧