本文首发于饿了么前端——知乎专栏 大家可以点击文章底部的阅读原文来访问原文 Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系
最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。
你的网页性能优化的再好，如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。
百度又一产品下线通知，哎，真可谓是跟着百度干，要么钵满盆满，要么倾家荡产！此话不虚啊，想当年MIP当出来时各种风光啊，什么极速体验，又什么闪电图标、算法等等，然后看发展不起来又都一一下线，就跟小孩过家家闹着玩似的，坑了一批又一批站长啊，对百度之前可能是又爱又恨，但是以后估计爱没了，就只有恨了。。。废话不多说了，通知下线原文如下：
Discuz论坛是国内使用最多的论坛系统，现在最新版为X 3.4，X3.4 从 2018 年 1 月 1 日起只在官方 Git 发布，地址：https://gitee.com/ComsenzDiscuz/DiscuzX，说明已经开源了。discuz有那么多的粉丝，跟它完善的功能有很大关系，开箱即用，很多优化可以直接在后台设置，应对高并发/大数据量，那么discuz怎么优化呢？可以从以下几点来进行，跟ytkah一起来看看吧。
install 事件回调中有两个方法： * event.waitUntil()：传入一个 Promise 为参数，等到该 Promise 为 resolve 状态为止。 * self.skipWaiting()：self 是当前 context 的 global 变量，执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。 * 安装后( installed )：Service Worker 已经完成了安装，并且等待其他的 Service Worker 线程被关闭。 * 激活( activating )：在这个状态下没有被其他的 Service Worker 控制的客户端，允许当前的 worker 完成安装，并且清除了其他的 worker 以及关联缓存的旧缓存资源，等待新的 Service Worker 线程被激活。
注意： 每个 Application 只调用一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()
今天修改项目中一个有关WebView使用的bug，激起了我总结WebView的动机，今天抽空做个总结。
当下浏览器内核主要有 Webkit、Blink 等。本文分析注意是自 2001 年 Webkit 从 KHTML 分离出去并开源后，各大浏览器厂商魔改 Webkit 的时期，这些魔改的内核最终以 Chromium 受众最多而脱颖而出。本文就以 Chromium 浏览器架构为基础，逐层探入进行剖析。
在控制台中输入window.performance.timing(html5的属性);
但是你根本还是不清楚你性能优化的程度，不知道你网站的性能如何就像盲目地填一个不知道多深的坑，如此没有目的性的优化必然浪费大量精力而得不到想要的结果
网友上网都不喜欢用太多的时间等待网页的打开，等待的越长，用户可能会直接关闭网页，这样就会损失很多流量！其次，关键字的排名与网页的打开速度也有关系，这个主要体现搜索引擎对用户体验度上，用户体验度好，排名相对其它网站就好些。因此我觉得我们有必要去提高网页的打开速度，这个不需要太多的成本投入，只需要平时多注意一些小技巧就行了！下面给出20种方法帮你提高网站访问速度缩短网页加载时间。 1、减少页面HTTP请求数量 比较直接的理解就是要减少调用其他页面、文件的数量。 A.我们在使用css格式控制的时候，经常会采用ba
作为一个前端，经常会有老板或测试给我们提出某个地方加载太慢了，需要优化一下。我们自己的网站也一样，加载时间过长，自己都不耐烦，对于网页优化是很常见的，今天我们先介绍下网页加载原理。
前言——几日前，我那上初中的妹妹突然发VX问我说她想复制网上搜到的一些朋友圈文案拿去发朋友圈，但是问题是复制不了！
PWA是最近前端最火热的一个概念之一，Service Worker为PWA赋能离线可用性以及push消息。
前面一段时间因为备案，遗漏了很多信息，今天补充下百度快速收录的提交代码，百度快速收录的功能上线，是全面继承百度移动专区天级收录功能，并且天级提交功能于 5 月 18 日已经暂停使用了。
小汪最近在看【WebKit 技术内幕】一书，说实话，这本书写的太官方了，不通俗易懂。
URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。
上一篇文章介绍的是《浏览器缓存机制》，浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源，提升网页加载速度。缓存的数据到底放哪了呢？作为开发者，有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找？
浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源，提升网页加载速度。缓存的数据到底放哪了呢？作为开发者，有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找？
HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。 想要调试的文件放在哪里 首先，按照全局模式“-g”进行安装~（前面一篇文章我们已经讲过了） 之后，将我们需要调试的页面放置于如下目录当中：C:\Users\Administrator\AppData\Roaming\npm\node_
Service Workers 是什么？它们能做什么，它如何让您的 web 应用更好的表现？本文旨在回答这些问题，以及如何使用 Ember.js 框架来实现 Service Worker。
CloudFlare 是一家功能非常强大的免费 CDN 免费加速服务，它是通过反向代理（reverse proxy）提供网站加速服务，为站长解决了 jpg/JS/CSS 这些静态文件到 CDN 上的问题，并且通过它部署在全球各大洲的缓存结点服务器（详细列表），提供高效的加速服务。
面试经典题——URL加载 一、涉及基本知识点： 1. 计算机网络 五层因特尔协议栈： 应用层（dns、http）：DNS解析成IP并完成http请求发送； 传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接； 网络层（IP、ARP）：IP寻址； 数据链路层（PPP）：将请求数据封装成帧； 物理层：利用物理介质传输比特流（传输的时候通过双绞线、电磁波等） OIS七层框架:多了两层即，会话层（处理两个通信系统中交换信息的表示方式）和表示层（管理不同用户和进程之间的对话）。 get和post的
网站优化理论方面可以看杨正祎同学的文章如何提高网页的效率（上篇）——提高网页效率的14条准则，如何提高网页的效率（下篇）——Use YSlow to know why your web Slow，本文给你介绍一个实际的类库帮助你完成网站的优化。 Combres - WebForm & MVC Client-side Resource Combine Library 是一个 ASP.NET 网站的客户端资源js,css的压缩，合成和缓存库，基于Apache 2.0协议开源，最新版本是2.0。这个库同时支持We
每次页面加载成功后，就会调用 register() 方法，浏览器将会判断 service worker 线程是否已注册并做出相应的处理。 scope 参数是可选的，默认值为 sw.js 所在的文件目录。 打开 chrome 浏览器, 输入 chrome://inspect/#service-workers 可以可以用 DevTools 查看 Service workers 的工作情况。
Service Workers 本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行，能够拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源，从而实现拦截和加工网络请求、消息推送、静默更新、事件同步等一系列功能，是 PWA 应用的核心技术之一。
mod_expires可以减少10%左右的重复请求，让重复的用户对指定的页面请求结果都CACHE在本地，根本不向服务器发出请求。
rom dist cache和from memory cache均是浏览器缓存的一种形式，但两者却有很大的区别
Service Worker 以其 异步安装 和 持续运行 两个特点，决定了针对它的更新操作必须非常谨慎小心。因为它具有拦截并处理网络请求的能力，因此必须做到网页(主要是发出去的请求)和 Service Worker 版本一致才行，否则就会导致新版本的 Service Worker 处理旧版本的网页，或者一个网页先后由两个版本的 Service Worker 控制引发种种问题。
高性能网站架构方案（二）——优化网站响应时间 （原创内容，转载请注明来源，谢谢） 一、概述 优化网站响应时间是保证网站受用户关注的要点，主要方案有： 1、减少HTTP请求 当需要加载图片、css、js等内容时，尽量减少加载的次数。可以合并加载，另外当改动量很少时，尽量将内容进行缓存。 图片的缓存可以设定更新时间，定时去服务器查看是否有需要更新的内容。通常可以定时在1周甚至更久的时间。 CSS、JS的缓存，通常可以通过文件名的方式来判断是否需要重新加载。当网页确定需要加载某些js和c
最近客户反应说网站加载很慢，通过GTmetrix检测到有一项值Leverage browser caching为0，这是什么意思呢？前面这篇文章有个简单的科普：Expires 或 Cache-Control 响应头—前端性能优化 3，一般来讲，浏览器等客户端都会有缓存机制来减少 HTTP 请求的数目和大小，让页面能够更快加载。Web 服务器通过有效期 HTTP 响应头来告诉客户端，页面的各个组件应该被缓存多久。如果你用的是 Apache 服务器，用 ExpiresDefault 指令来设置相对于当前日期的有效期。下面就随ytkah一起来看看吧
DOCTYPE 是 html5 标准网页声明，且必须声明在 HTML 文档的第一行。用来告知浏览器的解析器用什么文档标准来解析该文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 的解析。
124.65.133.242 – – [27/Oct/2014:14:30:51 +0800] “-” 400 0 “-” “-” 124.65.133.242 – – [27/Oct/2014:14:31:45 +0800] “-” 400 0 “-” “-” 124.65.133.242 – – [27/Oct/2014:14:31:45 +0800] “-” 400 0 “-” “-” 124.65.133.242 – – [27/Oct/2014:14:31:45 +0800] “-” 400 0 “-” “-”
HTML 1、Doctype作用？标准模式与兼容模式各有什么区别? （1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html> 标签之前。告知浏览器的解析器用什么文档标准解析这
遇到应用层无法解决的问题，如果能确定需要引擎和模块支持的，不要自己想办法绕过去，要第一时间在开发者社区提交问题，或找 APICloud 项目经理提出。
最近，需要对业务上的一些性能做一些优化，比如降低首屏时间、减少核心按钮可操作时间等的一些操作；在这之前，需要建立的就是数据监控的准线，也就是说一开始的页面首屏数据是怎样的，优化之后的数据是怎样，需要有一个对比效果。此时，performance 这个API就非常合适了。
---- 相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用？严格模式与混杂模式如何区分？它们有何意义（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 （2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点
从输入URL到页面加载完成，发生了一系列复杂的步骤，涉及到浏览器、DNS服务器、Web服务器等多个组件的协同工作。下面是详细的过程：
在这个数据驱动的时代, 做什么事情没有数据光凭感觉是不可能了, 关于点击日志, 解决方法无外乎这么三种: 1. 在点击 url 串上带上丰富信息, 然后在后续处理的前端 (比如 nginx 或 apache) 上打印请求日志, 把请求日志汇总过滤得到想要的; 2. 做点击跳转, 用户点击后先跳到自己服务器上, 然后由自己的服务器做重定向, 并记录这一次请求; 3. 前端 JavaScript 监控用户鼠标行为, 并及时上报到服务器. 这三种方法也分别有各自的优缺点, 当时分析的是 1. 这个必须要保证点击后还是跳到自己的服务器上, 否则跳出去的点击无法跟踪. 不太可能丢日志, 只是过滤会多道工序. 目测 Facebook 曾经是这样干的; 2. 绝对完整的记录. 不过需要新增服务器响应跳转请求, 并且如果跳转服务挂了会让用户压根到不了 url 指向的地方. 目前所有的广告服务都是这样 (而且点击串加密), Google 的网页搜索很早就是这样, 百度跟 360 干上后也换成了这种. 根据度厂员工在新浪微博上跟别人的讨论, 即使是百度网页搜索那么大的量, 算上灾备最多 50 台跳转服务器可以搞定 (根据公开资料, 百度每天网页搜索量在十亿这个量级, 按搜索引擎页面点击率 30% 算, 每天至少三亿次点击跳转请求); 3. 可记录的东西非常多, 不仅仅是点击, 而且还有一些页面上的其他 js 行为 (如悬浮, js 展开元素等), 但是会丢 15%~20% 的数据. 跟 360 干架前百度的网页搜索用的这种方式, 刚看了下 FB 也是这种了. 其他的优缺点都比较容易明白, 但是 js 模式会丢 15%~20% 的数据这个非常难理解, 之前我只听到 20% 这个比例, 但是没人告诉我为什么, 昨天跟死猫君说日志的时候他也提到他们那边用 js 记的日志也有 15% 的丢失率, 但是他也只是听说这个比例而不明白原理. 今天跟前端同学讨论, 终于搞懂了为什么是这样. 后端的思维是每发生一次事件就打一条日志, 所以极难发生日志丢失的问题. 而前端不能每发生一次事件就向服务器发请求打一次日志, 这样会带来很大的网络开销并拖慢用户的浏览器, 所以前端都是把要纪录的行为在用户端先缓存, 等积累够若干条或过了若干秒后才向服务器汇总上报, 如果在这个上报条件触发前浏览器崩溃掉, 那日志就没了, 或者用户关掉浏览器也会丢掉这部分数据 (据说有一些方式可以响应关闭事件并上报日志, 但具体方式不了解, 另外前端同学反馈 IE6 下丢数据现象更严重). 所以丢数据这事其实是用户流畅度体验和数据完备性的一个平衡, 如果让用户卡一点那丢失比例就低一点. 另外接 js 汇报日志的服务器压力也是一个要考虑的点, 因为如果真用 js 汇报, 那一定就不止点击这点数据了, 鼠标滚轮, 悬停等事件显然是能有都有, 服务器不一定扛的过来.
如果一个网站已经有现成的网页及业务逻辑，那么使用WebView将其内嵌到app中，省去了app重画页面与http通信的事情，无疑是更经济的做法。WebView就是Android上的一个浏览器内核，可自动展示web页面，并且实现js代码的相互调用。 下面是WebView的常用方法： getSettings : 获取浏览器的web设置信息。 addJavascriptInterface : 添加本地的js代码接口。 removeJavascriptInterface : 移除本地的js代码接口。在4.0至4.2的Android系统上，Webview自己增加了searchBoxJavaBredge_，可能被黑客利用导致远程代码执行。为阻止该漏洞，需要手工移除接口searchBoxJavaBredge_。代码如下所示：
webpack是当下最流行的js打包工具，这得益于网页应用日益复杂和js模块化的流行。webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的
webpack在启动后，会根据Entry配置的入口，递归解析所依赖的文件。这个过程分为「搜索文件」和「把匹配的文件进行分析、转化」的两个过程，因此可以从这两个角度来进行优化配置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
