qq_27009517的博客

SEO 工作的目的　　seo 的工作目的是为了让网站更利于让各大搜索引擎抓取和收录，增加产品的曝光率。1. title description keywords 标签设置2. h1-h6 img的alt a 标签的 rel="nofollow"3.建立 robots.txt 文件4.建立网站的 sitemap 地图文件5.安装百度的自动推送代码6.增加网站的 404 页面，设置链接SEO 注意事项　　1. 网站 TDK 标签的设置。title,...

之前有同学在前端技术分享时提到了SEO，另一同学问我SEO是什么，我当时非常诧异，作为前端应该对SEO很了解才对，不过仔细想想，现在前后端分离的大趋势下，SPA单页WEB应用也随之兴起，现在的前端新生对SEO不了解也是有原因的，所以本次就带着大家重识SEO！什么是SEOSEO（Search Engine Optimization），中文翻译成搜索引擎优化，是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎的检索原则并且对用户更友好，从而更容易被搜索引擎收录及优先排序发展史SE

01引言随着前端系统的越发复杂，前端的性能也受到越来越多的重视。Google也不断在推进新的性能相关指标，从原先的Performance API中的指标逐步演进成用户性能体验相关的指标。对于用户而言，First Paint、First Meaningful Paint和TTI这几个指标可以直接影响到用户体验。关于前端性能优化有非常多的最佳实践可以参考，这篇文章会重点介绍前端渲染的方案及其优劣。02CSR vs SSRCSR：Client Side Rendering浏览器

最近做的一个react项目在chrome查看一切ok，但是客户说要在QQ浏览器访问，发现在QQ浏览器访问功能基本瘫痪。最后发现就是ie9和一些低版本的高级浏览器对es6新语法并不支持，babel-polyfill可以解决首先：在main.js中引入babel-polyfillimport 'babel-polyfill';然后在webpack.config.js的入口引用entry: [ 'babel-polyfill', 。。。]在webpack.productio

DevTools failed to load SourceMap: Could not load content这里的意思是dev工具未能成功加载出源映射：无法加载内容 重点在for后面的部分，我遇到的提示是这样的DevTools failed to load SourceMap: Could not load content for chrome extension://ncennffkjdiamlpmcbajkmaiiiddgioo/js/xl-content.js.map即为ch.

针对浏览器的http缓存的分析也算是老生常谈了，每隔一段时间就会冒出一篇不错的文章，其原理也是各大公司面试时几乎必考的问题。之所以还写一篇这样的文章，是因为近期都在搞新技术，想“回归”下基础，也希望尽量总结的更详尽些。那么你是否还需要阅读本篇文章呢？可以试着回答下面这个问题：我们在访问百度首页的时候，会发现不管怎么刷新页面，静态资源基本都是返回 200（from cache）：随便点开一个静态资源是酱的：哎哟有Response报头数据呢，看来服务器也正常返回了etag什么鬼的应有

前言 大家肯定都听说过很多浏览器优化原则吧，例如说减少DOM操作，使用transformX（0）进行硬件优化，避免js文件执行时间过长使得页面卡顿等等。大部分人可能都知道，但也仅限于知道，即知其然，不知其所以然。 学习要形成自己的知识体系，否则的话，往往是东一榔头西一榔头地学习知识，这样导致学习到的知识松散，无法形成内在的联系，也就导致了学习地不够深入，只是浮于表面，只是“记住”了知识。 所以，接下来，我想来为大家梳理一下浏览器运行过程中需要理解的知识，如下：前言 进程与线程 浏览器进程

前言本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。CPU，GPU，内存和多进程架构在本篇文章中，我将会从Chrome浏览器的高层次架构（high-level architecture）开始说起，一直深入讲到页面渲染流水线（rendering pipeline）的具体细节。如果你想知道浏览器是怎么把你编写的

1.断点调试是啥？难不难？断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）步骤记住没？用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下，OK!恭喜你的处女断点打上了,哈哈~~2.断点怎么打才合适？打断点操作很简单，核

Elements面板实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图：点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。.

Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。按钮的功能Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。Sources:断点调试JS

浏览器的主要组件包括：1.用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。2.浏览器引擎 - 在用户界面和渲染引擎之间传送指令。3.渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。4.网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。5....