HTTP缓存（ ETag、Cache-Control）——谷歌开发者 HTTP缓存有利于web性能优化
我们最开始学前端的时候都会看到教程在处理外部css，js的时候会将css放在header中，js放在body的最后。为什么要这样子处理，今天参考一些资料好好分析下。
传统请求周期： 浏览器发送一个HTTP请求到Web服务器； web服务器解析请求，然后读取数据存储层，制定一个HTML文件并用一个HTTP响应把它发送到客户端； HTTP响应通过互联网传送
前端爱好者的聚集地 最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。 因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料， 从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍，欢迎转发！ 展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系， 重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。 内容是：从浏览器进程，再到浏览器内核运行，再到JS引擎单线程，再到JS事件循
ECMAScript是JavaScript的核心，但如果要在web中使用JavaScript，那么BOM则是真正的核心，BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
web driver 是可以直接操作浏览器的driver, 根据不同的浏览器，需要不同的driver,下面列出了一些可用的web driver的镜像地址： chrom浏览器的web driver（chromedriver.exe）：http://npm.taobao.org/mirrors/chromedriver/ firefox（火狐浏览器）的web driver （geckodriver.exe）：https://github.com/mozilla/geckodriver/releases IE(IEDriverServer_Win32_3.9.0.zip 是32位的3.9.0 driver): http://selenium-release.storage.googleapis.com/index.html web自动化测试中，可以通过webdriver的API，向浏览器发送相应的request, 然后实现自动测试，比如自动点击，自动填写，自动滚动，自动切换窗口/标签页等。 但是如上所述，不同的浏览器有不同的web driver. 那么自然也就有不同的API提供，所以对于同一个功能，那么就需要基于不同的driver,学习不同的API,这操作起来，岂不是头疼？ 在python中，我们只需要按照如下导入webdriver, 就可以轻松用一种方式来应付各种不同的web driver了:
一、方案背景介绍 随着互联网技术的发展，用户使用QQ浏览器进行上网观看视频越来越多，最近统计目前使用QQ浏览器观看视频已经过亿。不同的用户由于不同的场景下播放不同的网站的视频源，可能会出现播放失败的情况，而这些失败的播放数据会通过数据上报系统上报至运营后台，将后台拉取数据并经过一定的分析，就能得到播放失败的网站、机型、时间、网络状态等信息，下图是最近后台统计的播放失败率最高的几个视频网站，如下图所示： 当然播放失败可能有多种原因而导致的，例如：浏览器对该种类型的网络视频不兼容、网络视频本身出现问题、用
关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。
之前讲到重排，布局的时候使用flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
继前面几篇文章后再来说说老生常谈的话题，怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》，并根据自己工作中所接触到的知识整理而成。
如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。
1. 业界案例 目前前端性能监控系统大致为分两类：以GA为代表的代码监控和以webpagetest为代表的工具监控。 代码监控依托于js代码并部署到需监控的页面，手动计算时间差或者使用浏览器的的API进行数据统计。 影响代码监控数据的因素有以下几种： 浏览器渲染机制； 浏览器对API的实现程度，比如performance API； 工具监控不用将统计代码部署到页面中，一般依托于虚拟机。以webpageTest为例，输入需统计的url并且选择运行次url的浏览器版本，webpageTest后台虚拟机对url进
前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案，
为什么要在这个时候探索flv.js做直播呢？原因在于各大浏览器厂商已经默认禁用Flash，之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能，这样的用户体验很致命。 在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。 如果你看的很吃力可以先了解下音视频技术的一些基础概念。 常见直播协议 RTMP: 底层基于TCP，在浏览器端依赖Flash。 HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。 WebSocke
为提供完备的HTTP2能力，腾讯CDN现已完成HTTP/2的Server Push支持，并完成了详细的性能测试。
在后端为了加速服务的访问速度，通常可以使用 Memcached、Redis 做数据缓存，那么在浏览器端又有哪些缓存策略呢？
一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除
前言 见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 超长文+多图预警，需要花费不少时间。 最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。 因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料， 从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。 展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系， 重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识
实际上浏览器的事件循环标准是由 HTML 标准规定的，具体来说就是由whatwg规定的，具体内容可以参考event-loops in browser。而NodeJS中事件循环其实也略有不同，具体可以参考event-loops in nodejs
最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想到一个困扰很久的问题，即一般把<script>放在<body>尾部，<link>标签放在<head>内部，而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面。
作者：卢满宇， 腾讯后台开发 工程师 商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。 原文链接:http://wetest.qq.com/lab/view/355.html WeTes
请注意，本文编写于 1727 天前，最后修改于 996 天前，其中某些信息可能已经过时。
可以理解为进程是能拥有资源和独立运行的最小单位，线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程，官方术语：
正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则， 也可以将一个字符串中符合规则的内容提取出来。
Node.js 8.4.0已经开始支持HTTP/2，执行node命令时，加上--expose-http2选项就可以使用了。
奇舞团是360集团最大的大前端团队，同样也是TC39和W3C会员，拥有Web前端、服务端、Android、iOS、设计、产品、运营等岗位人员，旗下的开源框架和技术品牌有SpriteJS、ThinkJS、MeshJS、Chimee、QiShare、声享、即视、奇字库、众成翻译、奇舞学院、奇舞周刊、泛前端分享等。
通常，是因为 cache control 缓存控制策略定义不正确，导致服务端最新部署之后客户端没有接收到最新的更改。
HTTP/1.X出色地满足互联网的普遍访问需求，但随着互联网的不断发展，其性能越来越成为瓶颈。IETF在2015年发布了HTTP/2标准, 着重于提高HTTP的访问体验, HTTP2优势主要包括: 二进制传输、头部压缩、多路复用和服务器推送(Server Push)。 截止目前, 大部分CDN厂商已经宣布支持HTTP/2，然而”支持”大多省略了服务器推送(ServerPush)特性。估计这和nginx开源版本没有支持Server Push相关。为提供完备的HTTP2能力，腾讯CDN现已完成HTTP/2的Server Push支持，并完成了详细的性能测试。
该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。
1． 加载页面[image.png]PhantomJS 截取的是网页的完整页面，包括下拉进度条的内容
如果我们项目是前后端分离并且内容是AJAX动态获取想要进行网站排名优化（SEO）的话，可以使用prerender
这个压缩版的图片和原始数据的图片是有差异的，虽然压缩的过程中丢失了一些数据，但是这些差异对于人眼是无法识别的。所以在压缩之后不影响整体的浏览体验效果，同时对于页面来说，静态资源图片的容量也可以减少很多，从而提高网页的加载速度。
最近朋友需要让我帮忙设计能抓取网页特定数据的爬虫，我原以为这种程序实现很简单，只要通过相应的url获得html页面代码，然后解析html获得所需数据即可。但在实践时发现我原来想的太简单，页面上有很多数据根本就无法单纯从html源码中抓取，因为页面展现的很多数据其实是js代码运行时通过ajax的从远程服务器获取后才动态加载页面中，因此无法简单的通过读取html源码获得所需数据。
在做web自动化时，有些情况selenium的api无法完成，需要通过第三方手段比如js来完成实现，比如去改变某些元素对象的属性或者进行一些特殊的操作，本文将来讲解怎样来调用JavaScript完成特殊操作。
如上代码可以被支持 ESM 的浏览器所识别，但并不意味着其可以直接被运行。比如我的代码依赖了 npm 包和一些相对路径，这些浏览器是无法识别的。
让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：
说到 HTTP 的 103 状态码，你可能很早就听说过了，但是你不一定真的理解了它。
学生管理系统2.0基本功能 基本功能 添加学生功能 展示学生列表功能 删除学生功能 查看学生详情 更新学生数据 实现思路 注册功能思路： 表单设计，点击提交按钮向服务器提交表单数据 在后台获取表单提交的数据，保存到数据库中 先获取表单的标签的数据 保存上传的图片（并保存图片存储的路径） 将表单的数据和图片的路径一起保存到数据库中 保存完成，跳转到列表页，查看新添加的数据 展示功能思路： 先从数据库中获取数据（二维数组arr） 遍历二维数组，将数组中数据渲染到页面中 删除功能思路： 获取要删除数据的id
大家好，我是若川。欢迎加我微信 ruochuan12，长期交流学习。今天推荐神器puppeteer，我猜有挺多人不知道。文章不长，看完有空也可以试玩。
同步模式：又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
Web文档(document)：一些呈现静态信息的页面，虽然有的页面是会动的，但信息本身还是静态！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
